1. Graphics Primitives in Processing 1/14/2010

2. size(x, y) ; Sets the initial size of the screen Units are in pixels –Pixel == picture element –Small dots on the size 1080p has resolution of 1920×1080

3. background(value); background(0); background(127); background(255);

4. rect(x, y, width, height); rect(50, 20, 100, 100); x and y are the upper left corner rect(10, 10, 50, 50); rect(80, 70, 60, 110);

5. ellipse(x, y, width, height); ellipse(90, 90, 100, 100); x and y are the center ellipse(90, 90, 160, 160); ellipse(110, 120, 70, 30);

6. Order of Function Calls ellipse(70, 70, 110, 110); rect(80, 80, 100, 100); ellipse(70, 70, 110, 110);

7. Other Drawing Functions triangle(x1, y1, x2, y2, x3, y3); quad(x1, y1, x2, y2, x3, y3, x4, y4); curve(x1, y1, x2, y2, x3, y3, x4, y4); arc(x, y, width, height, start, stop);

8. arc() Start and Stop Points

9. Grayscale: fill(value); fill(0); rect(80, 80, 100, 100); fill(255); rect(80, 80, 100, 100); fill(0); ellipse(70, 70, 110, 110);

10. RGB Color x,y,z is equivalent to r,g,b Additive color model Each parameter has a default range of 0- 255 representing the intensity of light

11. Color: fill(value); size(300,300); background(255); fill(0, 255, 0); rect(25, 25, 100, 100); fill(0, 0, 225); rect(100, 100, 100, 100); fill(255, 0, 0); ellipse(225, 225, 110, 110);

12. Colors: stroke(value); stroke(0); rect(50, 20, 100, 100); stroke(255); fill(0); rect(50, 20, 100, 100);

13. Transparency fill(255); rect(80, 80, 100, 100); fill(0, 100); ellipse(70, 70, 110, 110); fill(255); rect(80, 80, 100, 100); fill(0, 10); ellipse(70, 70, 110, 110);

14. Other Color Functions noStroke(); noFill(); strokeWeight(weight);

15. In Class Lab Lab 2: Draw three ellipses. Draw three bezier curves. Draw three rectangles. Create a composition using at least one of each of the following shapes: rectangle, ellipse, and curves.

16. Bézier Curves Used in Adobe’s PostScript model A cubic Bézier curve has 4 points: 2 end points and 2 control points –Demo at –http://demonstrations.wolfram.com/BezierCurves/http://demonstrations.wolfram.com/BezierCurves/ –http://www.idi.ntnu.no/~mlh/codebase/grafisk2/http://www.idi.ntnu.no/~mlh/codebase/grafisk2/ –Jason ThielkeJason Thielke Developed by engineer Pierre Bezier in the 70’s for Renault

17. The Math Behind the Curves Given a Bezier curve with endpoints (x 0,y 0 ) and (x 3, y 3 ), and control points (x 1, y 1 ) and (x 2, y 2 ). 2 equations define points on the curve. Both are evaluated for values of 0 ≤ t ≤ 1. x(t) = a x t 3 +b x t 2 + c x t + x 0 y(t) = a y t 3 +b y t 2 + c y t + y 0 See the curve being mapped in the demo below http://www.moshplant.com/direct-or/bezier/bezier.html http://www.moshplant.com/direct-or/bezier/bezier.html

18. Homework 1 Your assignment is posted in Moodle. If you need help with Illustrator’s Bezier Curves implemented with the Pen Tool the Illustrator Help page for the Pen Tool will be helpful. Illustrator Help page for the Pen Tool Remember that the terminology is different for Adobe’s Bezier curves: ie –Control Points are called Direction Points –End Points are called Anchor Points