Graphics Primitives in Processing sizex y Sets the

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 • 1080 p (“Full HD”) has resolution of 1920× 1080

background(value); • background(0); • background(127); • background(255);

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

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

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

Other Drawing Functions triangle(x 1, y 1, x 2, y 2, x 3, y 3); quad(x 1, y 1, x 2, y 2, x 3, y 3, x 4, y 4); curve(x 1, y 1, x 2, y 2, x 3, y 3, x 4, y 4); arc(x, y, width, height, start, stop);

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

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

RGB Color • x, y, z is equivalent to r, g, b • Additive color model • Each parameter has a default range of 0255 representing the intensity of light

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

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

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

Other Color Functions no. Stroke(); no. Fill(); stroke. Weight(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 • Developed by engineer Pierre Bezier in the 70’s for Renault • Used in Adobe’s Post. Script model • A cubic Bézier curve has 4 points: 2 end points and 2 control points – Demo at – http: //demonstrations. wolfram. com/Bezi er. Curves/ – http: //www. math. ubc. ca/~cass/gfx/bezier. html

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) = axt 3 +bxt 2 + cxt + x 0 • y(t) = ayt 3 +byt 2 + cyt + y 0 • See the curve being mapped in the demo below http: //www. moshplant. com/direct-or/bezier. html

Curves Choices In Processing • Arcs arc(x, y, width, height, start, stop); • Spline curve(cpx 1, cpy 1, x 1, y 1, x 2, y 2, cpx 2, cpy 2); • Continuous Spline Curves begin. Shape(); curve. Vertex(40, 40); … end. Shape();

Curves Choices In Processing • Bézier Curves bezier(x 1, y 1, cpx 1, cpy 1, cpx 2, cpy 2, x 2, y 2); • Continuous Bézier Curves begin. Shape(); vertex(50, 75); // first point bezier. Vertex(25, 25, 100, 75); … end. Shape();

Homework 1 • Your assignment is to create a selfportrait.