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

var nFramesInLoop = 80;

var bEnableExport = false;

var ease = new p5.Ease();

​

let c;

let circles = [];

​

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

var nElapsedFrames;

var bRecording;

var theCanvas;

​

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

function setup() {

  let width = 1280;

  let height = 720;

  theCanvas = createCanvas(width, height);

  bRecording = false;

  nElapsedFrames = 0;

  ///

​

  for (let i = 0; i <= 5; i++) {

    let x = random(0, width);

    let y = random(0, height);

    let r = random(0, 200);

    append(circles, [x, y, r]);

  }

​

}

​

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

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

    }

  }

}

​

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

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. 

  // Remember to SKETCH FIRST!

​

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

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

  background("white");

  smooth();

  stroke(0, 0, 0);

  strokeWeight(2);

​

  fill("gray");

  tiles(percent);

​

  //circle

  c5 = new Circle(width - (width / 5), height / 2.5, 100, percent);

  //c5.show();

    //6- back

  for (i = 0; i < TWO_PI; i += TWO_PI / 2) {

    let radius = height/2;

    let shift = (2 * (2 * radius) ** 2) ** 0.5

    push();

    translate(cos(i) * shift, sin(i) * shift);

    let x = new Circle(width/2, height/2 , height, percent, i);

    x.show();

​

    pop();

  }

  //1

  for (i = 0; i < TWO_PI; i += TWO_PI / 4) {

    let radius = 50;

    let shift = 0.5*((2 * (4 * radius) ** 2) ** 0.5)

    push();

    translate(cos(i) * shift, sin(i) * shift);

    let x = new Circle(width / 2, height / 2, 100, percent, i);

    x.show();

    pop();

  }

  //2

  for (i = 0; i < TWO_PI; i += TWO_PI / 4) {

    let radius = 50;

    let shift = (2 * (2 * radius) ** 2) ** 0.5

    push();

    translate(cos(i) * shift, sin(i) * shift);

    let x = new Circle(width / 2 - ((2 * (4 * radius) ** 2) ** 0.5), height/2 + ((2 * (4 * radius) ** 2) ** 0.5), 100, percent, i);

    x.show();

    pop();

  }

  //3

  for (i = 0; i < TWO_PI; i += TWO_PI / 4) {

    let radius = 50;

    let shift = (2 * (2 * radius) ** 2) ** 0.5

    push();

    translate(cos(i) * shift, sin(i) * shift);

    let x = new Circle(width / 2 + ((2 * (4 * radius) ** 2) ** 0.5), height/2 + ((2 * (4 * radius) ** 2) ** 0.5), 100, percent, i);

    x.show();

    pop();

  }

  //4

  for (i = 0; i < TWO_PI; i += TWO_PI / 4) {

    let radius = 50;

    let shift = (2 * (2 * radius) ** 2) ** 0.5

    push();

    translate(cos(i) * shift, sin(i) * shift);

    let x = new Circle(width / 2 + ((2 * (4 * radius) ** 2) ** 0.5), height/2 - ((2 * (4 * radius) ** 2) ** 0.5), 100, percent, i);

    x.show();

    pop();

  }

  //5

  for (i = 0; i < TWO_PI; i += TWO_PI / 4) {

    let radius = 50;

    let shift = (2 * (2 * radius) ** 2) ** 0.5

    push();

    translate(cos(i) * shift, sin(i) * shift);

    let x = new Circle(width / 2 - ((2 * (4 * radius) ** 2) ** 0.5), height/2 - ((2 * (4 * radius) ** 2) ** 0.5), 100, percent, i);

    x.show();

    pop();

  }

​

​

​

}

​

​

​

class Circle {

​

  constructor(cX, cY, cR, percent, pos) {

    this.cX = cX;

    this.cY = cY;

    this.cR = cR;

    this.cPercent = percent;

    this.pos = pos

  }

​

​

  show() {

    push();

    noStroke();

    fill("white");

    ellipse(this.cX, this.cY, this.cR * 2, this.cR * 2);

    pop();

    this.lines();

  }

​

  lines() {

    for (let i = ease.cubicIn(this.cPercent); i < TWO_PI + ease.cubicIn(this.cPercent); i += TWO_PI/80) {

​

​

      let myFill = lerpColor(color("lightgreen"), color("lightblue"), cos(this.cPercent * TWO_PI));

​

      stroke(myFill);

      strokeWeight(this.cR / 50);

      this.lineX = this.cX + this.cR * cos(i);

      this.lineY = this.cY + this.cR * sin(i);

      ///this.cr > 50 = spins, this.cr < 50 = nodding

​

      if (this.cR > 50) {

        this.lineY0 = this.cY + this.cR * cos(radians(ease.cubicBezierThrough2Points(this.cPercent) * 360) + this.pos);

        this.lineX0 = this.cX + this.cR * sin(radians(ease.cubicBezierThrough2Points(this.cPercent) * 360) + this.pos);

      } else {

        this.lineX0 = this.cX;

​

        //inside circle

        this.cEase = ease.quadraticIn(this.cR * .01 * cos((this.cPercent * TWO_PI) + this.pos))

​

        //outside circle

        this.cEase = ease.quadraticIn(0.5 * cos((this.cPercent * TWO_PI) + this.pos))

        this.lineY0 = (this.cY - this.cR) + this.cY * this.cEase

      }

​

      line(this.lineX0, this.lineY0, this.lineX, this.lineY);

    }

  }

}

​

function tiles(percent) {

  //tiles

​

  for (i = 0; i < 1280; i += 50) {

    for (j = 0; j < 720; j += 50) {

      //if (i % 4 == 0) {

        //push();

       // rotate(cos(TWO_PI *percent));

       // noStroke();

       // rect(i, j, 10*cos(ease.quadraticOut(percent) * TWO_PI), 10);

       // pop();

     // } else {

        push();

        noStroke();

        rect(i, j, 50, 0.05 * sin(percent * TWO_PI) * 10);

        pop();

​

    }

  }

​

}