Here is the source code for my “About Page” Processing banner. I’ve copied the original script from the processingJS.org website and modified it to match mine …

/*
  PROCESSINGJS.COM HEADER ANIMATION
  MIT License - Hyper-Metrix.com/F1LT3R
  Native Processing compatible
*/

// Set number of circles
int count = 20;

// Set maximum and minimum circle size
int maxSize = 40;
int minSize = 10;

// Build float array to store circle properties
float[][] e = new float[count][5];

// Set size of dot in circle center
float ds=2;

// Selected mode switch
int sel = 0;

// Set drag switch to false
boolean dragging=false;

// If use drags mouse...
void mouseDragged(){
  // Set drag switch to true
  dragging=true;
}

// If user releases mouse...
void mouseReleased(){
  // ..user is no-longer dragging
  dragging=false;
}

// Set up canvas
void setup(){
  frameRate(15);
  size(712,200);
  strokeWeight(1);

  // Initiate array with random values for circles
  for(int j=0;j< count;j++){
    e[j][2]=random(minSize,maxSize); // Radius
    e[j][0]=random(e[j][2],width-e[j][2]); // X
    e[j][1]=random(e[j][2],height-e[j][2]); // Y
    e[j][3]=random(-.5,.5); // X Speed
    e[j][4]=random(-.5,.5); // Y Speed
  }
  smooth();
}
void draw(){
  background(255);

  // Begin looping through circle array
  for (int j=0;j< count;j++){
    noStroke();

    // Cache diameter and radius of current circle
    float radi=e[j][2];
    float diam=radi/2;

    // If the cursor is within 2x the radius of current circle...
    if( dist(e[j][0],e[j][1],mouseX,mouseY) < radi ){
      fill(random(0,255),random(0,255),random(0,255),100);

      // Remember user has circle "selected"
      sel=1;

      // If user has mouse down and is moving...
      if(dragging){
        e[j][0]=mouseX;
        e[j][1]=mouseY;
      }
    }
    else {
      fill(200,200,200,100);

      // User has nothing "selected"
      sel=0;
    }

    // Draw circle
    ellipse(e[j][0],e[j][1],radi*2,radi*2);

    // Move circle
    e[j][0]+=e[j][3];
    e[j][1]+=e[j][4];

    // Circles bounce back when reaching borders
    if( e[j][0] < radi ){
      e[j][3] *= -1;
    }
    if( e[j][0] > width-radi ){
      e[j][3] *= -1;
    }
    if( e[j][1] < radi ){
      e[j][4] *= -1;
    }
    if( e[j][1] > height-radi ){
      e[j][4] *= -1;
    }

    // If current circle is selected...
    if(sel==1){
      // Set fill color of center dot to white..
      fill(255,255,255,255);
      stroke(100,100,100,50);
    }
    else {
      // otherwise set center dot color to DarkGray..
      fill(100,100,100,255);
      stroke(100,100,100,50);
    }

    // Loop through all circles
    for(int k=0;k< count;k++){
      // If the circles are close...
      if( dist(e[j][0],e[j][1],e[k][0],e[k][1]) < radi*2){
        // Stroke a line from current circle to adjacent circle
        line(e[j][0],e[j][1],e[k][0],e[k][1]);
      }
    }
    noStroke();
    // Draw dot in center of circle
    rect(e[j][0]-ds,e[j][1]-ds,ds*2,ds*2);
  }
}