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.

Date: 2016 Oct 11

Created: 2020-12-23 Wed 10:14