About Processing

Recommended Learning

Good for programming

Processing is a language layer on top:

Let’s make a picture

Instead of a <div> tag, we use a <canvas> to draw on –>

<canvas id="paper">
</canvas>

Initialize stuff in the setup function:

void setup() {
  size(480, 120);    // Let's change the size of the canvas...
}

The draw function is called each second

void draw() {
  // Draw stuff here
}

Change the background to blue:

background(176, 204, 226);
translate(110, 110);

Move the 0,0 origin from the top-left

The body of the creature I’m drawing is really a single, fat, rounded line:

stroke(138, 138, 125);
strokeWeight(70);

line(0, -35, 0, -65);

A single color is a shade of gray:

noStroke();
fill(255);
ellipse(-17.5, -65, 35, 35);
ellipse(17.5, -65, 35, 35);

An arc is part of a circle:

arc(0, -65, 70, 70, 0, PI);

Add some pupils:

fill(51, 51, 30);
ellipse(-14, -65, 8, 8);
ellipse(14, -65, 8, 8);

What is it?

quad(0, -58, 4, -51, 0, -44, -4, -51);

Here we drew a polygon made of four points.