Presentation is loading. Please wait.

Presentation is loading. Please wait.

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

Similar presentations


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

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 2

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

4 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 4 NOT the same as your Algebra coordinate system!

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 5

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 6

7 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;

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 8

9 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);

10 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);

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 11

12 Even more shapes and curves are possible: More 2D primitives and Curves are possible Goto processing.org/reference to see all the possibilities processing.org/reference arc()arc() ellipse() line() point() quad() rect() triangle()ellipse()line()point()quad()rect()triangle() bezier()bezier() bezierDetail() bezierPoint() bezierTangent() curve() curveDetail() curvePoint() curveTangent() curveTightness()bezierDetail()bezierPoint()bezierTangent()curve() curveDetail()curvePoint()curveTangent()curveTightness() Try more out and see what you can create Learning Processing: Slides by Don Smith 12

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 13

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 14

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 15

16 Make your own Graph paper WeblinkWeblink 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 16

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 17

18 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

19 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);

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

21 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);

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

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 23


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

Similar presentations


Ads by Google