// When you press the 'F' key, this program will export a series of images into

// your default Downloads folder. These can then be made into an animated gif. 

// This code is known to work with p5.js version 0.6.0

// Prof. Golan Levin, 28 January 2018

​

// INSTRUCTIONS FOR EXPORTING FRAMES (from which to make a GIF): 

// 1. Run a local server, using instructions from here:

//    https://github.com/processing/p5.js/wiki/Local-server

// 2. Set the bEnableExport variable to true.

// 3. Set the myNickname variable to your name.

// 4. Run the program from Chrome, press 'f'. 

//    Look in your 'Downloads' folder for the generated frames.

// 5. Note: Retina screens may export frames at twice the resolution.

​

​

//===================================================

// User-modifiable global variables. 

var myNickname = "nickname";

var nFramesInLoop = 120;

var bEnableExport = false;

var easing = new p5.Ease();

var styles = e.listAlgos();

​

​

​

// Other global variables you don't need to touch.

var nElapsedFrames;

var bRecording;

var theCanvas;

​

//===================================================

function setup() {

  theCanvas = createCanvas(1280, 760);

  bRecording = false;

  nElapsedFrames = 0;

}

​

//===================================================

function keyTyped() {

  if (bEnableExport) {

    if ((key === 'f') || (key === 'F')) {

      bRecording = true;

      frameRate(2); // while we're exporting

      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. 

  // This function renderMyDesign() is the one for you to change. 

  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 && bEnableExport) {

    var frameOutputFilename = myNickname + "_frame_" + nf(nElapsedFrames, 4) + ".png";

    print("Saving output image: " + frameOutputFilename);

    saveCanvas(theCanvas, frameOutputFilename, 'png');

    nElapsedFrames++;

​

    if (nElapsedFrames >= nFramesInLoop) {

      bRecording = false;

      frameRate(60);

    }

  }

}

​

//===================================================

function renderMyDesign(percent) {

  //

  // THIS IS WHERE YOUR ART GOES. 

  // 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. 

  // Use, modify, or delete whatever you prefer from this example. 

  // This example uses several different graphical techniques. 

  // Remember to SKETCH FIRST!

​

  //----------------------

  // here, I set the background and some other graphical properties

  background("black");

  smooth();

  stroke(0, 0, 0);

  strokeWeight(2);

​

  //----------------------

  // Here, I assign some handy variables. 

  var cx = 100;

  var cy = 100;

  var squareSize = 20;

  var topY = 0 - squareSize - 2;

  var botY = height + 2;

  var sPercent = (percent + 0.5) % 1.0; // shifted by a half-loop

  var yPosition = map(sPercent, 0, 1, topY, botY);

​

  var eased = doubleExponentialSigmoid(percent, 0.6);

  eased = (eased + 0.5) % 1.0; // shifted by a half-loop, for fun

  var yPosition2 = map(eased, 0, 1, topY, botY);

  var eased2 = elasticInOut(percent);

  eased2 = (eased2 + 0.4)%1.0;

  var yPosition3 = map(eased2, 0, 1, topY, botY);

  var eased3 = bounceOut(percent);

  eased3 = (eased3 + 0.3)%1.0;

  var yPosition4 = map(eased3, 0, 1, topY, botY);

  var eased4 = sineOut(percent);

  eased4 = (eased4 + 0.2)%1.0;

  var yPosition5 = map(eased4, 0, 1, topY, botY);

​

  var eased5 = (eased3 + 0.3)%1.0;

  var yPosition6 = map(eased5, 0, 1, topY, botY);

  var eased6 = doubleExponentialSigmoid(percent, 0.3);

  eased6 = (eased6 + 0.8)%1.0;

  var yPosition7 = map(eased6, 0, 1, topY, botY);

  var eased7 = elasticInOut(percent);

  eased7 = (eased7 + 0.1)%1.0;

  var yPosition8 = map(eased7, 0, 1, topY, botY);

  var eased8 = elasticInOut(percent);

  eased8 = (eased8 + 0.9)%1.0;

  var yPosition9 = map(eased8, 0, 1, topY, botY);

​

  //------------

  //creating the plane of squares

  for(var x = 0; x<width; x+=100){

    for(var y = 0; y<height; y+=100){

      var angleA = doubleExponentialSigmoid(percent, 0.9)*PI;

      rotate(angleA);

      stroke("white");

      noFill();

      rect(x, yPosition2, 50, 50);

      rect(x, yPosition2, 40, 40);

      rect(x+10, yPosition, 30, 30);

      rect(x, yPosition, 10, 10);

      rect(x+30, yPosition3, 20, 20);

      rect(x+35, yPosition3-5, 20, 20);

      rect(x +50, yPosition4, 40, 40);

      rect(x + 60, yPosition4, 30, 30);

      rect(x, yPosition5, 10, 10);

      rect(x+5, yPosition6, 20, 20);

      rect(x+10, yPosition6+5, 10, 10)

      rect(x+20, yPosition7, 40, 40);

      rect(x+30, yPosition7, 10, 10);

      rect(x + 70, yPosition8, 60, 60);

      rect(x + 80, yPosition8+20, 30, 30);

      rect(x + 90, yPosition8+30, 10, 10);

      rect(x + 80, yPosition9, 20, 20);

      rect(x+10, yPosition9, 30, 30);

    }

  }

​

}

​

​

// Symmetric double-element sigmoid function ('_a' is the slope)

// See https://github.com/IDMNYU/p5.js-func/blob/master/lib/p5.func.js

// From: https://idmnyu.github.io/p5.js-func/

//===================================================

function doubleExponentialSigmoid(_x, _a) {

  if (!_a) _a = 0.75; // default

​

  var min_param_a = 0.0 + Number.EPSILON;

  var max_param_a = 1.0 - Number.EPSILON;

  _a = constrain(_a, min_param_a, max_param_a);

  _a = 1 - _a;

​

  var _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);

}

​

function elasticInOut (_x) {

    if(_x < 0.5)

    {

        return(0.5 * sin(13 * HALF_PI * (2 * _x)) * pow(2, 10 * ((2 * _x) - 1)));

    }

    else

    {

        return(0.5 * (sin(-13 * HALF_PI * ((2 * _x - 1) + 1)) * pow(2, -10 * (2 * _x - 1)) + 2));

    }

  }

​

  // penner's four-part bounce algorithm

function bounceOut (_x) {

    if(_x < 4/11.0)

    {

        return((121 * _x * _x)/16.0);

    }

    else if(_x < 8/11.0)

    {

        return((363/40.0 * _x * _x) - (99/10.0 * _x) + 17/5.0);

    }

    else if(_x < 9/10.0)

    {

        return((4356/361.0 * _x * _x) - (35442/1805.0 * _x) + 16061/1805.0);

    }

    else

    {

        return((54/5.0 * _x * _x) - (513/25.0 * _x) + 268/25.0);

    }

  }

​

function quadraticOut(_x) {

    return(-(_x * (_x - 2)));

  }

​

function sineOut (_x) {

    return(sin(_x * HALF_PI));

  }

​