airsun-AnimatedLoop

 

Overall, I am happy that this work turned out to be something similar to what I have imagined when doing the sketches. The choice of color and the overall style goes well with the theme. The idea here is about having an elevator going up and down as the eyeball of the eye. However, I do wish to spend more time on this project to increase the complexity of the gif. Currently, I feel there is something missing in the background. For more improvements, I can add more features to identify the elevator in a clearer way. For example, adding the button that controls the elevator going "up" and "down".

Brainstorm and sketch before starting the project (majority of the sketch was done in ps)

//Name: AirSun
//Sijings
//60-212
//code modified from Code Template for Looping GIFS
 
//===================================================
var myNickname = "airsun";
var nFramesInLoop = 120;
var bEnableExport = true;
var nElapsedFrames;
var bRecording;
var theCanvas;
var frames = [];
 
//===================================================
function setup() {
  theCanvas = createCanvas(640, 640);
  bRecording = false;
  nElapsedFrames = 0;
}
 
//===================================================
function keyTyped() {
  if (bEnableExport) {
    if ((key === 'f') || (key === 'F')) {
      bRecording = true;
      nElapsedFrames = 0;
    }
  }
}
 
//===================================================
function preload(){
  var filenames = [];
  filenames[0] = "https://i.imgur.com/4SUU0dP.png";
  filenames[1] = "https://i.imgur.com/ZkRe8eA.png";
  filenames[2] = "https://i.imgur.com/htCZu9X.png";
  filenames[3] = "https://i.imgur.com/oymFCPW.png";
  filenames[4] = "https://i.imgur.com/ahNh0P1.png";
  for (i=0; i<filenames.length; i++){ frames.push(loadImage(filenames[i])); } } //=================================================== function draw() { var percentCompleteFraction = 0; if (bRecording) { percentCompleteFraction = float(nElapsedFrames) / float(nFramesInLoop); } else { percentCompleteFraction = float(frameCount % nFramesInLoop) / float(nFramesInLoop); } renderMyDesign (percentCompleteFraction); 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) {
  background(216,195,131);
  smooth();
  stroke(0, 0, 0);
  strokeWeight(2);
 
  //----------------------
  // Here, I assign some handy variables. 
  var cx = 100;
  var cy = 100;
 
  //----------------------
  // Here, I use trigonometry to render a rotating element.
  var radius = 80;
  var rotatingArmAngle = percent * TWO_PI;
  var px = cx + radius * cos(rotatingArmAngle);
  var py = cy + radius * sin(rotatingArmAngle);
 
 
 
  //----------------------
  // Here's a linearly-moving square
  var squareSize = 20;
  var topY = height/3 - squareSize - 2;
  var botY = height-height/3 + 2;
  var eyeL = width/10;
  var eyeR = width-width/10;
  var eyeW = 200;
 
  strokeWeight(2);
  fill(248,242,231);
  beginShape();
  noStroke();
  //upper part of the eye
  curveVertex(eyeR, topY+(botY-topY)/2);
  curveVertex(eyeR, topY+(botY-topY)/2);
  curveVertex(eyeL+(eyeR-eyeL)*2/3, topY);
  curveVertex(eyeL+(eyeR-eyeL)/3, topY);
  curveVertex(eyeL, topY+(botY-topY)/2);
  curveVertex(eyeL, topY+(botY-topY)/2);
  //lower part of the eye
  endShape();
 
  beginShape();
  curveVertex(eyeR, topY+(botY-topY)/2);
  curveVertex(eyeR, topY+(botY-topY)/2);
  curveVertex(eyeL+(eyeR-eyeL)*2/3, botY);
  curveVertex(eyeL+(eyeR-eyeL)/3, botY);
  curveVertex(eyeL, topY+(botY-topY)/2);
  curveVertex(eyeL, topY+(botY-topY)/2);
  endShape();
 
 
 
  //other facial features
  noFill();
  stroke(90,84,68);
  strokeWeight(4);
  arc(eyeL+5, topY+(botY-topY)/2, 50, 50, 7/4*PI, 1/4*PI);
 
  beginShape();
  curveVertex(100, height);
  curveVertex(170, height);
  curveVertex(60, height/2+200);
 
  curveVertex(21, height/2);
  curveVertex(65, 91);
  curveVertex(65, 91);
  endShape();
  fill(90,84,68);
  ellipse(70, height, 80, 40);
 
 
 
  //eyeballs' drawing
  var eased = DoublePolynomialSigmoid (percent, 1); 
  if (percent < 0.5) {
  //eased = (eased + 0.5)%2; // shifted by a half-loop, for fun
    var yPosition2 = map(eased, 0, 1, topY-150, botY-100);
  //print(yPosition2, botY-200)
  }else{
    var yPosition2 = map(eased, 0, 1, botY-100, topY-150);
  }
 
  fill (165, 73, 59); 
  //ellipse (eyeL+(eyeR-eyeL)/2, yPosition2, eyeW, eyeW); 
  var currentY=eyeL+(eyeR-eyeL)/5-70;
  var currenyX=yPosition2-150;
  var numofF=0;
  if (frameCount % 5 == 0){
    numofF +=1;
  }
  var framesC = numofF % 5;
 
  image(frames[framesC], currentY, currenyX, 430, 700);
 
 
 
  push();
  fill(216,195,131);
  noStroke();
  rect(width/3, height-180, 400, 200);
  pop();
 
  noFill();
  stroke(216,195,131);
  strokeWeight(200);
  beginShape();
  //upper part of the eye
  curveVertex(eyeR, topY+(botY-topY)/2-125);
  curveVertex(eyeR, topY+(botY-topY)/2-140);
  curveVertex(eyeL+(eyeR-eyeL)*2/3, topY-105);
  curveVertex(eyeL+(eyeR-eyeL)/3, topY-105);
  curveVertex(eyeL, topY+(botY-topY)/2-140);
  curveVertex(eyeL, topY+(botY-topY)/2-125);
  //lower part of the eye
  endShape();
  strokeWeight(70);
  beginShape();
  curveVertex(eyeR, topY+(botY-topY)/2+50);
  curveVertex(eyeR, topY+(botY-topY)/2+50);
  curveVertex(eyeL+(eyeR-eyeL)*2/3, botY+40);
  curveVertex(eyeL+(eyeR-eyeL)/3, botY+40);
  curveVertex(eyeL, topY+(botY-topY)/2+50);
  curveVertex(eyeL, topY+(botY-topY)/2+50);
  endShape();
 
  //eyeLash
  var eyeLashAngel = 45;
  var centerx = width / 2;
  var centery = botY-90;
  var radius = 240;
  stroke(90,84,68);
  strokeWeight(4);
  for (i = 0; i < 10; i++){
    var x = cos(radians(eyeLashAngel)) * radius;
    var y = sin(radians(eyeLashAngel)) * radius;
    var increasement;
    if (i < 5) {
      increasement = i * 15;
    }else{
      increasement = (10 - (i+1)) * 15;}
    line(centerx + x/1.2 , centery - y/1.2, centerx + 1.2*x , centery - y - increasement);
    eyeLashAngel = eyeLashAngel+10;
  }
  centery = topY + 90;
  eyeLashAngel = 225;
  for (i = 0; i < 10; i++){
    var x = cos(radians(eyeLashAngel)) * radius;
    var y = sin(radians(eyeLashAngel)) * radius;
    var increasement;
    if (i < 5) {
      increasement = i * 15;
    }else{
      increasement = (10 - (i+1)) * 15;}
    line(centerx + x/1.2 , centery - y/1.2, centerx + 1.2*x, centery - y + increasement);
    eyeLashAngel = eyeLashAngel+10;
  }
}
 
//following code got from https://github.com/golanlevin/Pattern_Master
//------------------------------------------------------------------
function DoublePolynomialSigmoid (_x, _a){
  var n = _a;
  var _y = 0;
  if (n%2 == 0){ 
    // even polynomial
    if (_x<=0.5){
      _y = pow(2.0*_x, n)/2.0;
    } 
    else {
      _y = 1.0 - pow(2*(_x-1.0), n)/2.0;
    }
  } 
 
  else { 
    // odd polynomial
    if (_x<=0.5){
      _y = pow(2.0*_x, n)/2.0;
    } 
    else {
      _y = 1.0 + pow(2.0*(_x-1.0), n)/2.0;
    }
 
  }
 
  return (_y);
}