2-D Shapes, Color, and simple animation

7 Basic Shapes

• Ellipse :: ellipse()• Arc :: arc()• Line :: line()• Point :: point()• Rectangle :: rect()• Triangle :: triangle()• Quadrilateral :: quad()

Shapes Syntax

• point(x,y);• line(x1, y1, x2, y2);• rect(x, y, width, height);• triangle(x1, y1, x2, y2, x3, y3);• quad(x1, y1, x2, y2, x3, y3, x4, y4);• ellipse(x, y, width, height);

Arc

• Syntax : arc(x, y, width, height, start, stop);

• Arcs are drawn along the outer edge of an ellipse defined by the x, y, width and height parameters. The origin or the arc's ellipse may be changed with the ellipseMode() function. The start and stop parameters specify the angles at which to draw the arc.

All colors as well…

4 functions to control color in different parts of any sketch:

• Background• Fill• Stroke• ColorMode

Background / Fill / Stroke

• Fill, Background, Stroke use identical syntax

noFill() disables filling of geometry.noStroke(); disables drawing the stroke (outline)

• background(value1, value2, value3)• background(value1, value2, value3, alpha)• background(gray)• background(gray, alpha)• background(hex)• background(hex, alpha)

ColorMode

• Use color mode to change your color parameters to mean HSB or RGB.

• colorMode(mode);• colorMode(mode, range);• colorMode(mode, range1, range2,

range3);• colorMode(mode, range1, range2, range3,

range4);

Animating :: you got to move it

Simple Animation

• Replace the parameters for placement of an object with variables and make these values change over time:ellipse(x, y, 100, 100);

• To make objects grow and shrink, replace their width and height with variables as well:ellipse(x, y, w, h);

Animating with ‘if’ statements

if (x <= 900) {    x = x + 20; }else {    x = 0;}

How about the other parameters?

Now don’t be scurred….

Functions…

Anatomy of a function

float myFunction(int x, int y) {float z = (x/5) * y;return z;}

• Name of function• Incoming arguments• Statements• Return value