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

Te recomiendo que lo pruebes corriendo el modo Tweak, y juegues con las variables de SHAPE y COLOR que estan en draw() ;)

// SPEED
final int frames = 240;

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


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

void draw(){
  background(0);
  
  // TIMING
  final int fc = frameCount;
  final float t = map(fc, 0, frames, 0, 1);
  final float u = map(fc, 0, frames, 1, 0); // inverted t
  final float slowT = map(fc, 0, frames*12, 0, 1); // slower version of t
  sinT = sin(t*TWO_PI); // from -1 to 1 based on t
  sinU = sin(u*TWO_PI); // from -1 to 1 based on u
  tWave = abs( sin(t*TWO_PI) ); // from 0 to 1 to 0 based on t
  slowWave = abs( sin(slowT*TWO_PI) ); // from 0 to 1 to 0 but slower
  
  // SHAPES
  final int shapes = 12; 
  final float radius = 220; 
  final float step = TWO_PI/shapes;
  shapesSize = 40; 
  shapesGrow = 200; 
  
  // COLOR
  final int hueStart = 100; 
  final int hueSpread = 25; 
  
  pushMatrix();
  translate(width/2, height/2, -shapesSize);
    
  // DRAW SHAPES
  for(int i=0;i<shapes;i++){
    final float x = sin(i*step)*radius;
    final float y = cos(i*step)*radius;
    final float z = asin(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 int shapeColor = int(hueStart + 100*slowWave + hueSpread*radiusWave) % 100;


    // draw boxes and rotate them clockwise
    stroke(color(shapeColor,100,100));
    pushMatrix();
    rotateZ(radians(360*t));
    drawShape(t, x, y, "box");
    popMatrix();
    
    // draw spheres with different color and rotate anti-clockwise
    pushMatrix();
    stroke(color( (shapeColor + 50 ) % 100,100,100));
    rotateZ(radians(360*u));
    drawShape(u, y, x, "sphere");
    popMatrix();
  }
  
  popMatrix();
  
}

void drawShape(float t, float destX, float destY, String shape){
  float x = map(shape == "box" ? sinT : sinU, -1, 1, 0, destX);
  float y = map(shape == "box" ? sinT : sinU, -1, 1, 0, destY);
  
  pushMatrix();
  translate(x, y, 0);
  
  //Rotate in all axis and loop thans to "t" !!
  rotateX(t*TWO_PI);
  rotateY(t*TWO_PI);
  rotateZ(t*TWO_PI);
  
  if(shape == "box"){
    float shrinkOutside = (sinT * (shapesSize/2));
    float growInside = (shapesGrow * ((sinU+1)/2) ) * radiusWave;
    box( shapesSize - shrinkOutside + growInside);
  }
  if(shape == "sphere"){
    float shrinkOutside = (sinU * (shapesSize/2));
    float growInside = ( ((shapesGrow/1.5) * (abs(sinT+1)/2) ) * radiusWave );
    sphere( (shapesSize * .8) - shrinkOutside + growInside);
  }
  popMatrix();
}

Simplifique el codigo. Agregue algunas magias (?) Processing3 en la ultima version no tiene el tweak mode por alguna razon (?).

// SPEED
final int frames = 240;

// Values shared between draw and drawShape
float sinT;
float sinU;
float tWave;
float slowWave;
float radiusWave;
int shapesSize;
void setup(){
  size(500,500,P3D);
  background(0);
  noFill();
  stroke(255);
  strokeWeight(2);  
  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
  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 = 12; 
  final float radius = width*0.4; 
  final float step = TWO_PI/shapes;
  shapesSize = 40; 
  
  // COLOR 
  final float hueSpread = 0.25; 
  
  pushMatrix();
  translate(width/2, height/2, 0);
    
  // 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;

    // draw boxes and rotate them clockwise
    stroke(color(shapeColor,1,1));
    pushMatrix();
    rotateZ(t*TWO_PI);
    drawShape(t, x, y, 1);
    popMatrix();
    
    // draw spheres with different color and rotate anti-clockwise
    pushMatrix();
    stroke(color( (shapeColor + 0.5 ) % 1,1,1));
    rotateZ(u*TWO_PI);
    drawShape(u, x, y, -1);
    popMatrix();
  }
  
  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);
  
  //Rotate in all axis and loop thans to "t" !!
  rotateAll(t*TWO_PI);
  
  if(direction > 0){
    box( abs(sinT) * shapesSize );
  } else {
    sphere( abs(sinT) * shapesSize);
  }
  popMatrix();
}

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

void rotateAll(float amount){
  rotateX(amount);
  rotateY(amount);
  rotateZ(amount);
}

de repente hay 1000 shapes 🐰

// SPEED
final int frames = 400;

// Values shared between draw and drawShape
float sinT;
float sinU;
float tWave;
float slowWave;
float radiusWave;
int shapesSize;
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
  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 = 300; 
  final float radius = width*0.7; 
  final float step = TWO_PI/shapes;
  shapesSize = width/3; 
  
  // 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
    stroke(color(shapeColor,1*sinT,1));
    pushMatrix();
    rotateZ(t*PI);
    drawShape(t, x, y, 1);
    popMatrix();
    
    // draw spheres with different color and rotate anti-clockwise
    pushMatrix();
    stroke(color( (shapeColor + 0.5 ) % 1,1*sinU,1));
    rotateZ(u*PI);
    drawShape(u, x, y, -1);
    popMatrix();
  }
  
  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);
  
  //Rotate in all axis and loop thans to "t" !!
  rotateAll(t*TWO_PI);
  
  if(direction > 0){
    box( abs(sinT) * shapesSize );
  } else {
    sphere( abs(sinT) * shapesSize);
  }
  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);
}

void rotateAll(float amount){
  rotateX(amount);
  rotateY(amount);
  rotateZ(amount);
}

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