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;
}