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.