Month: September 2022

// Michael
// Section C

//Variables
//face
var faceWidth = 100;
var faceHeight = 100;
var faceround = 10
var randomSkin = 0
//background
var r = 140
var g = 200
var b = 230
//eye
var eyeBrow = 1
var browHeight = 10
var eyeSize = 20;
var pupilPos = 0
//moith
var mouthType = 1
var mouthLevel = 50
var noseType = 1
//hair
hairType = 1
stubble = 2
hairColor = 0

function setup() {
    createCanvas(300, 300);
}
 
function draw() {
    print (pupilPos.toString())
    //background color
    background(r, g, b);

    //Eye Variables
    //use facewidth to determine the eye positions
    var eyeLX = width / 2 - faceWidth * 0.2; 
    var eyeRX = width / 2 + faceWidth * 0.2;

    //hair color
    //Randomize hair color with different shades of grey
    fill(hairColor)

    //hair back
    //Two different thicknesses of hair
    //Use FaceWidth and faceHeight to determine the hair thickness
    if(hairType == 1){  //Thick Hair
        ellipse(width / 2, 1.15*height / 3, faceWidth*1.2,  faceHeight*1.2);
        fill (r, g, b);
        rect(0, height/(faceHeight/60), width, height)
    } else if (hairType == 2) //Thin hair
        ellipse(width / 2, 1.15*height / 3, faceWidth*1.1,  faceHeight*1.1);
        fill (r, g, b);
        rect(0, height/(faceHeight/53), width, height)

    //skincolor
    //4 different skin types
    //predetermined skin colors
    if (randomSkin == 0){
        fill (255, 204, 153);
    } else if (randomSkin == 1){
        fill (226, 183, 132)
    } else if (randomSkin == 2){
        fill (191, 130, 70)
    } else {
        fill (192, 134, 79)
    }   
    
    //ears

    ellipse(width/2 - faceWidth/2.4, 1.3*height / 3, faceHeight/3, faceHeight/3)
    ellipse(width/2 + faceWidth/2.4, 1.3*height / 3, faceHeight/3, faceHeight/3)
    fill(95, 44, 5)
    ellipse(width/2 - faceWidth/2.2, 1.3*height / 3, faceHeight/10, faceHeight/4)
    ellipse(width/2 + faceWidth/2.2, 1.3*height / 3, faceHeight/10, faceHeight/4)
  
    //Skin Color 
    //Randomize skin color 
    //Fill the skin colors again due to the fill command in the ears
    if (randomSkin == 0){
        fill (255, 204, 153);
    } else if (randomSkin == 1){
        fill (226, 183, 132)
    } else if (randomSkin == 2){
        fill (191, 130, 70)
    } else {
        fill (192, 134, 79)
    }  

    //neck
    //use facewidth to determin neck width
    rect(eyeLX - faceWidth/18, height/2, faceWidth/2, 70)

    //Face
    //Use to ellipses to draw the face
    strokeWeight(0)
    ellipse(width / 2, 1.15*height / 3, faceWidth,  faceHeight);
    ellipse(width / 2, 1.45*height / 3, faceWidth/1.25, faceHeight/1.25)
    fill(hairColor+30)

    //eyes
    //Use the eye positions variable to draw the eyes and the pupils
    fill(255)
    ellipse(eyeLX, 1.25*height / 3, eyeSize*1.3, eyeSize*1.3);
    ellipse(eyeRX, 1.25* height / 3, eyeSize*1.3, eyeSize*1.3);
    fill(0);
    //Use pupilPos to randomize the pupil position whenever mouse clicks
    ellipse(eyeLX + eyeSize/4 - eyeSize*pupilPos, 1.25*height / 3, eyeSize/2, eyeSize/2);
    ellipse(eyeRX + eyeSize/4 - eyeSize*pupilPos, 1.25*height / 3, eyeSize/2, eyeSize/2);
    

    //eyebrows
    //two different eyebrows, straight and curve
    if (eyeBrow == 1){ //Curve
        strokeWeight(5) //use eyesize to determin eyebrow position
        curve (eyeLX - eyeSize/3, height/2 - eyeSize/1.5,
               eyeLX - eyeSize/3, 1.4*height/3.2 - eyeSize/1.5 - browHeight, //browHeight to randomize brow when click
               eyeLX + eyeSize/3, 1.4*height/3.2 - eyeSize/1.5 - browHeight,
               eyeLX + eyeSize/3, height/2 - eyeSize/1.5)
        curve (eyeRX - eyeSize/3, height/2 - eyeSize/1.5,
               eyeRX - eyeSize/3, 1.4*height/3.2 - eyeSize/1.5 - browHeight, 
               eyeRX + eyeSize/3, 1.4*height/3.2 - eyeSize/1.5 - browHeight,
               eyeRX + eyeSize/3, height/2 - eyeSize/1.5)
        strokeWeight(0);
    } if  (eyeBrow == 2){ //straight
        rect (eyeLX-eyeSize/1.5 , 1.27*height / 3 - eyeSize/1.5 - browHeight, eyeSize*1.2, eyeSize/4)
        rect (eyeRX-eyeSize/1.8 , 1.27*height / 3 - eyeSize/1.5 - browHeight, eyeSize*1.2, eyeSize/4)
    }

    //mouth
    //5 different types of mouths
    //use faceHeight and width to determine mouth position
    if (mouthType <= 2){ // Open Mouth
        fill(255, 166, 193)
        ellipse(width/2, height/2 + faceHeight/mouthLevel, faceWidth/3, faceHeight/10)
        fill(255)
        ellipse(width/2, height/2.06 + faceHeight/mouthLevel, faceWidth/6, faceHeight/20)
    } else if (mouthType == 3){ //Meh face No. 1
        strokeWeight(5);
         line(eyeLX, height/2 + faceHeight/mouthLevel, eyeRX, height*2.75/5)
        strokeWeight(0)
    } else if (mouthType == 4){// Straight Face
        strokeWeight(5);
         line(eyeLX, height/2 + faceHeight/mouthLevel, eyeRX, height/2 + faceHeight/mouthLevel)
        strokeWeight(0)
    } else if (mouthType == 5){//Meh face No.2
        strokeWeight(5);
         line(eyeLX, height*2.75/5, eyeRX, height/2 + faceHeight/mouthLevel)
        strokeWeight(0)
    } else if(mouthType == 6) {//Smile
        strokeWeight(4)
        noFill()
        curve (eyeLX - eyeSize/10, height/2.7 - faceHeight/20,
               eyeLX - eyeSize/10, 1.5*height/3 - faceHeight/50, 
               eyeRX + eyeSize/10, 1.5*height/3 - faceHeight/50,
               eyeRX + eyeSize/10, height/2.7 - faceHeight/20)
        strokeWeight(0)
    }
   
    //nose
    //two different types of noses
    //use faceheight and width to determine mouth position
    if(noseType == 1) {
        fill(95, 44, 5);
        ellipse(width/2, height/2 - faceHeight/5, faceWidth*0.05, faceHeight/5)
    } else if (noseType == 2) {
        fill(95, 44, 5);
        ellipse(width/2, height/2 - faceHeight/10, faceWidth*0.1, faceWidth*0.1)
    }

}


function mousePressed() {
    // Randomize the variables when the use clicks their mouse
    //Background color, high rgb for faded colors
    r = random (200, 250)
    g = random (200, 250)
    b = random (200, 250)
    //face
    //Max width less than max height
    faceWidth = random(100, 120);
    faceHeight = random(100, 150);
    //skin color
    randomSkin = int(random (0, 4)) 
    //eyes
    eyeSize = random(20, 28);
    browHeight = random(0, 10)
    eyeBrow = int(random(1, 3))
    pupilPos = random (0, 0.5)
    //mouth
    mouthType = int(random(1, 7))
    mouthLevel = random (6, 50)
    //hair
    hairColor = random (0, 100)
    stubble = int(random(0, 3))
    hairType = int(random(1, 3))
    //nose
    noseType = int(random(1, 3))
}

// 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)
}