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

## 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

```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.