dechoes-AnimatedLoop

I had a really fun time with this assignment. It encompassed multiple challenges into one: the understanding of physics, coding decently, the idea generation itself and intelligent aesthetic decisions. I am quite happy with how my seamless gif turned out, however I wish the idea could have been more clever, providing the viewer with a real “oh shit” moment. I chose the Double Exponential Sigmoid function, because it mimicked the magnetic fields nicely, slow at first and quick towards the middle piece.

Preliminary Sketch:

Here is the code:

//Many thanks to Golan Levin for his help and Pattern Master, which now resides in my "Important Files" File
//And thanks to Claire, for teaching an a full grown adult how to airdrop
 
String  myNickname = "dechoes"; 
int nFrames = 360;
int     nElapsedFrames;
boolean bRecording; 
 
 
void setup() {
  size(500, 500, P3D);
  smooth(8);
  ortho();
  bRecording = false;
  nElapsedFrames = 0;
}
 
void keyPressed() {
  if ((key == 'f') || (key == 'F')) {
    bRecording = true;
    nElapsedFrames = 0;
  }
}
 
void draw() {
  background(239, 221, 208);
 
  float t01  = (frameCount%nFrames) / (float) nFrames;
 
  pushMatrix(); //Global PushMatrix
  {
 
    translate(width/2, height/2, 0); //Setting the origin at the center
    rotateZ( radians(16));
    rotateY( radians(-20));
    rotateX( radians(70));
 
    //drawAxes();
 
    stroke(239, 221, 208);
    stroke(239, 221, 208);
 
    strokeWeight(2);
 
    fill(252, 98, 55, 180);
    noFill();
    fill(255, 255, 255, 200);
    // Middle Box 
    pushMatrix(); 
 
    float r = map(sin(t01 * 40.0), -1, 1, 0, 1);  // WHY ARE YOU ACCELERATING
    float boxX =  3 * map(r, 0, 1, -1, 1);
    float boxY =  4 * map(r, 0, 1, -1, 1);
    float boxZ = 0;
 
    if (true) {
      float shiftedT01 = (t01 + 0.0005)%1.0;
      boxZ = 1.3 * map (sin(shiftedT01 * TWO_PI), -1, 1, 0, 1);
      boxZ = 400 * pow(boxZ, 9.0);
    }
 
    translate(boxX, boxY, boxZ); 
 
    box(100, 150, 100); 
    popMatrix();
 
 
    fill(137, 157, 37, 200);
    noFill();
    fill(255, 255, 255, 180);
    // Top Box 
 
    float s = map(sin(t01 * TWO_PI), -1, 1, 0, 1); 
    s = function_DoubleExponentialSigmoid (s, 0.8); 
    float bx = 130 * map(s, 0, 1, -1, 1); 
    float by = 0;
 
    //Vibrations
    float bz = 10 * pow((1-t01), 8) * sin((t01 + 2) * TWO_PI * 80);
 
    pushMatrix(); 
    translate(- 430 + bx, by, bz); 
    box(450, 150, 100); 
    popMatrix();
 
    // Bottom Box 
 
    float t = map(sin(t01 * TWO_PI), -1, 1, 0, 1); 
    t = function_DoubleExponentialSigmoid (t, 0.8); 
    float cx = 130 * map(t, 0, 1, -1, 1);
    float cy = 0;
    float cz = 10 * pow((1-t01), 8) * sin((t01 + 2) * TWO_PI * 80);
 
    pushMatrix(); 
    translate(430 - cx, cy, cz); 
    box(450, 150, 100); 
    popMatrix();
  }
  popMatrix(); // Global PopMatrix
 
  //---------------------------------------------------------------
  // If we're recording the output, save the frame to a file. 
  if (bRecording) {
    saveFrame("frames/" + myNickname + "_frame_" + nf(nElapsedFrames, 4) + ".png");
    nElapsedFrames++; 
    if (nElapsedFrames >= nFrames) {
      bRecording = false;
    }
  }
}
 
 
//------------------------------------------------------------------
 
float function_DoubleExponentialSigmoid (float x, float a) {
  //functionName = "Double-Exponential Sigmoid";
 
  float min_param_a = 0.0 + EPSILON;
  float max_param_a = 1.0 - EPSILON;
  a = constrain(a, min_param_a, max_param_a); 
  a = 1-a;
 
  float y = 0;
  if (x<=0.5) {
    y = (pow(2.0*x, 1.0/a))/2.0;
  } else {
    y = 1.0 - (pow(2.0*(1.0-x), 1.0/a))/2.0;
  }
  return y;
}
 
 
 
//------------------------------------------------------------------
 
void drawAxes() {
  strokeWeight(2);
  stroke(255, 0, 0); //RED X
  line(0, 0, 0, 300, 0, 0); 
  stroke(0, 128, 0); //GREEN Y
  line(0, 0, 0, 0, 300, 0); 
  stroke(0, 0, 255); //BLUE Z
  line(0, 0, 0, 0, 0, 300);
  noStroke();
}

Here is a prior color scheme I tried: