// This is a template for creating a looping animation in p5.js (JavaScript). 

// 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 = "Aaron";

var nFramesInLoop = 500;

var bEnableExport = true;

​

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

var nElapsedFrames;

var bRecording;

var theCanvas;

​

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

function setup() {

  theCanvas = createCanvas(500, 500);

  bRecording = false;

  nElapsedFrames = 0;

}

​

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

function keyTyped() {

  if (bEnableExport) {

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

      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. 

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

    }

  }

}

​

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

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(146,27,33, 20);

  stroke(0, 0, 0);

  fill(146,27,33)

  strokeWeight(50);

  rect (0,0, width, height)

​

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

  // Here, I assign some handy variables. 

  let cycle1= sin(1 * percent * TWO_PI);

  let cycle2= sin(2 * percent * TWO_PI);

  let cycle3= sin(3 * percent * TWO_PI);

  let cycle4= sin(4 * percent * TWO_PI);

  let cycle5= sin(5 * percent * TWO_PI);

  let point1y= percent;

  let point2y= map(cycle1, -1, 1, 0, height);

  let point7y= map(cycle2, -1, 1, 0, height);

  let point11y= map(cycle3, -1, 1, 0, height/5);

​

  let point1p= map(cycle1, -1, 1, 0, height);

  let point7p= map(cycle2, -1, 1, 0, height);

​

  let linesP= map(cycle4, -1, 1, 10, width/2);

  let linesPreal= floor(linesP);

  let linesY= map(cycle4, -1, 1, 10, width/2);

  let linesYreal= floor(linesP);

​

​

  let purpleFor= map(cycle1, -1, 1, 0, width);

  let yellowFor= map(cycle2, -1, 1, 0, width);

  for(x=0;x<=yellowFor;x+=linesPreal){

    // for(y=0;y<=400;y+=4){

    strokeWeight (2)

    stroke (3,7,10)

    fill (238, 212, 153, 20)

    bezier(x, point2y, 0, x/2, width/4, 0, point7y, 0, 0, 0, point11y, 0);

      // line (x, height, 100/x, 0);

    // }

  }

  stroke (3,7,10)

    fill (59, 55, 99, 20)

  for (y=purpleFor; y>=0; y-=linesYreal){

  bezier(point1p, y, 0, height/2, height/5, 0, point7p, 0, 0, 0, height/4, 0);

}

​

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

  // // Include some visual feedback. 

  // fill(255, 0, 0);

  // noStroke();

  // var percentDisplayString = "" + nf(percent, 1, 3);

  // text(percentDisplayString, 5, 15);

}