Category: Project-02-Variable-Face

Project-02-Face-Variables

sketch
//Nami Numoto
//15104 1A
// Simple beginning template for variable face.
var eyeSize = 20;
var faceWidth = 100;
var faceHeight = 150;
var noseWidth = 20;
var noseDirection = 0;
var noseHeight = 30;
var mouthPosition = 200;
var mouthHeight = 20;

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

function draw() {
    strokeWeight(2);
    background(180);
    fill(156, 132, 104);
    ellipse(width / 2, height / 2, faceWidth,  faceHeight);
    var eyeLX = width / 2 - faceWidth * 0.25;
    var eyeRX = width / 2 + faceWidth * 0.25;
    fill(255)
    ellipse(eyeLX, height / 2, eyeSize, eyeSize); // eye 1
    ellipse(eyeRX, height / 2, eyeSize, eyeSize); // eye 2
    fill(0)
    ellipse(eyeLX, height / 2, eyeSize / 2, eyeSize / 2); // iris 1
    ellipse(eyeRX, height / 2, eyeSize / 2, eyeSize / 2); // iris 2
    line(width / 2, height / 2, noseWidth + width / 2, noseHeight + height / 2); // directional nose line
    line(width / 2, height / 2 + noseHeight, noseWidth + width / 2, height / 2 + noseHeight); // bottom nose line
    noFill();
    beginShape(); //creative rendition of a mouth, testing out curveVertex()  :)
    curveVertex(width / 2 - faceWidth / 3, mouthPosition + mouthHeight);
    curveVertex(width / 2 - faceWidth / 3, mouthPosition + mouthHeight);
    curveVertex(width / 2, mouthPosition);
    curveVertex(width / 2 + faceWidth / 3, mouthPosition + mouthHeight);
    curveVertex(width / 2 + faceWidth / 3, mouthPosition + mouthHeight);
    endShape(); //sometimes the mouth goes off the face. call it art
}

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.
    faceWidth = random(75, 150);
    faceHeight = random(100, 200);
    eyeSize = random(10, 30);
    noseWidth = random(10, 30);
    noseDirection = random(0, 2);
    if (noseDirection > 1) {
        noseWidth = -1 * noseWidth;
    }
    mouthHeight = random(-10, 10);
}

Project 2: Variable Faces

sketch-beansDownload
//Yeon Lee, Section C
//Project-02: Variable Faces; Face Variables

var backgroundR = 180;
var backgroundG = 200;
var backgroundB = 255;
var head = 190;
var hoodieColorR = 253;
var hoodieColorG = 253;
var hoodieColorB = 150;
var headWidth = 150;
var headHeight = 150;
var eyeSize = 24;
var blushSize = 25;
var mouth =  1
 
function setup() {
    createCanvas(640, 480);
}
 
function draw() {
    background(backgroundR, backgroundG, backgroundB);

    //ears + head (back)
    var w = 330;
    var h = 250;
    var earSize = 80;
    var earY = h - 0.5 * head;
    var leftEarX = w + 0.45 * head; //hoodie size changes every time you click
    var rightEarX = w - 0.45 * head;

    fill(hoodieColorR, hoodieColorG, hoodieColorB); //hoodie color changes every time you click
    noStroke();
    ellipse(leftEarX, earY, earSize, earSize); //head with hoodie
    ellipse(rightEarX, earY, earSize, earSize);
    ellipse(w, 220, head, 1 * head); //cheek shape on the bottom
    ellipse(w, 280, 35 - head, head / 2);

    //head (front)
    fill(255, 255, 255);
    ellipse(w, h - 10, head / 1.2, head / 1.2); //face
    ellipse(w, h + 30, 45 - head, head / 2); //cheek shape on the bottom

    //eyebrows + eyes
    var leftEyeX = w - headWidth * 0.3; //eye size changes every time you click
    var rightEyeX = w + headWidth * 0.3;

    fill(45, 34, 25); 
    arc(leftEyeX, h - 40, 10, 5, PI, 0); //eyebrows
    arc(rightEyeX, h - 40, 10, 5, PI, 0);
    ellipse(leftEyeX, h, eyeSize, eyeSize); //eyes
    ellipse(rightEyeX, h, eyeSize, eyeSize);

    fill(255, 255, 255); //white part of eyes
    ellipse(leftEyeX + 6, h - 7, eyeSize / 5, eyeSize / 5);
    ellipse(rightEyeX + 6, h - 7, eyeSize / 5, eyeSize / 5); 
    ellipse(leftEyeX, h + 15, eyeSize, eyeSize / 4); //smiling eyes
    ellipse(rightEyeX, h + 15, eyeSize, eyeSize / 4);

    //nose
    var noseX = w;
    var noseY = head * 0.05 + 245; //nose size changes every time you click
    var noseSize = head / 45;
    fill(255, 182, 193);
    ellipse(noseX, noseY, noseSize, noseSize - 2);

    //blush
    var mouthSize = head / 35;
    var mouthW = noseSize * 3;
    var leftBlushX = w - mouthW * 5;
    var rightBlushX = w + mouthW * 5;

    fill(255, 139, 139, 50);
    ellipse(leftBlushX, h + 40, blushSize * 2, blushSize * 2);
    ellipse(rightBlushX, h + 40, blushSize * 2, blushSize * 2);

    //mouth
    var mouthX = w;
    var mouthY = head * 0.05 + 253;

    if (mouth < 2){ //mouth changes to either a smile or surprised every time you click 

        //smile
        fill(255, 106, 106);
        arc(mouthX, mouthY, 12, 20, 0, PI, CHORD);

    } else if (mouth < 3) {
        //surprise
        fill(255, 106, 106);
        ellipse(mouthX, mouthY + 10, 15, 20);
    }

}
 
function mousePressed() {
    // when you click, these variables are reassigned
    // to random values within specified ranges
    backgroundR = random(100, 150);
    backgroundG = random(100, 150);
    backgroundB = random(200, 250);    
    head = random(180, 300);
    hoodieColorR = random(220, 255);
    hoodieColorG = random(220, 255);
    hoodieColorB = random(130, 180);
    headWidth = random(100, 200);
    headHeight = random(100, 250);
    eyeSize = random(24, 34);
    blushSize = random(25, 30);
    mouth = random(1, 3);
}

At first, it was challenging to work with positioning locations, but I got used to arithmetic solutions and enjoyed assigning names to variables. I had a lot of fun experimenting with reassigning the random values when you click for mousePressed() function.

Project-02: Variable Faces

Since I did not use the environmental variables to write my function, it took me a while at first to rewrite parts of my code. Then I re-define some variables by using the var …=random(num1, num2) to approach to the final generative faces. It is frustrating during the process when debugging it, but I feel super proud of myself when I finally get my code working. 
siyunw-Generative faces
var eyeSize = 10;
var faceWidth = 100;
var faceHeight = 150;
var hairWidth =350;
var hairHeight =350;
var neckWidth = width / 2;
var neckHeight= 4*neckWidth / 3;
var mouthSize= 40;
var mouthHeight = 30;
var backgroundR=250;
var backgroundG=150;
var backgroundB=100;

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

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

    fill(255,204,153);
    circle((width-hairWidth) / 2,height / 2,50);  
    circle(width-(width-hairWidth) / 2,height / 2,50);//ears

    fill(255,153,51);
    ellipse(width / 2, height / 2, hairWidth, hairHeight);
    rect((width-hairWidth) / 2,(height / 2),hairWidth,4*(hairHeight / 2) / 3);//face
    
    var eyeLX = width / 2 - faceWidth * 0.15;
    var eyeRX = width / 2 + faceWidth * 0.15;
    fill(0);
    ellipse(eyeLX, height / 2, eyeSize, eyeSize);
    ellipse(eyeRX, height / 2, eyeSize, eyeSize);//eyes


    fill(0);
    ellipse(width/2,3*height / 4,mouthSize,mouthHeight);
    //mouse

}

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.
    backgroundR=random(200,300);
    backgroundG=random(100,200);
    backgroundB=random(50,150);
    faceWidth = random(75, 150);
    faceHeight = random(100, 200);
    eyeSize = random(10, 30);
    hairWidth = random(300,400)
    hairHeight = random(300,400);
    neckWidth = random(150,250);
    mouthSize = random(35,80);
    mouthHeight = random(25,70);
}

Project 2: Variable Faces

sketch

// Simple beginning template for variable face.
var eyeSize = 20;
var faceWidth = 100;
var faceHeight = 150;
var noseWidth = 15;
var noseHeight = 15;
var mouthWidth = 20;
var mouthHeight = 20;
var eyebrowHeight = 20;
var eyebrowWidth = 40;
var fillFaceR = 200
var fillFaceG = 200
var fillFaceB = 200
var filleyeR = 200
var filleyeG = 200
var filleyeB = 200
var fillMouthR = 200
var fillMouthG = 200
var fillMouthB = 200
var fillBrowR = 200
var fillBrowG = 200
var fillBrowB = 200
var fillHairR = 200
var fillHairG = 200
var fillHairB = 200


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

function draw() {
    background(255, 242, 242);
    strokeWeight(0);
    fill(fillFaceR, fillFaceG, fillFaceB);
    ellipse(width / 2, height / 2, faceWidth,  faceHeight);
    strokeWeight(0);
    fill(0);
    var eyeLX = width / 2 - faceWidth * 0.25;
    var eyeRX = width / 2 + faceWidth * 0.25;
    ellipse(eyeLX, height / 2, eyeSize, eyeSize);
    ellipse(eyeRX, height / 2, eyeSize, eyeSize);
    fill(166, 83, 83)
    ellipse(width/2, 250, noseWidth, noseHeight);
        //nose
    fill(fillMouthR, fillMouthG, fillMouthB);
    ellipse(width/2, 280, mouthWidth, mouthHeight);
        //mouth function
    fill(fillBrowR, fillBrowG, fillBrowB);
    var eyebrowLX = width / 2 - faceWidth * 0.5 
        //Left eyebrow variable thing
    var eyebrowRX = width / 2 + faceWidth * 0.52
        //Right eyebrow variable thing
    rect(eyebrowLX, height / 2 - 20, eyebrowWidth, eyebrowHeight);
        //Left Eyebrow
    rect(eyebrowRX - 40, height / 2 - 20, eyebrowWidth, eyebrowHeight);
        //Right Eyebrow
    strokeWeight(0);
    fill(fillFaceR, fillFaceG, fillFaceB);
    rect(width / 2 - 17, 265, 35, 15)
        //this is the rectangle that makes the mouth into a smile
    strokeWeight(0);
    fill(fillHairR, fillHairG, fillHairB);
    ellipse(width / 2, height / 3 + 10, 40, 40)
        //this is the hair bun



}

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.
    faceHeight = random(120, 150);
    eyeSize = random(10, 30);
    noseWidth = random(5, 12);
    noseHeight = random(5, 12);
    mouthWidth = random(15, 35);
    mouthHeight = random(5, 25);
    eyebrowHeight = random(6, 20);
    eyebrowWidth = random(30, 45);
    fillFaceR = random(70, 255);
    fillFaceB = random(70, 150);
    fillFaceG = random(70, 150);
    filleyeR = random(10, 100);
    filleyeG = random(10, 100);
    filleyeB = random(10, 100);
    fillMouthR = random(150, 255);
    fillMouthG = random(1, 50);
    fillMouthB = random(1, 50);
    fillBrowR = random(0, 100);
    fillBrowG = random(0, 100);
    fillBrowB = random(0, 1255);
    fillHairR = random(0, 255);
    fillHairG = random(0, 100);
    fillHairB = random(0, 255);
}

My main challenges were trying to place the eyebrows correctly, and getting the colors correct. I think starting was also a bit difficult, but once I got use to using global variables a bit more it got easier.

Project 2: Variable Faces

generative faces

var faceWidth = 135;
var faceHeight = 150;
var eyeSize = 8;
var colG = 90
var colB = 40
var colR = 150
var earWidth = 19
var earHeight = 20
var hairColorR = 10
var hairColorG = 10
var hairColorB = 10
var hairHeight = 10
var hairCurve = 10
var hairWidth = 10
var noseWidth = 10
var noseHeight = 10
var noseColorR = 10
var noseColorG = 10
var noseColorB = 10
var mouthWidth = 10
var mouthHeight = 10
 
function setup() {
    createCanvas(480, 640);
}
 
function draw() {
    background(241,255,250);
    noStroke();

    fill(hairColorR, hairColorG, hairColorB) // hair
    ellipse(width / 2 , height / 2 - 40, hairWidth, hairHeight,)

    fill (colR, colG, colB)
    ellipse(width / 2 - 50, height / 2, earWidth, earHeight); // left ear

    fill (colR, colG, colB)
    ellipse(width / 2 + 50, height / 2, earWidth, earHeight); // left ear

    fill(colR, colG, colB)
    ellipse(width / 2, height / 2, faceWidth,  faceHeight); // face

    fill(hairColorR, hairColorG, hairColorB) // hair and face connector
    rect(200,255,75,25)

    fill(noseColorR, noseColorG, noseColorB) // nose
    ellipse(width / 2  , height / 2 + 10, noseWidth, noseHeight)

    fill (0) // eyes
    var eyeLeft = width / 2 - faceWidth * 0.25;
    var eyeRight = width / 2 + faceWidth * 0.25;
    ellipse(eyeLeft, height / 2, eyeSize, eyeSize);
    ellipse(eyeRight, height / 2, eyeSize, eyeSize);

    fill(0) //mouth
    ellipse(width / 2, height / 2 + 30, mouthWidth, mouthHeight)

    fill(colR, colG, colB) //mouth 2
    rect(210,335,60,15)

}

function mousePressed() {
    faceWidth = random(80,100);
    faceHeight = random(90,120);
    eyeSize = random(10, 20);
    colG = random(0,256);
    colR = random (0,256);
    colB = random(0,256);
    earWidth = random(28,30);
    earHeight = random(20,35);
    hairColorR = random(0,200);
    hairColorG = random(0,166);
    hairColorB = random(10,250);
    hairHeight = random(80,100);
    hairWidth = random(100,200);
    noseColorR = random(4,256);
    noseColorG = random(10,56);
    noseColorB = random(0,200);
    noseWidth = random(8,10);
    noseHeight = random(2,8);
    mouthWidth = random(20,30);
    mouthHeight = random(10,18);
}

It was quite a challenge trying to understand how to change certain features of the face while making everything connected at the same time and also thinking about how to randomize color was also challenging.

Variable Faces 02

It was a lot of fun deciding what to change and what style to approach this project with. It was little challenging finding the right places to put random face features but I was able to use the sample code to infer how to make changes.

sketch

//Jia Ning Liu
//jianingl@andrew.cmu.edu
//Section D

var eyeSize = 20;
var faceWidth = 100;
var faceHeight = 150;
var mouthLength = 30
var colorR = 200
var colorG = 200
var colorB = 200
var mouthStart = 30 
var mouthHeight = 30 //controls the y coordinate of the mouth
var hairRadius = 40 //controls size of hair
var noseLength = 30

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

function draw() {
    noFill()
    background(204, 255, 204);
    strokeWeight(5); //increases stroke weight to give face a more graphic feel
    fill (colorB, colorG, colorR); //generated a random RGB color
    ellipse(width / 2, height / 2 - 80, hairRadius); // creates hair of different sizes
    fill (colorR, colorG, colorB);
    ellipse(width / 2, height / 2, faceWidth, faceHeight);
    var eyeLX = width / 2 - faceWidth * 0.25;
    var eyeRX = width / 2 + faceWidth * 0.25;
    fill (colorG, colorB, colorR);
    ellipse(eyeLX, height / 2, eyeSize, eyeSize);
    ellipse(eyeRX, height / 2, eyeSize, eyeSize);
    //generates a random length of line for the mouth
    line(width / 2 - mouthStart, height / 2 + mouthHeight, width / 2 + mouthLength, height / 2 + mouthHeight); 
    fill(colorB, colorG, colorR);
    rect(width / 2, height / 2, 5, noseLength); // generates different nose lengths
}

function mousePressed() {
    faceWidth = random(75, 150);
    faceHeight = random(100, 200);
    eyeSize = random (10, 30)
    mouthLength = random (20,80)
    colorR = random(1,256)
    colorG = random(1,256)
    colorB = random (1,256)
    mouthStart = random (20,80)
    mouthHeight = random (20,50)
    hairRadius = random (100,200)
    noseLength = random (10,40)
}

Project 2: Variable Faces

sketch

//Michelle Dang, Section D

var faceWidth; 
var faceHeight;
var faceCurve;
var eyeSize;

var nr; //nose color
var ng;
var nb;

var smileW;
var smileL;

var noseWidth;
var noseHeight;

var face = 1;
var nose = 1;
var eye =1;
var smile=1;
var haircut=1;

var r =0;
var g= 0;
var b=0;

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

function draw() {
    background(168, 220, 237)
    noStroke()

    push()
    fill(r, g, b)
    rectMode(CENTER)
    rect(width/2, height/2+300, 220, 300, 90, 90, 0, 0)
    pop()

    if (face == 1) {
    fill(141, 85, 36)
    // ellipse(width/2, height/2, 200, 250)
    ellipse(width/2, height/2, 250, 270)
    }

    if (face == 2) {
    fill(224, 172, 105)
    // ellipse(width/2, height/2, 200, 250)
    ellipse(width/2, height/2, 250, 270)
    }

    if (face == 3) {
        fill(255, 219, 172)
        // circle(width/2, height/2, 250)
        ellipse(width/2, height/2, 250, 270)
    }

    if (face == 4) {
        fill(198, 134, 66)
        // ellipse(width/2, height/2, 270, 270)
        ellipse(width/2, height/2, 250, 270)
    }
     if (face == 5) {
        fill(241, 194, 125)
        ellipse(width/2, height/2, 250, 270)
    }

    // fill(hairR, hairG, hairB);
    // arc(width/2, height/2-(faceWidth/2)+50, faceWidth, faceHeight+200, PI, TWO_PI); // bowl cut


    if (haircut ==1) {
        fill(0)
        rect(width/2-125, height/2-135, 130, 110, 20, 0,90, 20)
        rect(width/2, height/2-135, 130, 110, 0, 20,20, 90)
    }

    if (haircut==2) {
        for (var x=115; x<350; x+=50) {
            fill(200, 100, 100)
            rect(x, 185, 50, 80, 0, 0, 90, 90)
        }
    }

    if (haircut == 3) {
        fill(227, 174, 50)
        arc(width/2, height/2-30, 240, 220, PI, TWO_PI);
    }




    if (smile==1) {
        fill(0); //smile
        arc(width/2, height/2+ faceWidth*.20, smileW, smileL, TWO_PI, PI);
    } if (smile==2) {
        fill(0); //frown
        arc(width/2, height/2+ faceHeight/2*.60, smileW, smileL, PI, TWO_PI);
    } if (smile==3) {
        fill(0); //neutral expression
        ellipse(width/2, height/2+ faceWidth*.20, rectMouthW, rectMouthH);
    }

   

    if (nose == 1) {
        fill(240, 157, 151);
        ellipse(width/2, height/2, 40, 20)
    }
     if (nose == 2) {
        fill(240, 157, 151);
        rect(width/2-noseWidth/2, height/2-noseHeight/2, noseWidth, noseHeight, 20, 20); 
    } 


     if(eye==1) {
        var eyeLX = width / 2 - faceWidth * 0.25; //black eyes
        var eyeRX = width / 2 + faceWidth * 0.25;
        fill(0);
        ellipse(eyeLX, height / 2, eyeSize, eyeSize);
        ellipse(eyeRX, height / 2, eyeSize, eyeSize);
    }  if(eye==2) { //cresent eyes
        var eyeLX = width / 2 - faceWidth * 0.25;
        var eyeRX = width / 2 + faceWidth * 0.25;
        fill(0)
       arc(eyeLX, height/2, 40, 30, -PI, 0, CHORD);
       arc(eyeRX, height/2, 40, 30, -PI, 0, CHORD);

    } if (eye==3) { //black eyes with sparkles
         var eyeLX = width / 2 - faceWidth * 0.25; 
        var eyeRX = width / 2 + faceWidth * 0.25;
        fill(0); //black eye
        ellipse(eyeLX, height / 2, eyeSize, eyeSize);
        ellipse(eyeRX, height / 2, eyeSize, eyeSize);
        fill(255); // sparkle
        ellipse(eyeLX+4, height / 2, eyeSize/3, eyeSize/3);
        ellipse(eyeRX+4, height / 2, eyeSize/3, eyeSize/3); 
        
    }
///blush
    fill(240, 100, 100, 80);
    circle(eyeLX-20, height / 2 +30, 60);
    circle(eyeRX+20, height / 2+30, 60);
    

}

function mousePressed() {

    face= int(random(1,6))
    nose= int(random(1,3))
    eye = int(random(1,4))
    smile = int(random(1,4))
    haircut = int(random(1,4))

    smileW = random(40,50);
    smileL = random(30,40);

    rectMouthW = random(30,50);
    rectMouthH = random(10,15);

    noseWidth = random(20,35);
    noseHeight = random(40,50);

    r = random(100)
    g = random(100)
    b = random(100)

    nr = random(225, 255); // nose color
    ng = random(100, 250); 
    nb = random(100, 255); 

    faceWidth = random(150, 200);  
    faceHeight = random(150, 200);  
    faceCurve = random (20, 50); // curved chin of face
    eyeSize = random(25, 40); // size of eye

}

Variable Face

I thought it would be interesting to make a face that would display a range of emotions principally through the eyebrows and mouth. I also included variability in the size of and distance between the eyes as a kind of variable cuteness metric.

proj-02



var eyeSize = 20;      // determines the size of the eyes
var faceWidth = 100;   // determines the height of the face
var faceHeight = 150;  // determines the width of the face
var eyeWidth = 0.25;   // determines spacing between eyes
var browRaise = 20;    // determines eyebrow height above eyes
var mood = 10;         // determines eyebrow slant as well as mouth curvature
var moodMod = 3;       // determines the intensity of the mouth curvature

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

function draw() {
    background(180);
    strokeWeight(2 * eyeSize);
    stroke(255);
    ellipse(width / 2, height / 2, faceWidth,  faceHeight); // draws head
    strokeWeight(1);
    stroke(0);
    var eyeLX = width / 2 - faceWidth * eyeWidth - eyeSize / 2;
    var eyeRX = width / 2 + faceWidth * eyeWidth + eyeSize / 2;
    fill(0);
    arc(eyeLX, height / 2, eyeSize, eyeSize / 2, 0, 3); //left eye
    arc(eyeRX, height / 2, eyeSize, eyeSize / 2, 0, 3); //right eye
    fill(255);
    arc(eyeLX, height / 2, eyeSize, eyeSize / 2, .5, 1); //left eye highlight
    arc(eyeRX, height / 2, eyeSize, eyeSize / 2, .5, 1); //right eye highlight
    var browAngle = browRaise + mood;
    line(eyeLX - (eyeSize / 2), height / 2 - browRaise, eyeLX + (eyeSize / 2), height / 2 - browAngle); // Draws left eyebrow
    line(eyeRX + (eyeSize / 2), height / 2 - browRaise, eyeRX - (eyeSize / 2), height / 2 - browAngle); // Draws left eyebrow
    var mouthY = (height / 2) + (faceHeight / 4);
    var mouthShape = mouthY + moodMod * mood;
    curve(50, mouthShape, eyeLX, mouthY, eyeRX, mouthY,  width - 50, mouthShape); // draws mouth
    




}


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.
    faceWidth = random(75, 150);
    faceHeight = random(100, 200);
    eyeSize = random(10, 50);
    eyeWidth = random(.1, .4);
    browRaise = random(10, 30);
    mood = random(-browRaise, browRaise);
    moodMod = random(1, 4);

}

Project 2: Variable faces

sketchYash-variable faces

//Simple beginning template for variable face
var eyeSize = 40;
var faceWidth = 400;
var faceHeight = 400;
var noseWidth = 3;
var mouth = 1;
var hair = 1;
var body = 100;


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

   background (250);

    fill (239, 230, 131); // hands fill
    ellipse (200, 320, 50, 50); // right hand
    ellipse (440, 320, 50, 50); // left hand

    fill (255, 153, 52); // body fill 
    ellipse (width / 2, height / 2 + 100, body, body + 50); // body

    fill (107, 183, 216);

   ellipse(width / 2, height / 2, faceWidth,  faceHeight); // face shape

   fill ( 0, 0, 0 );
   stroke (254, 211, 66);
   strokeWeight (2);

    var eyeLX = (width / 2 - faceWidth * 0.25); 
    var eyeRX = (width / 2 + faceWidth * 0.25);
    ellipse(eyeLX, height / 2, eyeSize, eyeSize);
    ellipse(eyeRX, height / 2, eyeSize, eyeSize);

    stroke ( 0, 0, 0); 
    strokeWeight(1);
    fill( 228, 129, 203 );

   if (mouth < 0.33) { // rect mouth
        rect ( width / 2 - 10, height / 2 + 30, 40, 20 );

   } else if ( mouth < 0.66 ) { // line mouth
        line (( width / 2 - 20 ),( height / 2 +30 ), ( width / 2 + 30 ),( height / 2 +40));

   } else if ( mouth < 1 ) {  // ellipse mouth
        ellipse ( width / 2, height / 2 + 30, faceWidth / 2, faceHeight / 8);

   }

    fill (49, 50, 52);
    strokeWeight (1);

    if (noseWidth <= 1) { // nose 1
        triangle (width / 2, height / 2, width / 2 + 10, height / 2, width / 2 + 5, height / 2 + 10);

    } else if (noseWidth <=2) { // nose 2
        triangle (width / 2 - 5, height / 2  + 3, width / 2 + 8, height / 2 + 1, width / 2 + 3, height / 2 + 16);

    } else if (noseWidth <=3) { // nose 3
        triangle (width / 2 - 5, height / 2 +5, width / 2 + 6, height / 2 + 2, width / 2 + 15, height / 2 + 7); 

    }

    
}

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.
    faceWidth = random(75, 350);
    faceHeight = random(100, 250);
    eyeSize = random(10, 30);
    mouth = random(0,1);
    noseWidth = random(0,3);
    body = random (200, 250);
}

I struggled with understanding how to manipulate variables in a randomized order but I had fun writing this code as it was satisfying to see it actually work at the end.