Lesson One: The Beginning

Chapter 1: Pixels

Learning Processing

Daniel Shiffman

Presentation by Donald W. SmithGraphics from http://www.learningprocessing.com/tutorials/

Lesson One: The Beginning

1: PixelsSpecifying pixel coordinates

Basic shapes: point, line, rectangle, ellipse

Color: grayscale, “RGB”

Color Transparency

2: Processing

3: Interaction

Learning Processing: Slides by Don Smith 2

Graph Paper

Every point on the screen is a pixelIt has a location: (x, y)

Learning Processing: Slides by Don Smith 3

Coordinate System

Upper left corner is 0,0X is ‘across’ (to right as x increases)

Y is ‘down’ (down as y increases)

Learning Processing: Slides by Don Smith 4

NOT the same as your Algebra coordinate system!

Simple Shapes

What do we need to specify a shape?Point: x and y

Line: Two end points?

Rectangle: Two corners? Or ???

Ellipse: ????

Learning Processing: Slides by Don Smith 5

Point

Note that x (across) comes firstIn Processing: point(x, y);

lower case ‘point’

two ‘parameters’ in parenthesis

Semicolon;

Learning Processing: Slides by Don Smith 6

Line

Learning Processing: Slides by Don Smith 7

Two Points: A and B In Processing: line(x1, y1, x2, y2);

lower case ‘line’ four ‘parameters’ in parenthesis Semicolon;

Drawing a Rectangle mode 1: rectMode(CORNER);

From Corner: One Point for top left corner

In Processing: rect(x, y, width, height);

lower case ‘rect’

four ‘parameters’ in parenthesis

Semicolon;

NOTE: This is the default mode rectMode(CORNER);

Learning Processing: Slides by Don Smith 8

From Center: One point, size

In Processing:

rectMode(CENTER);

rect(x, y, width, height);

Two lines of code

Learning Processing: Slides by Don Smith 9

Drawing a Rectangle mode 2: rectMode(CORNER);

CORNERS: Top Left point, Bottom Right point

In Processing:

rectMode(CORNERS);

rect(x1, y1, x2, y2);

Two lines of code

Learning Processing: Slides by Don Smith 10

Drawing a Rectangle mode 3: rectMode(CORNERS);

Ellipse Modes: EllipseMode(CENTER), EllipseMode(CORNER), EllipseMode(CORNERS)

Same as rectangle modes:CENTER (x, y, width, height)

CORNER (x, y, width, height)

CORNERS (x1, y1, x2, y2)

Draws ellipse in a ‘Bounding box’

Circle is a ‘special case’ of an ellipse (width = height)

Learning Processing: Slides by Don Smith 11

Even more shapes and curves are possible:

More 2D primitives and Curves are possibleGoto processing.org/reference to see all the possibilities

arc() ellipse() line() point() quad() rect() triangle()

bezier() bezierDetail() bezierPoint() bezierTangent() curve() curveDetail() curvePoint() curveTangent() curveTightness()

Try more out and see what you can create

Learning Processing: Slides by Don Smith 12

Color: Grayscale

You can set the color of lines and background:0 is black (no ‘light’)

255 is white (most ‘light’)

Some examples in processing:background(255); // Sets background to white

stroke(0); // Sets outline to black

fill(150); // Sets interior of a shape to grey

rect(50,50,75,100); // Draws shape with most recent settings

Learning Processing: Slides by Don Smith 13

Grayscale Example

To fill or not to fillIf noFill() is set, shapes have only an outline

What are the ‘default’ grayscales of:Background:

Stroke:

Fill:

Learning Processing: Slides by Don Smith 14

Canvas Size Matters

You can specify the size of your ‘canvas’ at the start of a ‘script’

size(width, height);

The default size if unspecified is 100px x 100px

Type the sketch below and run it to see for yourselfprintln(width);

println(height); // this will print the canvas size to the console

Use 200 x 200 to get startedLearning Processing: Slides by Don Smith 15

Make your own Graph paper

Weblink to make your own graph paperCreate graphpaper with 12 lines per inch for a 8.5 x 11 page

Use a line weight of 0.75

Print off some pages to help you plan your work

Learning Processing: Slides by Don Smith 16

Now Get to Work!

Plan how to draw an alien!Use Black lines and White fill for now

Assume size is 200 x 200

Learning Processing: Slides by Don Smith 17

RGB Color

Color Mixing 101:Red + Green = Yellow

Red + Blue = Purple

Green + Blue = Cyan (blue-green)

Red + Green + Blue = White

no colors = Black

Learning Processing: Slides by Don Smith 18

RGB Values Each color has a value between 0 and 255

0 means NONE of that color 255 means MAX of that color

Manual Colors

Learning Processing: Slides by Don Smith 19

Use fill(),background() or stroke() with three parameters: fill(red, green, blue);

Then draw a shape!

background(255); noStroke(); fill(255,0,0); // Bright red ellipse(20,20,16,16); fill(127,0,0); // Dark red ellipse(40,20,16,16); fill(255,200,200); // Pink (pale red) ellipse(60,20,16,16);

Picking Colors

Learning Processing: Slides by Don Smith 20

Processing has a color selector to aid in choosing colors. Access this via TOOLS (from the menu bar)

→ COLOR SELECTOR.

Transparency

There is a fourth ‘parameter’ you can use:Called ‘Alpha’

0 means transparent

255 means opaque

No fourth parameter means ‘100% opacity’

Learning Processing: Slides by Don Smith 21

// 50% opacity. fill(255,0,0,127);// 25% opacity. fill(255,0,0,63); rect(0,150,200,40);

Now Get to Work!

Plan a more interesting alien!Use grayscale!

Black eyes

Gray body

Learning Processing: Slides by Don Smith 22

SummaryPixels are points on the screen

X and Y coordinates start at 0,0 for upper left

You can set the ‘canvas’ size at the start of your ‘script’

You can use basic shapesPoint, Line, Rectangle, Ellipse, even more on the website

Shapes can be drawn in different ‘modes’ CENTER, CORNER, CORNERS

Stroke, Fill and Background can be set for:Grayscale parameter can be used to control

RGB parameters (three) can set color

Transparency with fourth parameter of RGB

Learning Processing: Slides by Don Smith 23