www.howardism.org
Babblings of an aging geek in love with the Absurd, his family, and his own hubris.... oh, and Lisp.

About Processing

Recommended Learning

What Good is Processing?

Good for programming

  • art
  • animation
  • music
  • robots and electronics

What is Processing?

Processing is a language layer on top:

  • Java
  • JavaScript
  • C++

Processing Example

Let’s make a picture

HTML Part

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

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

Setup

Initialize stuff in the setup function:

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

Draw

The draw function is called each second

void draw() {
  // Draw stuff here
}

Background

Change the background to blue:

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

Move the 0,0 origin from the top-left

Set Drawing Style

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);

Drawing Circles

A single color is a shade of gray:

  • 0 is black
  • 255 is white
noStroke();
fill(255);
ellipse(-17.5, -65, 35, 35);
ellipse(17.5, -65, 35, 35);

Drawing Arc

An arc is part of a circle:

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

Drawing Eyes

Add some pupils:

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

Finishing

What is it?

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

Here we drew a polygon made of four points.