Graphics Primitives in Processing

size(x, y) ;

• Sets the initial size of the screen

• Units are in pixels– Pixel == picture element– Small dots on the size

• 1080p (“Full HD”) has resolution of 1920×1080

background(value);

• background(0);

• background(127);

• background(255);

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

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

Order of Function Calls

ellipse(70, 70, 110, 110);rect(80, 80, 100, 100);

rect(80, 80, 100, 100);ellipse(70, 70, 110, 110);

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

arc() Start and Stop Pointsarc(x, y, width, height, start, stop);

Grayscale: fill(value);

fill(0);

rect(80, 80, 100, 100);

fill(255);

rect(80, 80, 100, 100);

fill(0);

ellipse(70, 70, 110, 110);

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

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

Colors: stroke(value);

stroke(0);

rect(50, 20, 100, 100);

stroke(255);

fill(0);

rect(50, 20, 100, 100);

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

Other Color Functions

noStroke();

noFill();

strokeWeight(weight);

In Class Lab

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

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://www.math.ubc.ca/~cass/gfx/

bezier.html

•Developed by engineer Pierre Bezier in the 70’s for Renault

The Math Behind the Curves

• Given a Bezier curve with endpoints (x0,y0) and (x3, y3), and control points (x1, y1) and (x2, y2).

• 2 equations define points on the curve. Both are evaluated for values of 0 ≤ t ≤ 1.• x(t) = axt3 +bxt2 + cxt + x0

• y(t) = ayt3 +byt2 + cyt + y0

• See the curve being mapped in the demo below http://www.moshplant.com/direct-or/bezier/bezier.html

Curves Choices In Processing• Arcs

arc(x, y, width, height, start, stop);

• Spline curve(cpx1, cpy1, x1, y1, x2, y2, cpx2, cpy2);

• Continuous Spline CurvesbeginShape();

curveVertex(40, 40); …

endShape();

Curves Choices In Processing

• Bézier Curvesbezier(x1, y1, cpx1, cpy1, cpx2, cpy2, x2, y2);

• Continuous Bézier CurvesbeginShape();

vertex(50, 75); // first point

bezierVertex(25, 25, 125, 25, 100, 75); …

endShape();

Homework 1

• Your assignment is to create a self-portrait.