Skip to content

Testing Processing Export

July 13, 2011

screenshot of Processing sketch showing six "cars" driving toward a single spot

A friend and I have recently decided to start teaching ourselves Processing as an entry into some visualization work that we want to pursue. We aren’t following a formal course of study, but thankfully the Processing website has a number of tutorials and encourages people to hack away at their examples. Over many years I’ve come to realize that this is the way I learn best, by tinkering with a vague goal in mind – so I’m encouraged that the brains behind the language are encouraging people to learn that way.

In that vein, I’d like to share a simple exercise I’ve managed to put together. This is based loosely on the Cars example that Daniel Shiffman uses to introduce Object Oriented Programming (which, in itself, is something I’ve flirted with but never really made headway on).

EDIT: After some testing, it appears that it may not be possible to post the Processing applet itself on this blog. So, here’s the sketch source code.

int carCount = 6;
Car theCars[] = new Car[carCount];
int safeDistance = 25;
int intDistance;
int i;
int j;

void setup() {
  for (i = 0; i < carCount; i++) {
    theCars[i] = new Car(color((255/carCount)*i),random(width),random(height));

void draw() {
  for(i = 0; i < carCount; i++) {

class Car {
  color c;
  float xpos;
  float ypos;
  float intSpeed;
  float testXpos;
  float testYpos;
  boolean safeToMove;

  Car(color tempC, float tempXpos, float tempYpos) {
    c = tempC;
    xpos = tempXpos;
    ypos = tempYpos;
    intSpeed = random(3);

  void display(){

  void driveSimple() {
    // chase the mouse in the X axis
    if (xpos > mouseX) {
      xpos = int(xpos - intSpeed);
    } else {
      xpos = int(xpos + intSpeed);
    // chase the mouse in the Y axis
    if (ypos > mouseY) {
      ypos = int(ypos - intSpeed);
    } else {
      ypos = int(ypos + intSpeed);

  void driveSmart() {
    safeToMove = true;

    //where does the car want to move?
    if (xpos > mouseX) {
      testXpos = xpos - intSpeed;
      testXpos = xpos + intSpeed;
    if (ypos > mouseY) {
      testYpos = ypos - intSpeed;
    } else {
      testYpos = ypos + intSpeed;

    //is that too close to other cars?
    println("car "+i);
        //we only compare the car's position to other cars, not itself
        //distance is the square root of deltaX^2 plus deltaY^2
        intDistance = int( sqrt( sq(abs(theCars[j].xpos-testXpos)) + sq(abs(theCars[j].ypos-testYpos)) ) );
          safeToMove = false;
      println("car "+i+" distance to car "+j+" = "+intDistance);

    //if we still judge the step to be safe, then take it    
    if (safeToMove == true) {
      //take the step
      xpos = testXpos;
      ypos = testYpos;

In the end, I’m pretty happy with how easily I was able to move from an introductory lesson on OOP to something like a flocking demonstration. There are certainly still some bugs, such as when the cars get stuck next to each other and neither one can move. I haven’t implemented behavior limiters such as flock cohesion, or turning radius, etc. But, for the product of a few hours’ work in a language I’m just learning, this wasn’t too bad.

I think I’m ready to begin sketching out a more serious project now – either one to help visualize an ill-defined community (such as those people at Ohio State who are interested in educational technology, or fans of the Columbus Crew who are active in social media) or something from my soccer stats-freak interests.

Interested in playing along? Chris and I are interested in meeting other people around our area (central Ohio) who have a few hours a week to play and hack at Processing. Drop either of us an email, or leave a comment on one of our blogs. Most of our work so far has gone into emails back and forth with comments like “hey, check out what I was able to do!” but we are looking for a more organized way of communicating. Chris is thinking a wiki might be the answer.

(EDIT: added the screenshot at the top, and the Read More link)

No comments yet

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 )

Twitter picture

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

Facebook photo

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

Google+ photo

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

Connecting to %s

%d bloggers like this: