const X_AXIS = 2;

​

let myFont;

​

function preload() {

  myFont = loadFont('assets/font.ttf');

}

​

function pole() {

  fill(color("white"));

  rect(40, 200, 30, 460);

  rect(35, 200, 40, 75);

  rect(20, 200, 75, 10);

  rect(20, 220, 75, 5);

  rect(20, 240, 75, 5);

  rect(30, 260, 50, 5);

​

}

​

function createMountain(percent) {

​

  beginShape();

  fill(color("blue")); // mountain

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

    noiseSeed(9);

    var t = x * 0.01;

    var y = noise(t) * height;

    var k = map(y, 0, height, 266, 450);

    vertex(x, k);

  }

  vertex(width, height);

  vertex(0, height);

  endShape(CLOSE);

​

​

  beginShape();

  noiseSeed(2);

  fill(color("black")); // mountain

  var t1 = 0;

  var y1 = 0;

  var k1 = 0;

  for (var x1 = -50; x1 < width; x1++) {

    t1 = x1 * 0.01;

    y1 = noise(t1) * height;

    k1 = map(y1, 0, height, 200, 350);

    vertex(x1, k1);

  }

  vertex(width, height);

  vertex(0, height);

  endShape(CLOSE);

​

​

  blendMode(BLEND);

​

  beginShape();

  noiseSeed(7);

  noStroke();

  fill(252, 246, 240); // mountain

  var t12 = 0;

  var y12 = 0;

  var k12 = 0;

  for (var x12 = 0; x12 < width; x12++) {

    t12 = x12 * 0.03;

    y12 = noise(t12) * height;

    k12 = map(y12, 0, height, 466, 550);

    vertex(x12, k12);

  }

  vertex(width, height);

  vertex(0, height);

  endShape(CLOSE);

​

}

​

function eye(offset, percent) {

  fill(percent / 1000, (percent / 100), 255, 255);

  noStroke();

  push();

​

  blendMode(EXCLUSION);

  fill(0, 255, 15);

  ellipse(0, 0, 215 + 5, 210);

  ellipse(0, 10, 200, 100 + 10 * sin(percent * TWO_PI));

  ellipse(0, 20, 200, 100 + 10 * sin(percent * TWO_PI));

  blendMode(BLEND);

  pop();

  noFill();

  stroke(color("orange"));

  strokeWeight(15);

  //ellipse(0, 0, 300, 300);

  noStroke();

  blendMode(ADD);

  fill(50, 50, 227);

  //fill(color("RED"));

​

  circle(sin((percent * TWO_PI * 3)) * 20, sin((percent * TWO_PI)) * 10 + 20, 50);

​

​

}

​

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

var nFramesInLoop = 240;

var bEnableExport = false;

​

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

var nElapsedFrames;

var bRecording;

var theCanvas;

​

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

function setup() {

  theCanvas = createCanvas(1280, 720);

  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 setGradient(x, y, w, h, c1, c2, axis) {

  noFill();

​

  if (axis === Y_AXIS) {

    // Top to bottom gradient

    for (let i = y; i <= y + h; i++) {

      let inter = map(i, y, y + h, 0, 1);

      let c = lerpColor(c1, c2, inter);

      stroke(c);

      line(x, i, x + w, i);

    }

  } else if (axis === X_AXIS) {

    // Left to right gradient

    for (let i = x; i <= x + w; i++) {

      let inter = map(i, x, x + w, 0, 1);

      let c = lerpColor(c1, c2, inter);

      stroke(c);

      line(i, y, i, y + h);

    }

  }

}

​

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

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!

​

  background(color("white"));

​

  fill(color("ORANGE"));

  noStroke();

​

​

  fill(color("red"));

  noStroke();

  ellipse(400, 100, 500);

​

​

​

​

  let c1 = color("orange");

  let c2 = color(200 + (30 * sin(percent * TWO_PI)), 205 + (50 * sin(percent * TWO_PI)), 20);

​

  setGradient(0, 0, 1280, 720, c1, c2, Y_AXIS);

​

  push();

    fill(color("blue"));

    stroke(color("blue"));

    textFont(myFont);

    textStyle(ITALIC);

    textSize(120);

    textAlign(LEFT);

​

    blendMode(ADD);

    createMountain(percent);

    blendMode(ADD);

    fill(color("blue"));

    //text('monocuca', 10, 55);

    blendMode(BLEND);

    noStroke();

    fill(color("ORANGE"));

​

​

    push();

      translate(370, 160);

      scale(0.8);

​

      push();

      translate(30 * cos(percent * TWO_PI), 50 * sin(percent * TWO_PI));

      eye(0, percent);

    pop();

  pop();

  fill(255);

  rect(0, 600, width, 120);

  push();

    noStroke();

    translate(-(1160) + 100 * doubleExponentialSigmoid(sin(percent * TWO_PI)), 0);

    pole();

    noFill();

    strokeWeight(2);

    stroke(255);

    arc(350, 210, 580, 50, 0, PI, OPEN)

    arc(350, 230, 580, 50, 0, PI, OPEN)

  pop();

​

​

  push();

    noStroke();

    translate(-(580) + 100 * doubleExponentialSigmoid(sin(percent * TWO_PI)), 0);

    pole();

    noFill();

    strokeWeight(2);

    stroke(255);

    arc(350, 210, 580, 50, 0, PI, OPEN)

    arc(350, 230, 580, 50, 0, PI, OPEN)

  pop();

  push();

    noStroke();

    translate(100 * doubleExponentialSigmoid(sin(percent * TWO_PI)), 0);

    pole();

    noFill();

    strokeWeight(2);

    stroke(255);

    arc(350, 210, 580, 50, 0, PI, OPEN)

    arc(350, 230, 580, 50, 0, PI, OPEN)

  pop();

​

  push();

    noStroke();

    translate(580 + 100 * doubleExponentialSigmoid(sin(percent * TWO_PI)), 0);

    pole();

    noFill();

    strokeWeight(2);

    stroke(255);

    arc(350, 210, 580, 50, 0, PI, OPEN)

    arc(350, 230, 580, 50, 0, PI, OPEN)

  pop();

​

  push();

    noStroke();

    translate(1160 + 100 * doubleExponentialSigmoid(sin(percent * TWO_PI)), 0);

    pole();

    noFill();

    strokeWeight(2);

    stroke(255);

    arc(350, 210, 580, 50, 0, PI, OPEN)

    arc(350, 230, 580, 50, 0, PI, OPEN)

  pop();

}

​

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

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

}