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

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 2

Graph Paper Every point on the screen is a pixel It has a location: (x, y) Column = x, Row = y Note: The diagram above is NOT how processing points are numbered Learning Processing: Slides by Don Smith 3

Processing (java) Coordinate System Upper left corner is 0,0 X is ‘across’ (to right as x increases) Y is ‘down’ (down as y increases) No negative values in location coordinates 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 first In 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;

Rectangle 1 From the Point of top left corner In Processing: rect(x, y, width, height); lower case ‘ rect ’ four ‘parameters’ in parenthesis Semicolon; NOTE: This is the default mode for Rectangle (CORNER) Learning Processing: Slides by Don Smith 8

Rectangle 2 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

Rectangle 3 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

Ellipse Modes Same as rectangle modes: CENTER ellipse(x, y, width, height) This is the DEFAULT! CORNER ellipse(x, y, width, height) CORNERS ellipse(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

Size Matters You can specify the size of your ‘canvas’ at the start of a ‘script’ size(width, height); Use 200 x 200 to get started Looks similar to graph paper, right? Learning Processing: Slides by Don Smith 12

Handy Graphpaper I have provided a handy Word doc with a 100 x 100 line grid: graphpaper200x200.doc Found in the CMPSC05\Tools folder Count each line as 2, and you have 200 x 200 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

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 16 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 17 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 18 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 19 // 50% opacity. fill(255,0,0,127); // 25% opacity. fill(255,0,0,63); rect(0,150,200,40);

Now Get to Work! Plan how to draw an alien! Assume size is 200 x 200 Copy graphpaper200x200.doc and add shapes Microsoft Word: Insert tab, Shapes icon Learning Processing: Slides by Don Smith 20

Plan Your Alien Exercise Plan an interesting alien! Use graph paper Use grayscale or color! Dark eyes Medium body List each location and size May require ‘mode’ changes (ellipseMode and rectMode) List the order to draw each shape First shape is behind everything else You can use pen/pencil or Word for this exercise You will build your Alien in Processing next meeting! Learning Processing: Slides by Don Smith 21

Summary Pixels 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 shapes Point, Line, Rectangle, Ellipse 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 22