Course overview
Processing in context
Where to find help

Processing website
Shiffman's course at ITP

Environment
Open, Save
Run
Sketchbook
Exporting
Auto Format

Structure
Comments
Statements
Coordinate system (x,y dimensions)

Form
Point
Line
Rectangle
Ellipse
Curve
Color
Fill
Stroke

Data / Calculate
Variables
Data types
Arithmetic

A0: Draw a colored canvas.
A1: Draw five points.
A2: Draw five lines.
A3: Draw two rectangles and one line.
A4: Draw three ellipses.
A5: Draw three curves or beziers.
A6: Control the position of two lines with one variable.
A7: Control the properties of two shapes with two variables.
A8: Create a simple regular pattern (manually) with six lines.

Control
Relational operators ( < > <= >= == != )
While
For
Blocks

Structure / Input
Setup & Loop
Linear motion
mouseX, mouseY

Control
If
If & else
Logical operators ( && || ! )
mousePressed

Drawing
Buffering & Refreshing
no background
framerate

B0: Make a pattern using a single “for” loop.
B1: Create an intricate pattern using two nested “for” loops.
B2: Draw two visual elements that each move in relation to the mouse in a different way.
B3: Create an expressive painting program. The paint style should be different on the top and bottom regions of the canvas.
B4: Create another painting program in which the brush behaves differently depending on whether or not the mouse is pressed.

Calculate
mod, round, abs
Degrees & Radians
Sine and Cosine

Form
beginShape(), endShape() & vertex()
POINTS, LINES, LINE_STRIP, LINE_LOOP
TRIANGLES, QUADS
POLYGON

C0: Fill the canvas with a regular, repeating pattern that uses the modulo function.
C1: Create a dynamic animation using the cos() function as a generator for motion.
C2: Using beginShape() and endShape(), create a composition with five or more vertices.
C3: Create an image different from C0, but using the same data.

Structure
Functions
void, return

Transform
Object & Environment coordinates
Translate
Rotate
Scale
Push & Pop

D0: Create a pattern using rotate/scale/translate inside a for loop.
D1: Create an interactive composition using the scale{} and/or rotate() functions to express the idea of “balance.”
D2: Write a function for drawing a letter of your choice and visually demonstrate its flexiblity.

Input
Time
hour()
minute()
second()
millis()

Type
PFont
loadFont()
textFont()
text()
textAlign()
textWidth()

E0: Create an abstract composition using the clock hour, minute, and second inputs.
E1: Make another clock, this time using typography.
E2: Choose an abjective, then create a composition using that word that responds to the mouse.

Data types + conversion

Strings

Input
keyPressed(), key, keyCode

F0: Create a composition that draw letters to the screen as a user types, and a button that clears the text when the user clicks.
F1: Create a “color typewriter.”
F2: Create an expressive painting program that calls a function with the mouse position.

Arrays

Calculate
Randomness

G0: Draw a parameterized letter where the control points are stored in arrays.
G1: Using your function to draw a letter, demonstrate the variety of the letter in an animated/interactive composition.

Review

Rational Type
Computational Type examples

Yeohyun Ahn's tutorials

Final Projects: Studio

Final Projects: Studio

Final Project Presentations