Project 2: Variable Face

Hi here are my faces! The hardest part of the project is to create all these different options for hair, eyes, mouth etc. Then linking those to the random function.

sketch
//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);


}

Leave a Reply