Programming with Processing 103

This is a part of a beginning Processing tutorial series. If you’re new to Processing, start at the beginning!

In the last set of tutorials, we looked at how to make a basic circle “bounce” around inside a processing window. In this set, we’ll introduce two new concepts that should help make this simple program more powerful and flexible: ‘PVector’, and ‘Objects’.

Vectors and Objects get a bad rap for being complicated. They get this reputation because they are often used to accomplish very complicated things, but at their root, both are extremely simple concepts, and every programmer should understand both.

First we’ll import the OpenGL library available within Processing. This will allow our sketch to run much more smoothly with graphics-heavy applications. In our case, we’ll be making a program with many–perhaps dozens–of bouncing balls. This may get too heavy to draw efficiently using processor power alone, so we’ll be relying on our graphics card to do the heavy lifting.

A ‘PVector’ (short for ‘Processing Vector’) is simply a way of accessing vector variables within processing. A vector is simply a way of storing multiple values in a single variable. For example, instead of using ‘xPosition’ and ‘yPosition’ in our program, we could just use a single vector object called ‘position’. To access the ‘x’ and ‘y’ components of the object, we simply call ‘position.x’ and ‘position.y’.

The beauty of a vector object is that there are various ‘methods’ that allow us to do math operations very quickly and efficiently. For example, instead of adding the x and y components of two vectors manually, we can simply use ‘position.add(velocity);’. This will help keep our code shorter, cleaner, and make life much easier when dealing with complex physics.

You can think of an “Object” like a little program within your larger processing sketch. In this case, we’ll be creating a ‘Ball’ class. Every ‘Ball’ object in our sketch will behave in exactly the same way, based on the same code we wrote in the last tutorial. The difference will be that we can create (or “instantiate”) as many Ball objects as we want, and they’ll each behave autonomously.

import processing.opengl.*;
ArrayList bouncyBalls;

void setup() {
size(720,400,OPENGL);
hint(ENABLE_OPENGL_4X_SMOOTH);

bouncyBalls = new ArrayList();

for(int i=0; i bouncyBalls.add(new Ball(random(0,width),random(0,height),random(0,5),random(0,5)));
}
}

void draw() {
background(255);
for(int i=0; i Ball theBall = (Ball) bouncyBalls.get(i);
theBall.update();
theBall.display();
}
}

class Ball {
PVector pos = new PVector();
PVector vel = new PVector();

Ball(float xPos, float yPos, float xVel, float yVel) {
pos.x = xPos;
pos.y = yPos;
vel.x = xVel;
vel.y = yVel;
}

void update() {
pos.add(vel);

if ( pos.y + 30 > height || pos.y – 30 vel.y *= -1;
}

if ( pos.x + 30 > width || pos.x – 30 vel.x *= -1;
}
}

void display() {
fill(0); noStroke();
ellipse(pos.x,pos.y,60,60);
}
}