Category: Project-02-Variable-Face

//Tracy Meng
//Section B

// GLOBAL VARIABLES
var eyeSize = 20;
var mouthSize = 50;
var earringSize = 30;
var faceWidth = 100;
var faceHeight = 150;
var earSize = 20;
var noseSize = 30;
var pupSize = 10;
var noseType = 1;
var hairType = 1;
var eyeType = 1;
var earringType = 1;
var mouthType = 1;
var backgroundType = 1;


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

function draw() {
//BACKGROUND
    //background types
    if (backgroundType == 1) {
        background(225,246,255); //light blue background
    }

    else if (backgroundType == 2) {
        background(255,164,216); //light pink background
    }

    else {
        background(247,255,165); //light yellow background
    }


//HAIR
    // hair types    
    if (hairType == 1) {
        strokeWeight(15);
        stroke(127,82,0); //brownhair
        fill(127,82,0);
        arc(width / 2, height / 2, faceWidth, faceHeight, PI, 0); //straight long hair
        rect(width/2 - faceWidth/2, height/2, faceWidth, height);
    }

    else if (hairType == 2) {
        strokeWeight(45);
        stroke(209,209,20); //blondehair
        fill(209,209,20);
        arc(width / 2, height / 2, faceWidth, faceHeight, PI-PI/4, PI/4); //pom-poms
        ellipse(width/2 - faceWidth/2, height/2 + faceHeight/4, faceHeight/2); //pom-pom left
        ellipse(width/2 + faceWidth/2, height/2 + faceHeight/4, faceHeight/2); //pom-pom right
    }

    else {
        strokeWeight(80);
        stroke(27,6,0); //blackhair
        arc(width / 2, height / 2, faceWidth, faceHeight, PI-PI/8, PI/8); //short hair
    }


//EARS
    //local variable of EARS
var earLX = width / 2 - (faceWidth/2); // earLX = horizontal coordinate of LEFT ear
var earRX = width / 2 + (faceWidth/2); // earLX = horizontal coordinate of LEFT ear

    //left ear
    noStroke();
    fill(255,220,177); //nude color
    ellipse(earLX, height/2, earSize/2, earSize);

    //right ear
    ellipse(earRX, height /2, earSize/2, earSize); 

    //left ear hole
    strokeWeight(2);
    stroke(230,145,20); //dark nude stroke
    arc(earLX, height/2, earSize/4, earSize/2, -PI/2, -PI+PI/2); 
    
    //right ear hole
    arc(earRX, height /2, earSize/4, earSize/2, PI/2, -PI-PI/2);


//FACE / HEAD
//strokeWeight(1);  
    strokeWeight(0);
    fill(255,220,177); //nude color  
    ellipse(width / 2, height / 2, faceWidth,  faceHeight);


//EARRINGS
    //earring types
    if (earringType == 1) {
        strokeWeight(5);
        stroke(167,0,239); //purple
        noFill();
        ellipse(earLX, height/2 + earSize/2, earringSize/6, earringSize); //left ear
        ellipse(earRX, height/2 + earSize/2, earringSize/6, earringSize); // right ear
    }

    else if (earringType == 2) {
        noStroke();
        fill(27,255,255); //teal
        ellipse(earLX, height/2 + earSize/2, earringSize/2, earringSize); //left ear
        ellipse(earRX, height/2 + earSize/2, earringSize/2, earringSize); // right ear


        fill(0,159,11); //green - smaller circle
        ellipse(earLX, height/2 + earSize/2, earringSize/3, earringSize/1.5); //smaller cirlcle left
        ellipse(earRX, height/2 + earSize/2, earringSize/3, earringSize/1.5); //smaller circle right
    }

    else {
        fill(255,277,80); //orange
        rect(earLX-earringSize/4, height/2 + earSize/2, earringSize/2, earringSize,5); //left ear
        rect(earRX-earringSize/4, height/2 + earSize/2, earringSize/2, earringSize,5); // right ear
    }


//NOSE
    //local variables of NOSE
var noseX = width /2; // horizontal coordinates for NOSE
var noseY = height /2 + (faceHeight/8); // vertical coordinates for NOSE

noStroke();
fill(255,198,122); //nose color darker nude
    //nose types
    if (noseType == 1) {
        ellipse(noseX, noseY, noseSize, noseSize); // nose circle
    }

    else if (noseType == 2) {
        rect(noseX - (noseSize/4), noseY - (noseSize/2), noseSize/2, noseSize, 30); // nose rectangle
    }

    else {
        triangle(noseX, noseY - (noseSize/2), noseX - (noseSize/2), noseY + (noseSize/4), noseX + (noseSize/2), noseY + (noseSize/4)); // nose triangle
    }


//EYES    
    //local variable of EYES
var eyeLX = width /2 - (faceWidth * 0.25); //eyeLX = horizontal coordinate of LEFT eye
var eyeRX = width /2 + (faceWidth * 0.25); //eyeRX = horizontal coordinate of RIGHT eye


//eye type 1 - eye open  
    if (eyeType == 1) {

    //overall eyeball
        fill(255); //white eyeballs
        ellipse(eyeLX, height /2, eyeSize + eyeSize/4, eyeSize); //left eye
        ellipse(eyeRX, height /2, eyeSize + eyeSize/4, eyeSize); //right eye

    //eye color
        fill(0,176,203); //eye color - blue
        ellipse(eyeLX, height /2, eyeSize/2, eyeSize/2); // left eye color
        ellipse(eyeRX, height /2, eyeSize/2, eyeSize/2); // right eye color

    //eye pupils
        fill(0); //black pupils
        ellipse(eyeLX, height /2, pupSize, pupSize); // left eye pupil
        ellipse(eyeRX, height /2, pupSize, pupSize); // right eye pupil
    }

//eye type 2 - shut
    else if (eyeType == 2) {
        strokeWeight(2);
        stroke(230,145,20); //dark nude outline
        noFill();

    //LEFT EYE
        arc(eyeLX, height /2, eyeSize/2, eyeSize, 0, PI);

    //RIGHT EYE
        arc(eyeRX, height /2, eyeSize/2, eyeSize, 0, PI);
    }

//eye type 3 - sunglasses
    else {
        strokeWeight(4);
        stroke(250,145,164); //rim color hot pink
        fill(0); //glass of sunglasses is black

    //LEFT EYE SUNGLASSES
        rect(eyeLX - eyeSize/2, height /2 - eyeSize/2, eyeSize, eyeSize, 1);

    //RIGHT EYE SUNGLASSES
        rect(eyeRX - eyeSize/2, height /2 - eyeSize/2, eyeSize, eyeSize, 1);

    //LINE CONNECTION
        line(eyeLX + eyeSize/2, height /2 - eyeSize/4, eyeRX - eyeSize/2, height /2 - eyeSize/4);

    //GLARE
        strokeWeight(8);
        stroke(255);
        point(eyeLX + eyeSize /8, height /2 + eyeSize/4); //left eye
        point(eyeRX + eyeSize /8, height /2 + eyeSize/4); //right eye

    }

//MOUTH

    //local variable of MOUTH
var mouthX = width /2; //mouthX = horizontal coordinate of MOUTH
var mouthY = height /2 + (faceHeight/3); //mouthY = vertical coordinate of MOUTH

//mouth type 1 - surprised with tongue
    if (mouthType == 1) { 
        strokeWeight(2);
        stroke(225,0,37); //lip liner color - red
        fill(255);
        ellipse(mouthX, mouthY, mouthSize, mouthSize/2); //surprised

        //tongue
        noStroke();
        fill(255,144,159); //tongue color - pink
        ellipse(mouthX, mouthY + mouthSize/8, mouthSize/1.5, mouthSize/4); //tongue
    }

//mouth type 2 - smile
    else if (mouthType == 2) {
        noFill();
        strokeWeight(3);
        stroke(201,0,40); //lip liner color - red
        arc(mouthX, mouthY, mouthSize, mouthSize/2, 0, PI); //happy
    }

//mouth type 3 - frown
    else {
        stroke(94,53,0); //sad mouth color - dark brown
        strokeWeight(3);
        noFill();
        arc(mouthX, mouthY, mouthSize, mouthSize/2, PI, 0); //sad   
    }

}

function mousePressed() {
    // when the user clicks, these variables are reassigned
    // to random values within specified ranges. For example,
    // 'faceWidth' gets a random value between 75 and 150.

//CREATE RANDOM DIMENSIONS
    faceWidth = random(100, 400);
    faceHeight = random(100, 400);
    earSize = random(10, 80);
    eyeSize = random(10, 65);
    noseSize = random(10,50);
    pupSize = random(8,15);
    earringSize = random(20,60);

//CREATE RANDOM TYPES & OPTIONS
    noseType = random (1,3);
    noseType = round(noseType);

    hairType = random (1,3);
    hairType = round(hairType);

    eyeType = random (1,3);
    eyeType = round(eyeType);

    earringType = random (1,3);
    earringType = round(earringType);

    mouthType = random(1,3);
    mouthType = round(mouthType);

    backgroundType = random(1,3);
    backgroundType = round(backgroundType);


}

var width = 480;
var height = 640;

//background color
var backgroundR = 100;
var backgroundG = 0;
var backgroundB = 0;

//shirt color and size
var shirtR = 200;
var shirtG = 200;
var shirtB = 0;
var shirtWide = 400;
var shirtTall = 100;

//skintone
var skinR = 47;
var skinG = 39;
var skinB = 32;

//neck
var neckTall = 250;
var neckWide = 100;
var neckY = 200;

//head
var headWide = 250;
var headTall = 300;
var headX = width/2;
var headY = 200;

//ears
var earSize = 40;

//eyes
var eyeColor = 1;
var eyeSize = 30;
var eyeDistance = 30;

//nose
var noseLong = 20;
var noseWide = 10;

//mouth
var mouthSelector = 1;

//eyebrows
var eyebrowTall = 30;
var eyebrowWide = 30;
var eyebrowColorSelector = 1;
var eyebrowWeight = 10;

//hair
var hairstyle = 1;

function setup() {
    createCanvas(480, 640);
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {
    noStroke();
    background(backgroundR, backgroundG, backgroundB);

    // sleeve location variables -- have to be here (not global) so will update with new shirtWide values 
    var shirtCornerStar = ((width-shirtWide)/2)+((shirtWide/4)/2); //x coord of starboard sleeve
    var shirtCornerPort = width-shirtCornerStar; //x coord of port sleeve

    //shirt
    fill(shirtR, shirtG, shirtB);
    //rect(((width-shirtWide)/2), (height-shirtTall), shirtWide, shirtTall); 
    rect(shirtCornerStar, (height-shirtTall), (shirtWide-(shirtWide/4)), shirtTall);

    //sleeves
    fill(shirtR-20, shirtG-20, shirtB-20); //makes sleeves slightly darker than shirt
    triangle(shirtCornerStar, (height-shirtTall), shirtCornerStar, height, (shirtCornerStar-((shirtWide/4)/2)), height); //starboard sleeve
    triangle( shirtCornerPort, (height-shirtTall), shirtCornerPort, height, (shirtCornerPort+((shirtWide/4)/2)), height); //port sleeve

    //neck
    neckWide = shirtWide/3
    neckY = height-neckTall-shirtTall+(shirtTall/6);
    fill(skinR-20, skinG-20, skinB-20);
    rect(width/2-neckWide/2, neckY, neckWide, neckTall);
    ellipse(width/2, neckY+neckTall, neckWide, neckTall/4);

    //head
    headX = width/2
    headY = neckY
    fill(skinR, skinG, skinB);
    ellipse(headX, headY, headWide, headTall);

    //ears
    fill(skinR-10, skinG-10, skinB-10);
    ellipse(headX-(headWide/2), headY, earSize, earSize*1.5); //starboard ear
    ellipse(width-(headX-(headWide/2)), headY, earSize, earSize*1.5); //port ear

    //redraw head to cover ears, theres prob a better way to do this but ears rely on the head variables
    fill(skinR, skinG, skinB);
    ellipse(headX, headY, headWide, headTall);

    //nose (length and width)
    strokeWeight(noseWide);
    stroke(skinR, skinG-20, skinB-20);
    line(headX, headY, headX, headY+noseLong);
    noStroke();

    //eyes (color and distance from center of head)
    if (eyeColor <= 1) {
        fill(54, 43, 17); //brown
    } else if (eyeColor <= 2) {
        fill(52, 95, 45); //green
    } else if (eyeColor <= 2.8) {
        fill(13, 200, 200); //blue
    } else {
        fill(255, 20, 0); //red!
    }
    ellipse((width/2)-eyeDistance, headY, eyeSize);
    ellipse((width/2)+eyeDistance, headY, eyeSize);


    //mouth (arc of different size and stroke color)
    if (mouthSelector <= 1) { //open smile
        fill(61, 32, 31);
        arc(headX, headY+noseLong*2, headWide/3, headTall/4, radians(0), radians(180));
    } else if (mouthSelector <= 2) { //closed smile
        noFill();
        stroke(skinR+20, skinG-20, skinB-20);
        strokeWeight(20);
        arc(headX, headY+noseLong*2, headWide/3, headTall/5, radians(10), radians(170));
        noStroke();
    } else { //bubblegum
        fill(40, 0, 0);
        ellipse(headX+10, headY+(headTall/2)-(headTall/6), 30); //mouth
        fill(238, 168, 234, 70); //pink transparent
        ellipse(headX+10, headY+(headTall/2)-(headTall/6), 175, 175); //bubble1
        ellipse(headX+10, headY+(headTall/2)-(headTall/6), 180, 180); //bubble 2
        fill(255, 240, 240, 90);
        ellipse(headX+40, headY+(headTall/2)-headTall/3, 30, 30); //highlight
    }

    //and finally, hair!
    if (hairstyle <=1) { //bald
        //do nothing
    } else if (hairstyle <=2) { //beanie
    strokeWeight(12);
    strokeCap(ROUND);
        if (hairstyle <= 1.3){
            fill(168, 47, 47); //red hat
            stroke(168-10, 47-10, 47-10);
        } else if (hairstyle <=1.6) {
            fill(200 , 120, 218); //pink hat
            stroke(200-10, 120-10, 218-10);
        } else {
            fill(86, 93, 200); //perriwinkle hat
            stroke(86-10, 93-10, 200-10);
        }
        arc(headX, headY-(headTall/2)+40, headWide+5, headTall-60, radians(180), radians(360));
        rect(headX-(headWide/2)-10, headY-(headTall/2)+40, headWide+20, 60);
    } else { //bowl cut
        if (hairstyle <= 2.3){
            fill(45, 40, 30); //dark brown
            stroke(45, 40, 30);
        } else if (hairstyle <=2.8) {
            fill(130, 96, 57); //light brown
            stroke(130, 96, 57);
        } else if (hairstyle <=2.9 & skinR > 80 && skinG > 80 && skinB >30) {
            fill(222, 129, 25); //red
            stroke(222, 129, 25);
        } else {
            fill(25, 183, 222); //blue
            stroke(25, 183, 222);
        }
        arc(headX, headY-headY/4, headWide+5, headTall-60, radians(180), radians(360));
    }

    //eyebrows
    if (eyebrowColorSelector <=1) {
        stroke(40, 35, 20); //dark brown
    } else if (eyebrowColorSelector <=2) {
        stroke(230, 230, 138); //blonde
    } else {
        stroke(140, 230, 200); //blue
    }

    noFill();
    strokeWeight(eyebrowWeight);
    arc((width/2)-eyeDistance, headY-eyebrowTall, eyebrowWide, 20, radians(200), radians(340));
    arc((width/2)+eyeDistance, headY-eyebrowTall, eyebrowWide, 20, radians(200), radians(340));
    noStroke();

}

function mousePressed() {
    //background color change
    backgroundR = random(0, 255);
    backgroundG = random(0, 255);
    backgroundB = random(0, 255);

    //shirt color and size change
    shirtR = random(0, 255);
    shirtG = random(0, 255);
    shirtB = random(0, 255);
    shirtWide = random((width-(width/3)), (width-20));
    shirtTall = random((height/6), (height/4));

    //neck and skin changes
    skinR = random(60, 200);
    skinG = random(skinR, skinR-10);
    skinB = random(skinR-20, skinR-30);
    neckTall = random(200, 250);

    //head
    headWide = random(neckWide+100, neckWide+150);
    headTall = random(headWide, headWide*1.4);
    earSize = random(50, 60);

    //eyes
    eyeColor = random(0,3); 
    eyeSize = random(20, 40);
    eyeDistance = random(30, headWide/2-30);

    //nose
    noseLong = random(headTall/10, headTall/6);
    noseWide = random(25, 40);

    //mouth
    mouthSelector = random(0, 3);

    //eyebrows
    eyebrowColorSelector = random(0,2.1);
    eyebrowWeight = random(10, 18);
    eyebrowTall = random(20, 40);

    //hair
    hairstyle = random(0,3);
}