Category: Project-02-Variable-Face

var faceWidth = 200
var faceHeight = 300
var faceColor = 255
var eyeSize = 40
var eyeL = 20
var eyeR = 20
var r = 0
var g = 0
var b = 0
var mouth = 1

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

function draw() {
    background(180);

    //head
    fill(r,g,b);
    ellipse(width/2,height/2,faceWidth, faceHeight);  

    //eyeballs
    fill(255);
    ellipse(eyeL,height/2,50,30);     //left
    ellipse(eyeR,height/2,50,30);     //right

    //pupil ellipse
    fill(111, 78, 55);
    ellipse(eyeL,height/2,20,20);     //left
    ellipse(eyeR,height/2,20,20);     //right

    //nose
    fill(255);
    stroke(0,0,0);
    strokeWeight(1);
    if(eyeL<=width/2-faceWidth/4 & eyeR<=width/2+faceWidth/4){
        triangle(width/2, height/2, width/2, height/2+faceHeight/5, width/2-faceWidth/4, height/2+faceHeight/8); //left
    }else if(eyeL>=width/2-faceWidth/4 & eyeR>=width/2+faceWidth/4){
        triangle(width/2, height/2, width/2, height/2+faceHeight/5, width/2+faceWidth/4, height/2+faceHeight/8); //right
    }else{
        triangle(width/2, height/2, width/2+faceWidth/8, height/2+faceHeight/5, width/2-faceWidth/8, height/2+faceHeight/5); //mid
    }

    //mouth
    if(mouth == 1){
        fill(0);
        arc(width/2,height/2+faceHeight/4,70,50,0,PI,CHORD);    //happy
        noFill();
        strokeWeight(3);
        arc(eyeL,height/2-30,70,40,PI,2*PI);
        arc(eyeR,height/2-30,70,40,PI,2*PI);
        strokeWeight(1);
    }else if(mouth == 2){
        fill(225,0,0);
        arc(width/2,height/2+faceHeight/3,70,50,PI,2*PI,CHORD); //mad
        stroke(255,0,0);
        strokeWeight(5);
        line(eyeL-25,height/2-40,eyeL+25,height/2-20);
        line(eyeR+25,height/2-40,eyeR-25,height/2-20);
        stroke(0);
        strokeWeight(1);                                        //resets stroke
    }else if(mouth==3){
        fill(0);
        ellipse(width/2,height/2+faceHeight/3,30,30);           //scared
        strokeWeight(3);
        line(eyeL-25,height/2-20,eyeL+25,height/2-40);
        line(eyeR+25,height/2-20,eyeR-25,height/2-40);
        strokeWeight(1);
    }
}

function mousePressed(){
    faceWidth = random(180,300);
    faceHeight = random(200,340);
    faceColor = random(0,255);
    eyeL = random(width/2-faceWidth/2+25,width/2-25);
    eyeR = random(width/2+25,width/2+faceWidth/2-25);
    r = random(0,255);
    g = random(0,255);
    b = random(0,255);
    mouth = int(random(1,4));
}



//don't mind the stuff down here 

    //mouth
    //line(200,290,280,290);

    //pupil with points      
    //stroke(111, 78, 55);        
    //strokeWeight(20);
    //point(190,190);             
    //point(280,190);

    //sunglasses and frame
//    stroke(255,0,0);
//    strokeWeight(3);
//    line(320,220,350,190);      
//    fill(180,240,0);
//    rect(130,200,90,50);        
//    fill(50,158,200);
//    rect(230,200,90,50); 



    //background ellipses
    //fill(255,230,0);
    //ellipse(250,200,500,600);
    //fill(196,80,71);
    //ellipse(250,200,400,500);
    //fill(147,248,234);
    //ellipse(250,200,330,430);
    //fill(135,73,146);
    //ellipse(250,200,270,370);
    //fill(0,0,0);
    //ellipse(250,200,230,330); 

// Sandy Youssef
// Section D
var eyeSizeW = 10;
var eyeSizeH = 10;
var pupilSize = 10
var faceWidth = 100;
var faceHeight = 120;
var skinR = 255
var skinG = 178
var skinB = 102


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

function draw() {
    background(180);
    noStroke();
    // hair
    fill(skinR - 70, skinG - 70, skinB - 70);
    ellipse(width/2, height/2, 200, 250); 
    // bow
    fill(255);
    ellipse(width/2, height*0.30, 40, 40); 
    triangle(180, 155, 180, 230, 240, 196); 
    triangle(300, 155, 300, 230, 230, 196);
    fill(skinR - 50, skinG - 50, skinB - 50);
    // ears
    fill(255);
    ellipse(width* 0.38, height/2, 30, 40); 
    ellipse(width* 0.62, height/2, 30, 40);
    // neck
    fill(skinR - 40, skinG - 40, skinB - 40);
    rect(width* 0.45, height/2, 45, 90); 
    // face
    fill(skinR, skinG, skinB);
    ellipse(width / 2, height / 2, faceWidth,  faceHeight);  
    // shirt
    fill(255);
    ellipse(width/2, height* 0.75, 150, 150) 
    // eyes
    var eyeLX = width / 2 - faceWidth * 0.25;
    var eyeRX = width / 2 + faceWidth * 0.25;
    fill(255);
    ellipse(eyeLX, height / 2, eyeSizeW, eyeSizeH);
    fill(255);
    ellipse(eyeRX, height / 2, eyeSizeW, eyeSizeH);
    fill(0);
    var pupilL = width/2 - faceWidth * 0.25;
    var pupilR = width/2 + faceWidth * 0.25;
    fill(skinR - 50, skinG - 50, skinB - 50);
    ellipse(pupilL, height/2, pupilSize, pupilSize); // left pupil
    ellipse(pupilR, height/2, pupilSize, pupilSize); // right pupil
    // nose
    var nose1 = width/2 - faceHeight* 0.05;
    var nose2 = width/2 + faceHeight * 0.05;
    var nose3 = width/2 - faceWidth * 0.005;
    fill(skinR - 40, skinG - 40, skinB - 40);
    triangle(nose1, height*0.55, nose2, height*0.55, nose3, height*0.5)
    // mouth
    fill(238, 131, 163); 
    arc(width/2, height* 0.57, 40, 23, radians(0), radians(180));  // lips
    fill(255);
    arc(width/2, height* 0.574, 30, 15, radians(0), radians(180)); // teeth
}


function mousePressed() {
    // when the user clicks, these variables are reassigned
    // to random values within specified ranges.
    faceWidth = random(90, 180);
    faceHeight = random(130, 180);
    eyeSizeW = random(10,35);
    eyeSizeH = random (10,30);
    pupilSize = random(8, 12);
    skinR = random(70,230);
    skinG = random (70,230);
    skinB = random (70,230);
    mouth = random (1,3);
}

//Evette LaComb
//Section D

var chin = 120;
var nose = 1;
var shirt = 150;
var hairR = 0;
var hairG = 0;
var hairB = 0;
var skinR = 0;
var skinG = 0;
var skinB = 0;
var mouthY = 130;
var mouthW = 30;
var mouthH = 5;
var eyeD = 20;

function setup() {
    createCanvas(200, 200);
}

function draw() {
    noStroke(); //apply to all bellow 
    background(195, 216, 212);

    fill(hairR -70, hairG -70, hairB -70); //HAIR COLOR  
        rect(35, 50, 130, 150); //background hair 
    fill(skinR +70, skinG -70, skinB -70); //SHIRT SHADE 
        ellipse(100, 200, shirt, 150)//shirt
    fill(skinR -70, skinG -70, skinB -70); //SKIN SHADOW
        triangle(60, 125, 140, 125, 100, 175); //neck
        ellipse(50, 93, 45, 45); //ear left
        ellipse(150, 93, 45, 45); //right ear

    fill(skinR, skinG, skinB); //FACE 
        ellipse(100, 90, 100, chin);//face
    fill(195, 216, 212); //forhead cover (hide top of head poking out of bangs)
        ellipse(100, 25, 100, 100)

    fill(hairR, hairG, hairB);
        ellipse(70, 64, 85, 55); //left hair Bang
        ellipse(130, 64, 85, 55); //right hair Bang

    fill(hairR -70, hairG -70, hairB -70); //Mouth and back hair shade 
        ellipse(100, mouthY, mouthW, mouthH); //mouth
    fill(skinR +70, skinG -70, skinB -70); //same shade as shirt 
        ellipse(100, 115, 20, 20); //nose

    fill(skinR -70, skinG -70, skinB -70); //EYE BAG 
        ellipse(75, 106, eyeD +5); //left eye
        ellipse(125, 106, eyeD +5); //right eye
    fill(195, 216, 212); //WHITES
        ellipse(75, 103, eyeD); //left eye
        ellipse(125, 103, eyeD); //right eye
    fill(hairR -120, hairG -120, hairB -120); //PUPIL
        ellipse(75, 102, eyeD -7); //left eye
        ellipse(125, 102, eyeD -7); //right eye
}

function mousePressed() {
    chin = random(120, 150);
    shirt = random(150, 200);
    hairR = random(0, 255);
    hairG = random(0, 255);
    hairB = random(0, 255);
    skinR = random(0, 255);
    skinG = random(0, 255);
    skinB = random(0, 255);
    mouthY = random(130, 145);
    mouthW = random(10, 35);
    mouthH = random(5, 10);
    eyeD = random(10, 30);
}