Procedural Motion

float angle = 0; // the angel of the circle
float speed = 0.1; // the speed of the agel changing over time
int offseth; // offset horizontal as the center of the circle
int offsetv;// offset vertical as the center of the circle
void setup() {
size(800, 800);
frameRate (30);
background(0);
smooth();
}
void draw() {
//refresh the back ground to alternate the opacity
fill(0,0,0,20);
rect(0,0,width,height);
  //loop the circles
for(int offseth = 100; offseth <= 800; offseth +=200){
for(int offsetv = 100; offsetv <= 800; offsetv +=200){
  // loop the scalar, the space between the cirles when they are spinning
   for(int scalar = 10; scalar <= 70; scalar +=3){
float x = offseth + cos(angle) * scalar;
float y = offsetv+ sin(angle) * scalar;
// the smaller set of spinning circles
float x2 = offseth +100 + cos(angle) * (scalar -10);
float y2 = offsetv+100 + sin(angle) * (scalar-10);
float mx = map(mouseX, 50, mouseY, 60, 255);
fill(150,mx-100,mx+50,150);
noStroke();
ellipse( x, y, 5,5 );
ellipse( x2, y2, 5,5 );
angle += speed/0.9;
  }
//condition to change the way the circles spin.
if(mousePressed){
angle -= speed*0.5;
}

//text "click"
fill(255, 255, 255);
textAlign(CENTER);
 textSize(32);
text("click", 400, 400);
}
}
//saveFrame("output/gol_####.

png");
}