Project 02

// for my design, i tried to move the eye within the face and all the other sense organs go along with it.
// also, the eye ball move within the eye socket by itself. therefore, this people can look upwards, downwards, look to the left or to the right.
// in addition, the mouth also change the radian by itself.
// by having these, it can create a series of variation for the face.
var eyeSize = 30;
var faceWidth = 300;
var faceHeight = 200;
//variables for eyes
var eyeWidthVariation = 20;
var eyeHeightVariation = 10;
//variables for mouth
var mouthWidthShift = 10;
var mouthHeightShift = 15;
//color
var r = 243;
var g = 197;
var b = 194;
//eyeball movement
var movementX = 10;
var movementY = 10;
//eyebrow movement
var eyebrowChangeL = 5
var eyebrowChangeR = 5

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

function draw(){
    background(249, 233, 211);
    //face
    noStroke();
    fill(r, g, b);
    ellipse(width / 2, height / 2, faceWidth, faceHeight);
    
    //hair
    fill(r-20,g-20,b+30);
    rect(width/2- faceWidth/3, height/2-faceHeight/2-10,faceWidth/1.5,faceHeight/6)
    
    //noise
    noStroke();
    fill(r-50, g-50, b-50);
    ellipse(width / 2-eyeWidthVariation, height/2+2*eyeHeightVariation, 20, 30);
    
    //eyes socket
    noStroke();
    var eyeLX = width / 2 - faceWidth * 0.25 - eyeWidthVariation;
    var eyeRX = width / 2 + faceWidth * 0.25 - eyeWidthVariation;
    
    //blush left
    fill(255,171,171);
    ellipse(eyeLX, height/2+eyeHeightVariation+eyeSize/2+10,20+eyeSize*0.5,eyeSize*0.4);
    //blush right
    ellipse(eyeRX, height/2+eyeHeightVariation+eyeSize/2+10,20+eyeSize*0.5,eyeSize*0.4);
    fill(r+50, g+50, b+50);
    ellipse(eyeLX, height / 2 + eyeHeightVariation, eyeSize, eyeSize);
    ellipse(eyeRX, height / 2 + eyeHeightVariation, eyeSize, eyeSize);
    
    //eyeball
    fill(0);
    ellipse(eyeLX+movementX, height/2 +eyeHeightVariation+movementY, eyeSize / 2, eyeSize / 2);
    ellipse(eyeRX+movementX, height/2 +eyeHeightVariation+movementY, eyeSize / 2, eyeSize / 2);
    
    //eyebrow left
    fill(0)
    rect(eyeLX- eyeSize/2, height/2+ eyeHeightVariation- eyeSize/2-10-eyebrowChangeL,eyeSize,eyeHeightVariation/2);
    //eyebrow right
    rect(eyeRX- eyeSize/2, height/2+ eyeHeightVariation- eyeSize/2-10+movementY-eyebrowChangeR,eyeSize,eyeHeightVariation/2);
    
    //mouth
    noFill();
    stroke(r-35, g-35, b-35);
    strokeWeight(6);
    beginShape();
    curveVertex(width/2 - mouthWidthShift*3-eyeWidthVariation, height / 2 + faceHeight * 0.38 - mouthHeightShift*7);
    curveVertex(width/2 - mouthWidthShift*2-eyeWidthVariation, height / 2 + faceHeight * 0.38 - mouthHeightShift*1.3);
    curveVertex(width/2-eyeWidthVariation, height / 2 + faceHeight * 0.40);
    curveVertex(width/2 + mouthWidthShift*2-eyeWidthVariation, height / 2 + faceHeight * 0.38 - mouthHeightShift*1.3);
    curveVertex(width/2 + mouthWidthShift*3-eyeWidthVariation, height / 2 + faceHeight * 0.38 - mouthHeightShift*7);
    endShape();
}

function mousePressed() {
    //face random
    faceWidth = random(200, 600);
    faceHeight = random(200, 460);
    //eye random
    eyeSize = random(30, 80);
    eyeWidthVariation = random(-50, 50);
    eyeHeightVariation = random(3, 25);
    //mouth random
    mouthWidthShift = random(-20, 20);
    mouthHeightShift = random(-20, 20);
    //color random
    r = random(51, 204);
    g = random(51, 204);
    b = random(51, 204);
    //eyeball random
    movementX = random(-eyeSize/4,eyeSize/4);
    movementY = random(-eyeSize/4,eyeSize/4);
    //eyebrown random
    eyebrowChangeL = random(0,30);
    eyebrowChangeR = random(0,30)
}