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.

// Drawing parameters
int width = 600;
int numberDots = 2000;
float innerDiameter = 0.5;
float outerDiameter = 0.9;
float maxDotSize = 0.022;
float minDotSize = 0.5;
float dotSizeJitter = 0.5;

// Globals
float[][] dots; float t; PFont font;

// Setup
void setup() {
size(width, width);
colorMode(HSB, 1);
smooth(); noStroke();

// Load font
font = loadFont("Sawasdee-64.vlw");
textAlign(CENTER, CENTER);

// Generate dots
dots = new float[numberDots][4]; // r, theta, size, hue
for (int i = 0; i < numberDots; i++) {
dots[i][0] = random(innerDiameter, outerDiameter);
dots[i][1] = random(TWO_PI);
dots[i][2] = map(dots[i][0], innerDiameter, outerDiameter, maxDotSize * width, maxDotSize * width * minDotSize) * (1 + random(-dotSizeJitter, dotSizeJitter));
dots[i][3] = random(1);
}
}

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

// Draw dots
float r, theta, diameter;
for (int i = 0; i < numberDots; i++) {
r = map(dots[i][0] + sin(15 * t) / 30, 0, 1, 0, width / 2);
theta = dots[i][1] + t * dots[i][0] * 2;
diameter = dots[i][2];
fill(color(dots[i][3], 0.9, 1.0, 0.8));
ellipse( r * cos(theta), r * sin(theta), diameter, diameter);
}

// Draw text
fill(0);
textFont(font, width / 9 + width / 150 * sin(15 * t));
text("BURSTS", 0, 0);

t += 0.005;
}