Introduction to Processing

A couple of simple sketches from the book, Processing: A Programming Handbook for Visual Designers and Artists by Casey Reas and Ben Fry, MIT Press.

In this first sketch setup() initializes or sets some important variables. size(480, 120) sets the width and height of the output window. smooth() turns on anti-aliasing, which removes the “jaggies” from curves and edges.

draw() draws to the output window. It loops frame by frame. Each frame it checks the mouse button. If “mousePressed” is “true” then the fill color is set black, fill(0). Else “mousePressed” is “false” and the fill color is set white, fill(255). Having set the fill color, black or white, draw an ellipse centered on the mouse position, ellipse(mouseX, mouseY, 80, 80). This is a circle because width = height.

// Processing demo, sketch 1

void setup() {
  size(480, 120);

void draw() {
  if (mousePressed) {
  } else {
  ellipse(mouseX, mouseY, 80, 80);

The second sketch draws a series of 5 lines to the output window. There’s no setup() or draw(), simply a list of commands. This is the “brute force method” of programming. It assumes a number of defaults, for example the size of the output window 100 x 100. Lines are drawn with a “pen.” stroke(255) sets the pen color, in this case white. strokeWeight(5) sets the pen width in pixels. We know what smooth() does.

The output window is measured in pixels (picture elements), 100 pixels wide and 100 pixels high. The upper left corner is 0, 0 and the lower right corner is 99, 99. In the first sketch (above) the mouse position is available as mouseX and mouseY. mouseX being the horizontal position measured from left to right and mouseY being the vertical position measured from top to bottom of the output window. Lines are drawn from start point to end point, line(xs, ys, xe, ye). Each point has an x or horizontal location and a y or vertical location.

// Processing demo, sketch 2


line(10, 80, 30, 40);
line(20, 80, 40, 40);
line(30, 80, 50, 40);
line(40, 80, 60, 40);
line(50, 80, 70, 40);

The third sketch, same as the last sketch. However this time the lines are specified in relation to a single x, y point. I start by defining 2 integer variables x and y and setting them equal to 5 and 60. This is the starting point for the group of 5 lines.

Line 1 from   5, 60 to 25, 20;
Line 2 from 15, 60 to 35, 20
Line 3 from 25, 60 to 45, 20
Line 4 from 35, 60 to 55, 20
Line 5 from 45, 60 to 65, 20

So what can we do with this? The first thing to try is changing the values assigned to x and y. Changing x moves the whole group left or right. Changing y moves the group up and down. What if we “programmed” x to change frame by frame? Then the whole group of lines would move automatically across the screen …

// Processing demo, sketch 3

int x =   5;
int y = 60;

line(x,         y, x + 20, y – 40);
line(x + 10, y, x + 30, y – 40);
line(x + 20, y, x + 40, y – 40);
line(x + 30, y, x + 50, y – 40);
line(x + 40, y, x + 60, y – 40);


Tags: ,

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: