2010-07-08

Processing could be described as a programming environment for artists. Look at the fascinating things that are made with it:

Albert-Laszlo Barabasi’s Bursts was sitting on my desk as I read though the O’Reilly Visualizing Data, so as a learning exercise I tried to create something similar to its cover:

I don’t know how best to generate the connected dots on the real book cover, but making this was enough to get me comfortable with using Processing.

import processing.opengl.*;

int width = 600;

// Dot
class Dot {
private color fill;
private float r, size, theta;

public Dot() {
float p = random(1);

// Position
this.r = map(p, 0, 1, 0.5, 0.9);
this.theta = random(TWO_PI);

// Appearance
this.fill = color(random(1), 0.9, 1.0, 0.8);
this.size = width * 0.022 * map(p, 0, 1, 1, 0.5) * random(0.5, 1.5);
}

public void draw(float t) {
float r = map(this.r + sin(15 * t) / 30, 0, 1, 0, width / 2);
float theta = this.theta + t * this.r * 2;

fill(this.fill);
ellipse(r * cos(theta), r * sin(theta), this.size, this.size);
}
}

// Setup
Dot[] dots; float t;
void setup() {
size(width, width, OPENGL);
colorMode(HSB, 1);
noStroke();

// Dots
dots = new Dot[2000];
for (int i = 0; i < dots.length; i++) {
dots[i] = new Dot();
}

// Text
textAlign(CENTER, CENTER);
textFont(loadFont("Sawasdee-128.vlw"), width / 9);
}

// Draw
void draw() {
background(1);
translate(width / 2, width / 2);

// Dots
for (Dot dot: dots) {
dot.draw(t);
}

// Text
fill(0);
text("BURSTS", 0, -5, 30 * sin(15 * t));

t += 0.005;
}