The title animation from my homepage in Processing.js

title.pde

/* @pjs transparent=false; crisp=false; */

int num_elements = 80;
Element[] elements = new Element[num_elements];
PVector origin1, origin2;
color bg;

void setup()
{
  size(720,100);
  frameRate(10);

  fill(255);
  colorMode(HSB, 255);
  rectMode(CENTER);

  for(int i=0; i<num_elements; i++) {
    elements[i] = new Element(random(0, width), random(0,height), genColor(1));
  }
  origin1 = new PVector(width/3.0, height/2.0);
  origin2 = new PVector(2*width/3.0, height/2.0);
  bg = color(0x20dfd1df);

  background(0xdfd1df);
}

void draw()
{  
  fill(bg);
  noStroke();
  rect(width/2.0, height/2.0, width, height);

  for(int i=0; i<length; i++) {
    elements[i].draw();
    elements[i].update();
  }
}


class Element {
  PVector position;
  PVector velocity;
  PVector accel;
  float a;
  color c1, c2;

  Element(float x, float y, color c) {
    position = new PVector(x, y);
    velocity = new PVector(random(-3, 3), random(-3, 3));
    accel = new PVector(0.1, 0.05);

    this.c1 = c;
    this.c2 = color(red(c), green(c), blue(c), alpha(c) * 2);
  }

  void draw() {
    fill(c1);
    stroke(c2);
    strokeWeight(1);
    rect(position.x, position.y, 100, 50);
  }

  void update() {
    // Random motion
    velocity.add(new PVector(
          random(-accel.x, accel.y), 
          random(-accel.y, accel.y)));

    // Motion towards origin
    PVector toOrigin = PVector.sub(origin1, position);
    toOrigin.limit(1 * accel.x);
    velocity.add(toOrigin);

    toOrigin = PVector.sub(origin2, position);
    toOrigin.limit(1 * accel.x);
    velocity.add(toOrigin);

    // Limit speed
    velocity.limit(100 * accel.x);

    // Update position
    position.add(velocity);
  }
}

color genColor(float opacity) {
  return color(random(100,255), random(100,255), random(100,255), opacity);
}