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