• KJ Ha

MFA Final

For the final, I developed one of the assignments from the ICM class. I was inspired by the class example using atan() function and wanted to implement it in the sketch to achieve a more natural movement of the components.



Links

Original sketch

https://editor.p5js.org/kh1785/sketches/QKTPYZVyP



Modified sketch using atan() function

https://editor.p5js.org/kh1785/sketches/jtUr-bljX





Atan() function usage


Movement of the eyeballs


// original sketch
  eye_l = map(width-mouseX, 0, width, 4, -4);
  // Iris 
  for(h = 25; h < height; h += sv){
    for(z = 34; z < width; z += sh){
      fill(0);
      noStroke();
      ellipse(z+eye_l, h, 19);




// modified version
function draw() {
  background(a);
  for (var i = 0; i <= 60; i++) {
    mods[i].update();
    mods[i].eyeball();
  }
}
  
Module.prototype.update = function() {
  this.angle = atan2(mouseY - this.y, mouseX - this.x);
}

Module.prototype.eyeball = function() {
  push();
  translate(this.x + 55, this.y + 40);
  rotate(this.angle);
  fill(0);
  ellipse(7, 0, 19);
  pop();
}



Previously the eyeball only moves according to the mouse's x position. It restricts eyeballs only to move from left to right. The atan() function allow changing the direction of the eyes more flawlessly.



Other Elements in the sketch


Movement of the eyeballs


strokeWeight(1);
stroke(a);

var eyet = map(height - mouseY, 0, height, this.h, 100);
  var eyeb = map(height - mouseY, 0, height, this.h, -40);

  fill(255);
  curve(this.xp, eyet, this.xp, this.h, this.yp, this.h, this.yp, eyet);
  curve(this.xp, eyeb, this.xp, this.h, this.yp, this.h, this.yp, eyeb);
  

The code to determine the movement of eyelids hasn't changed much from the original assignment. I used the map() function to map the mouse's y position in order to control the shape of curves that constitute the eyelids. As the mouse's y position reaches the bottom of the sketch, the curves will get flattened giving the illusion that the eyes are slowly closing.

background color


let a = 255;

function draw() {
  background(a);
.
.
.
}

function mousePressed() {
  if (a === 255) {
    a = 0;
  } else {
    a = 255;
  }
}
  

The color of the background is determined by the mouse click. I declared the global variable "a" and when mouse is pressed, "a" is changed to 0. And this transition in the background color will reveal the shape of the eyes as a whole.


© 2020 Kyungjoo Ha. All Rights Reserved