Lesson One: The Beginning

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

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 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. 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. 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: • 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 // 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 • 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