Lesson One: The Beginning Chapter 1: Pixels Learning Processing Daniel Shiffman Presentation by Donald W. Smith Graphics from http://www.learningprocessing.com/tutorials/

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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