BrandonHyun-Project-02-Variable Face

bhyun1-project02.js

//brandonhyun
// 15-104 Section B
//bhyun1@andrew.cmu.edu
//project-02

var eyeSize = 50;
var noseSize = 50;
var faceWidth = 300;
var faceHeight = 300;
var eyebrowslength = 180;


function setup() {
    createCanvas(640, 480);
    background(220);
}

function draw() {
//ears
  strokeWeight(5);
  //left Ear
  fill(219,153,52);
  ellipse(width/2.7 ,height/4.8 ,50,50);
  //RightEar
  fill(219,153,52);
  ellipse(width/2.7 + 170 , height/4.8 ,50,50);


//Shape of a face
  stroke(0);
  fill(219,153,52);
  ellipse(width/2,height/2,faceWidth,faceHeight);

  var eyeLX = width / 2 - faceWidth * 0.2;
  var eyeRX = width / 2 + faceWidth * 0.2;

//eye
  fill(0);
  ellipse(eyeLX,height/2.3,eyeSize/3,eyeSize/3);
  ellipse(eyeRX,height/2.3,eyeSize/3,eyeSize/3);
//eyebrows
fill(0);
strokeWeight(5);
strokeCap(ROUND);
line(eyeLX-30,eyebrowslength, eyeLX+30,eyebrowslength);
line(eyeRX-30,eyebrowslength, eyeRX+30,eyebrowslength);

//nose
fill(0);
ellipse(width/2,height/2 + 10,noseSize/3,noseSize/3);
fill(255);
noStroke();
ellipse(width/2 - 10,height/2 + 20,noseSize/2,noseSize/2);
fill(255);
noStroke();
ellipse(width/2 + 10,height/2 + 20,noseSize/2,noseSize/2);
}


function mousePressed() {

  eyebrowslength = random (100,200);
  eyeSize = random(10, 100);
  noseSize = random(10,50);

}

I was interested with the Character named Ryan from Kakao Talk, which is a messaging platform in South Korea. Everyone is obsessed with this character and this character became one of the icons for the Kakao co.

When I was working I wanted to recreate the character by myself by using codes and I also wanted to have some movements when the user is clicking.

Components that moves when there is a click are the eyebrows, eyes, and the nose. By having this movement it seems like Ryan is expressing different emotions.