zbeok-AnimatedLoop

I used easing functions to smooth the creation and destruction of my binary tree. Specifically, the double polynomial sigmoid seemed to have the ease in and out that I needed, which I applied to the framerate to allow the animation a sort of breathing quality. I don’t like how simplistic it looks, and the design seems to have fallen short of what I had imagined. In addition, I eased out the easy way. However, given my time constraints I don’t feel too disappointed. I can only hope that next time, I do better.

Sketches:

// This is a template for creating a looping animation in p5.js. 
// When you press a key, this program will export a series of images
// into an "output" directory located in its sketch folder. 
// These can then later be combined into an animated gif. 
// Known to work with p5.js version 0.5.3
// Prof. Golan Levin, September 2016
 
//===================================================
// Global variables. 
var nFramesInLoop = 300;
var nElapsedFrames;
var bRecording;
var bIAmRunningThisOnMyLaptop = true;
 
var maxDepth=8;
var boxTime = 1/maxDepth;
var w = 600;
var ease = new p5.Ease();
 
//===================================================
function setup() {
  createCanvas(600, 600);
  bRecording = false;
  nElapsedFrames = 0;
}
 
//===================================================
function keyPressed() {
  if (bIAmRunningThisOnMyLaptop) {
    bRecording = true;
    nElapsedFrames = 0;
  }
}
 
//===================================================
function draw() {
 
  // Compute a percentage (0...1) representing where we are in the loop.
  var percentCompleteFraction = 0;
  if (bRecording) {
    percentCompleteFraction = float(nElapsedFrames) / float(nFramesInLoop);
  } else {
    percentCompleteFraction = float(frameCount % nFramesInLoop) / float(nFramesInLoop);
  }
 
  // Render the design, based on that percentage. 
  renderMyDesign(percentCompleteFraction);
 
  // If we're recording the output, save the frame to a file. 
  // Note that the output images may be 2x large if you have a Retina mac. 
  // You can compile these frames into an animated GIF using a tool like: 
  if (bRecording && bIAmRunningThisOnMyLaptop) {
    var frameOutputFilename = "mynickname-loop-" + nf(nElapsedFrames, 4) + ".png";
    console.log("Saving output image: " + frameOutputFilename);
    saveCanvas(frameOutputFilename);
    nElapsedFrames++;
    if (nElapsedFrames >= nFramesInLoop) {
      bRecording = false;
    }
  }
}
 
//===================================================
function renderMyDesign(percent) {
  // This is an example of a function that renders a temporally looping design. 
  // It takes a "percent", between 0 and 1, indicating where we are in the loop. 
  // This example uses two different graphical techniques. 
  // Use or delete whatever you prefer from this example. 
  // Remember to SKETCH FIRST!
 
  //----------------------
  // here, I set the background and some other graphical properties
  background(241,157,170);
  smooth();
  strokeWeight(2);
  stroke(188, 28, 79);
  noFill();
 
  var cx = width/2;
  var cy = 0;
 
  var p = (percent-.5)*2;
  var p = ease["doublePolynomialSigmoid"](p,2);
 
 
  var p2 = (percent)*2;
  var p2 =  ease["doublePolynomialSigmoid"](p2,2);
  // var percent = percent;
	drawDepth(width,cx,cy,p2,0,0,boxTime);
  if (percent>.5) {
    fill(241,157,170);
    noStroke();
    var rectH = (width-width*p);
  	rect(0,rectH,width,width);
  }
}
function drawDepth(boxwidth,cx,cy,percent,depth,start,end) {
  if (depth>maxDepth) return;
  var liney1 = cy;
  var liney2= 0;
  var angle = 0;
  var curTime = (percent-start);
  var neww = pow(2,depth+1);
  var timearc = (start+end)/2;
  var Langle = 0;
  var Rangle = 0;
  var circ = true;
  var baseStroke = (maxDepth-depth+1); 
  if (percent<start) return; else if (percent>end) { //next iteration
  	drawDepth(boxwidth/2,cx-(w/neww)/2,cy+(w/neww),percent,depth+1,start+boxTime,boxTime+end);
  	drawDepth(boxwidth/2,cx+(w/neww)/2,cy+(w/neww),percent,depth+1,start+boxTime,boxTime+end);
    liney2 = liney1+boxwidth/4
    Langle =PI;
    Rangle =0;
  } else if (percent>(start+end)/2) { //arc
  	liney2=liney1+boxwidth/4;
    var cstart = (start+end)/2;
    var cnow = percent-cstart;
    Langle =-PI/2-(cnow)*(PI*13/2);
    Rangle =-PI/2+(cnow)*(PI*13/2);
  } else { //lines
  	liney2=liney1+curTime*boxwidth/2/(end-start);
    circ = false;
    Langle =PI;
    Rangle =PI;
  }
  // line
 
  strokeWeight(baseStroke+10);
  stroke(255,220,166);
  if (circ) {
    arc(cx,cy+(w/neww), (w/neww), (w/neww),Langle,Rangle);
	}
  stroke(188, 28, 79);
  line(cx,liney1,cx,liney2);
  if (circ) {
  	strokeWeight(baseStroke-1);
    arc(cx,cy+(w/neww), (w/neww), (w/neww),Langle,Rangle);
  }
 
  strokeWeight(baseStroke);
  line(cx,liney1,cx,liney2);
}

.