Colaborative_02_00.pde

final int frames = 60;

void setup(){
  size(500,500,P3D);
  background(0);
  noFill();
  stroke(255);
  strokeWeight(2);
}

void draw(){
  background(0);
  final int fc = frameCount;
  //Time goes form 0 to 1 so is easy to loop !!
  final float t = map(fc, 0, frames, 0, 1) % 1;
  
  pushMatrix();
  translate(width/2, height/2, -50);
  
  final int boxes = 8;
  final float step = TWO_PI/boxes; 
  final float radius = 200;
  //Draw a perfect circle
  for(int i=0;i<boxes;i++){
    final float x = sin(i*step)*radius;
    final float y = cos(i*step)*radius;
    drawCube(t, x, y, 0);
  }
  
  
  popMatrix();
  
}

void drawCube(float t, float destX, float destY, float destZ){
  //Sin goes from -1 to 1 and loops perfectly thanks to "t"
  final float sinT = sin(t*TWO_PI);
  float x = map(sinT, -1, 1, 0, destX);
  float y = map(sinT, -1, 1, 0, destY);
  float z = map(sinT, -1, 1, 0, destZ);
  
  pushMatrix();
  translate(x, y, z);
  //Rotate in all axis and loop thans to "t" !!
  rotateX(t*TWO_PI);
  rotateY(t*TWO_PI);
  rotateZ(t*TWO_PI);
  box(50);
  popMatrix();
}

// SPEED
final int frames = 400;

// Values shared between draw and drawShape
float sinT;
float sinU;
float tWave;
float slowWave;
float radiusWave;

void setup(){
  size(500,500,P3D);
  background(0);
  noFill();
  stroke(255);
  strokeWeight(5);  
  //ortho();
  sphereDetail(4,1);
  colorMode(HSB, 1);
}

void draw(){
  trailEffect();
  
  noFill();
  noStroke();
  
  // TIMING
  final int fc = frameCount;
  final float t = map(fc, 0, frames, 0, 1);
  final float u = 1-t; // inverted t
  
  sinT = sin(t*TWO_PI); // from -1 to 1 based on t
  float sinTT = sin(4*t*TWO_PI); // from -1 to 1 based on t
  sinU = -sinT; // from -1 to 1 based on u
  tWave = abs( sin(t*TWO_PI) ); // from 0 to 1 to 0 based on t
  
  // SHAPES
  final int shapes = 60; 
  final float radius = width*0.7; 
  final float step = TWO_PI/shapes;
  
  // COLOR 
  final float hueSpread = 0.5; 
  
  pushMatrix();
  translate(width/2, height/2, 0);
  rotateZ(u*TWO_PI);
  
  strokeWeight(10*sinT);
  
  // DRAW SHAPES
  for(int i=0;i<shapes;i++){
    final float x = sin(i*step)*radius;
    final float y = cos(i*step)*radius;

    // from 0 to 1 to 0 based on position in the circle parallel to the diameter
    radiusWave = abs( (float(i*2) / shapes ) -1 );
    
    // starting color on which to appy the spreading
    final float shapeColor = (tWave + hueSpread*radiusWave) % 1;

    // draw boxes and rotate them clockwise
    fill(color(shapeColor,sinTT*0.5+0.5,1));
    drawShape(t, x, y, 1);
  }
  
  popMatrix();
  
  //Uncomment to save the frames
  //RUN: "convert -delay 2 -loop 0 *.jpg myimage.gif" to generate GIF (linux only, uses imagemagick).
  //if(t<1) saveFrame("####.jpg");
}

void drawShape(float t, float destX, float destY, int direction){
  float x = map(sinT* direction, -1, 1, 0, destX);
  float y = map(sinT* direction, -1, 1, 0, destY);
  
  pushMatrix();
  translate(x, y, 0);
  
  ellipse(0,0,5,5);
  popMatrix();
}

void trailEffect(){
  rectMode(CENTER);
  pushMatrix();
  translate(0,0,-1000);
  noStroke();
  //Let some transperency so we can "see" older frames
  fill(0,0,0, 0.03);
  rect(0, 0, Integer.MAX_VALUE, Integer.MAX_VALUE);
  popMatrix();
  rectMode(CORNER);
}