1. Lesson One: The Beginning
Chapter 1: Pixels
Learning Processing
Daniel Shiffman
Presentation by Donald W. Smith
Graphics from

2. Lesson One: The Beginning
1: Pixels
Specifying pixel coordinates
Basic shapes: point, line, rectangle, ellipse
Color: grayscale, “RGB”
Color Transparency
2: Processing
3: Interaction
Learning Processing: Slides by Don Smith

3. Graph Paper Every point on the screen is a pixel
It has a location: (x, y)
Learning Processing: Slides by Don Smith

4. Coordinate System Upper left corner is 0,0
NOT the same as your Algebra coordinate system!
Upper left corner is 0,0
X is ‘across’ (to right as x increases)
Y is ‘down’ (down as y increases)
Learning Processing: Slides by Don Smith

5. 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

6. Point Note that x (across) comes first In Processing: point(x, y);
lower case ‘point’
two ‘parameters’ in parenthesis
Semicolon;
Learning Processing: Slides by Don Smith

7. Line Two Points: A and B In Processing: line(x1, y1, x2, y2);
lower case ‘line’
four ‘parameters’ in parenthesis
Semicolon;
Learning Processing: Slides by Don Smith

8. 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

9. Drawing a Rectangle mode 2: rectMode(CORNER);
From Center: One point, size
In Processing:
rectMode(CENTER);
rect(x, y, width, height);
Two lines of code
Learning Processing: Slides by Don Smith

10. Drawing a Rectangle mode 3: rectMode(CORNERS);
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

11. Same as rectangle modes:
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

12. Even more shapes and curves are possible:
More 2D primitives and Curves are possible
Goto 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

13. 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

14. Grayscale Example To fill or not to fill
If noFill() is set, shapes have only an outline
What are the ‘default’ grayscales of:
Background:
Stroke:
Fill:
Learning Processing: Slides by Don Smith

15. You can specify the size of your ‘canvas’ at the start of a ‘script’
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 yourself
println(width);
println(height); // this will print the canvas size to the console
Use 200 x 200 to get started
Learning Processing: Slides by Don Smith

16. Make your own Graph paper
Weblink to make your own graph paper
Create 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

17. 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

18. RGB Color Color Mixing 101: RGB Values Red + Green = Yellow
Red + Blue = Purple
Green + Blue = Cyan (blue-green)
Red + Green + Blue = White
no colors = Black
RGB Values
Each color has a value between 0 and 255
0 means NONE of that color
255 means MAX of that color
Learning Processing: Slides by Don Smith

19. Manual Colors
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);
Use fill(),background() or stroke() with three parameters:
fill(red, green, blue);
Then draw a shape!
Learning Processing: Slides by Don Smith

20. Picking Colors
Processing has a color selector to aid in choosing colors.
Access this via TOOLS (from the menu bar) → COLOR SELECTOR.
Learning Processing: Slides by Don Smith

21. Transparency There is a fourth ‘parameter’ you can use: Called ‘Alpha’
// 50% opacity. fill(255,0,0,127);
// 25% opacity. fill(255,0,0,63); rect(0,150,200,40);
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

22. Now Get to Work! Plan a more interesting alien! Use grayscale!
Black eyes
Gray body
Learning Processing: Slides by Don Smith

23. Summary Pixels are points on the screen You can use basic shapes
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 shapes
Point, 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