Lately I’ve been reading a book about data visualization. The book goes into the thought process of visualizing data for humans and also talks a lot about visual coding. All code in the book is Processing code, an extremely easy and fast way to visualize.

Last night I started playing with the code and I’m amazed at how clean the code is. With Processing you only need to write stuff the gets on the screen in an elegant and clean way. I can imagine that if you want to take your animations to the next level (interaction wise) things would get a little difficult.

For example I haven’t crossed any type of event system yet. So you want to get the X position of the mouse? It’s stored in mouseX. This makes it extremely easy to use it but on the other hand it’s limited to the global vars Processing offers.

Here is the result of my playing last night (you should hover).

and here is the code.

// the arraylist that holds all the atoms
ArrayList atoms = new ArrayList();

// this function only runs on init
void setup() {
    size(584,500);
    frameRate(30);
    noStroke();

// create 250 atoms
for(int i = 0; i < 250; i++) {
    atoms.add(new Atom());  
}

}

// this function runs every frame
void draw() {
    background(100);

// loop through all atoms and update() and draw() them
for(int i = 0; i < atoms.size(); i++) {
    Atom a = (Atom)atoms.get(i);
    a.update();
    a.draw();
}

}

class Atom {
    // position
    int x, y, xV, yV;
    // filling
    int r, g, b, a;
    // size
    int size, xDiff, yDiff, diff, treshold;

// constructor of the class
Atom() {
    // create a random color
    r = random(50);
    g = random(255);
    b = random(255);

    x = random(width);
    y = random(height);

    // maximum distance from atom 
    // to mouse before bubbling
    treshold = width / 4;

    xV = random(-2, 2);
    yV = random(-2, 2);
}

// this function calcs
// and sets: x, y, a, size
void update() {

    x += xV;
    y += yV;

    // take care of borders right & bottom  
    x %= width;
    y %= height;

    // take care of borders left & top
    if(x < 0) {
        x += width;
    }
    if(y < 0) {
        y += height;
    }

    // determinse X and Y 
    // distance to mouse
    xDiff = mouseX - x;
    yDiff = mouseY - y;

    // if it's close enough
    if(
        xDiff < treshold && 
        xDiff > -treshold && 
        yDiff < treshold && 
        yDiff > -treshold
        ) {

        // determine distance to mouse
        // a2 + b2 = c2
        int diff = sqrt(sq(xDiff) + sq(yDiff));

        // make smaller diff always bigger
        if(diff < 0) {
            diff *= -1;
        }

        // make the size bigger
        size = treshold - diff + 20;
        if(size < 20) {
            size = 20;
        }

        // set alpha
        a = size * 1.5;

        if(a < 50) {
            a = 50;
        }

    } else {
        // it's not close enough
        size = 20;
        a = 50;
    }

}

void draw() {
    fill(r, g, b, a);
    ellipse(x, y, size, size);
}

You might notice some things being just simpler compared to languages like ActionScript (flash). For example:

• Random is a much simpler

  random(40); VS Math.random() * 40;
  or random(-40, 40); VS Math.random() * 40 - 40;

• drawing is much simpler

  If you want an ellipse you just call ellipse(), no need to add it to a display manager. You also just draw stuff in the order you want it, instead of needing to keep track of what items are drawn when.

• Properties are just vars

if(y < 0) {
  y += height;
}

VS

if(this.y < 0) {
 // only accessible from certain places
 this.y += stage.stageHeight;
}