Category: Project-02-Variable-Face

Project 2: Variable Faces

bob project 2
var faceWidth = 250;
var faceHeight = 250;
var faceColorR = 30;
var faceColorG = 20;
var faceColorB = 80;
var randomEars = 0;
var randomEyes = 0;
var randomNose = 0;
var eyeWidth = 28;
var eyeHeight = 35;
var eyeColorR = 252;
var eyeColorG = 230;
var eyeColorB = 33;


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

function draw() {
    //face
    background(206, 219, 240); //light blue for background
    fill(faceColorR, faceColorG, faceColorB); //color of face
    ellipse(width / 2, height / 2, faceWidth, faceHeight); //face

    //ears (randomly pick ears)
    if (randomEars <= 1){ //round ears
        circle(width/3, height/3, 60); //left round ears
        circle(width - (width/3), height/3, 60); //right round ears

    } else if (randomEars <= 2) { //triangle ears
        triangle(190, 130, 260, 152 , 220, 200); //left triangle ears
        triangle(450, 130, 380, 152, 420, 200); //right triangle ears

    } else { //curved down ears
        beginShape(); //left curved down ears
        curveVertex(200, 210);
        curveVertex(210, 230);
        curveVertex(170, 180);
        curveVertex(270, 137);
        curveVertex(290, 240);
        endShape();

        beginShape(); //right curved down ears
        curveVertex(440, 210);
        curveVertex(430, 230);
        curveVertex(470, 180);
        curveVertex(370, 137);
        curveVertex(350, 240);
        endShape();
    }
    

    //eyes (randomly pick eyes)
    if (randomEyes <= 1){ //round eyes
    fill(eyeColorR, eyeColorG, eyeColorB); //changing eye color
    ellipse(280, 230, eyeWidth, eyeHeight); //left black part of round eyes 
    fill(255, 255, 255);
    ellipse(280, 236, 15, 17); //left white part of round eyes
    fill(eyeColorR, eyeColorG, eyeColorB);
    ellipse(360, 230, eyeWidth, eyeHeight); //right black part of round eyes 
    fill(255, 255, 255);
    ellipse(360, 236, 15, 17); //right white part of round eyes
    
    } else if (randomEyes <= 2){ //line eyes
    fill(0, 0, 0); //black
    rect(260, 230, 30, 5); //left line eyes
    rect(350, 230, 30, 5); //right line eyes
    
    } else { //reptile eyes
    fill(0, 0, 0); //black 
    circle(275, 230, 50); //left black part of reptile eyes
    fill(eyeColorR, eyeColorG, eyeColorB); //changing eye color
    ellipse(275, 230, 5, 50); //left inside part of reptile eyes
    fill(0, 0, 0); //black 
    circle(365, 230, 50); //right black part of reptile eyes
    fill(eyeColorR, eyeColorG, eyeColorB); //changing eye color
    ellipse(365, 230, 5, 50); //right inside part of reptile eyes
    }
    

    //nose (randomly pick nose)
    fill(faceColorR + 50, faceColorG + 35, faceColorB + 10); //nose color slightly darker than face color
    
    if (randomNose <= 1) { //pig snout
    ellipse(width/2, height/2 + 30, 70, 40); //pig snout outside
    ellipse(width/2 -10, height/2 +30, 8, 15); //pig snout left nostril
    ellipse(width/2 +10, height/2 +30, 8, 15); //pig snout right nostril
    
    } else if (randomNose <= 2) { //triangle nose
    triangle(width/2 - 10, height/2 + 30, width/2 + 10, height/2 + 30, width/2, height/2 + 45); //triangle nose
    
    } else { //curvy mouth + whiskers
    fill(faceColorR, faceColorG, faceColorB);
    arc(width/2 - 10, height/2 + 50, 20, 20, 0, radians(200)); //curvy mouth left
    arc(width/2 + 10, height/2 + 50, 20, 20, radians(-20), PI); //curvy mouth right
    fill(0, 0, 0); //black 
    line(240, 270, 180, 240); //left top whisker
    line(400, 270, 460, 240); //right top whisker
    line(240, 275, 175, 275); //left middle whisker
    line(400, 275, 465, 275); //right middle whisker
    line(240, 280, 180, 310); //left bottom whisker
    line(400, 280, 460, 310); //right bottom whisker
    }
  
}

function mousePressed(){
    faceWidth = random(200, 250);
    faceHeight = random(200, 250);
    faceColorR = random(80, 170);
    faceColorG = random(50, 150);
    faceColorB = random(60, 200);
    randomEars = random(0, 3);
    randomEyes = random(0, 3);
    randomNose = random(0, 3);
    eyeWidth = random(20, 35);
    eyeHeight = random(30, 38);
    eyeColorR = random(185, 220);
    eyeColorG = random (190, 235);
    eyeColorB = random (130, 250);
}

The most interesting part of the project was testing out the code and seeing how the facial features change and create unique combinations. However, I did find it a bit challenging and time-consuming to design each of the variations.

Project-02:Variable Face

cody.variable.face
function setup() {
    createCanvas(640, 480);
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);
}
var faceWidth=400
var faceHeight=470
var noseCenter=300
var mouthAngle=0

function draw() {
    background(176, 196, 222);
    ellipse((width/2),(height/2), 400,470);  
    arc((width/2),(height/2+40),410,550,3.14,0) //hair
    arc((width/2),(height/2+40),400,540,3.14,0)
    arc((width/2),(height/2+40),390,530,3.14,0)
    arc((width/2),(height/2+40),390,520,3.14,0)   
    arc((width/2),(height/2+40),390,510,3.14,0)
    arc((width/2),(height/2+40),390,500,3.14,0)
    arc((width/2),(height/2+40),390,490,3.14,0)
    arc((width/2),(height/2+40),390,480,3.14,0)
    arc((width/2),(height/2+40),390,470,3.14,0)
    arc((width/2),(height/2+40),390,460,3.14,0)
    arc((width/2),(height/2+40),390,450,3.14,0)
    arc((width/2),(height/2+40),390,440,3.14,0) //hair line
    ellipse(225,220,80,45) //orbit left
    fill(0)
    ellipse((faceWidth/2+15),220,37,37) //eyeball left
    fill(255)
    ellipse(375,220,80,45) //orbit right
    fill(0)
    ellipse((faceWidth/2+170),220,37,37) //eyeball right
    fill(255,182,193)
    arc((width/2-10),380, 150, 100, (mouthAngle-0.5), (2.5+mouthAngle)) //mouth
    fill(255,192,203)
    triangle(300, 280, (noseCenter), 350, 320, (noseCenter+60)) //nose
    fill(255)
    stroke(72,209,204)
    strokeWeight(6)
    arc(225, 185, 80, 40, 3.2, -0.04) //eyebrow left
    arc(375,185, 80, 40, 3.2, -0.04) //eyebrow right
    arc(130, 280, 50, 60, 1.5, 4.75) //ear left
    arc(500, 280, 50, 60, 4.75, 1.65) //ear left
    
}

function mousePressed(){
    faceWidth=random(360,440)
    noseCenter=random (250,300)
    mouthAngle = random(0,1)
}
noLoop();

The part I like the most is how the eyeballs change randomly.

Project-02-Variable-Face

sketch

var faceWidth =  150;
var faceHeight = 200;
var eyeWidth = 45;
var eyeHeight = 45;
var noseWidth = 7;
var red = random(1,255);
var green = random(1,255);
var blue = random(1,255);
var eyebrowWidth= 15;
var eyebrowHeight= 15;
var mouthHeight=30;





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

function draw() {
  background(220);
  //face size and skin color
  fill(red, green, blue);
  ellipse(width/2, height/2, faceWidth, faceHeight);
  
  
  //eye size
  
  //outer eye
  fill(255,255,255);
  ellipse(width/2 + eyeWidth, height/2 - eyeHeight, faceWidth/6, faceHeight/8);
  ellipse(width/2 - eyeWidth, height/2 - eyeHeight, faceWidth/6, faceHeight/8);
  //cornea
  fill(0,0,0);
  ellipse(width/2 + eyeWidth, height/2 - eyeHeight, faceWidth/15);
  ellipse(width/2 - eyeWidth, height/2 - eyeHeight, faceWidth/15);
  fill(255,255,255);
  rect(width/2 + eyeWidth, height/2 - eyeHeight,4,4);
  rect(width/2 - eyeWidth, height/2 - eyeHeight,4,4);
  
  //mouth and eyebrow
  line(width/2-mouthHeight, height/2+mouthHeight, width/2+mouthHeight, height/2+mouthHeight);
  line(width/2+eyeWidth+eyebrowWidth,height/2-eyeHeight-eyebrowHeight,width/2-eyeWidth-eyebrowWidth,height/2-eyeHeight-eyebrowHeight);
  
  
  //nose
  fill(red, green, blue);
  ellipse(width/2, height/2,faceWidth/5, faceHeight/7);
  fill(0,0,0);
  ellipse(width/2+noseWidth, height/2, faceWidth/20);
  ellipse(width/2-noseWidth, height/2, faceWidth/20);
  
  
}

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(150, 250);
    faceHeight = random(150, 250);
    eyeHeight = random (30,40);
    eyeWidth = random(30,40);
    noseWidth= random(6,8);
    red = random(141,241);
    green = random(125,155);
    blue = random (36,125);
    eyebrowWidth= random(10,20);
    eyebrowHeight= random(20,30);
    mouthHeight = random(30,40);
}

Doing this project was a lot of fun, but it was a little tedious trying to figure out all the measurements. Little sad it came out looking like a pig more than a human but it still looks cute to me!

Project 2: Variable Faces; Face Variables.

lucacao-02-project

var headwidth = 200
var headheight = 250
var eyewidth = 30
var eyeheight = 30
var pupilwidth = 30
var pupilheight = 30
var mouthwidth = 150
var mouthheight = 50
var bodywidth = 300
var bodyheight = 300
var hairhx = 0
var hairhy = 0


function setup() {
    createCanvas(480, 640);
    background(171, 196, 255);
}


function draw() {
    fill(0)
    rect((width-bodywidth)/2,400,bodywidth,bodyheight)//blazer
    fill(255,255,255)
    rect((width-100)/2,400,100,300)//shirt

    fill(252,210,175)
    ellipse(width/2,height/2, headwidth, headheight)//head

    fill(248, 237, 235)
    ellipse(width/2-40,height/2-20,eyewidth,eyeheight)
    ellipse(width/2+40,height/2-20,eyewidth,eyeheight)//eyes

    fill(51, 53, 51)
    ellipse(width/2-40,height/2-20,pupilwidth-20,pupilheight-20)
    ellipse(width/2+40,height/2-20,pupilwidth-20,pupilheight-20)//pupil

    fill(239, 99, 81)
    ellipse(width/2,height/2+70,mouthwidth-100,mouthheight-25)//mouth

    fill(70, 63, 58)
    triangle(width/2-30,200,hairhx+width/2,hairhy+width/2,width/2,195)
    triangle(width/2,195,hairhx+width/2+50,hairhy+width/2,width/2+45,200)
    triangle(width/2-10,197,hairhx+width/2+20,hairhy+width/2,width/2+20,200)//hair


}

function mousePressed() {
    eyewidth=random(30,50)
    eyeheight=random(30,50)
    pupilwidth=random(30,40)
    pupilheight=random(30,40)
    mouthwidth=random(50,150)
    mouthheight=random(25,50)
    hairhx=random(20,50)
    hairhy=random(80,100)
}

After declaring variables (var) in my code, locating and editing the shapes became more intuitive. However, I struggled with assigning values to my variables and understanding the relationship between each variable. Overall, I feel like adding variables helped my coding process a lot, but I still need more practice to become more efficient.

lmattson-02-project

lmattson-02-project
//Luke Mattson
//section A

var w= 600
var h= 480
var headradius= w/3
var eyeRadius= headradius/4
var smileSize=.5
var skinR=255
var skinG=255
var skinB=255
var skin=1



function setup() {
    createCanvas(w, h);

}



function draw() {

    background(128,206,225);    // background
    fill(167,199,231);
    strokeWeight(1);
    stroke(140,170,220);
    triangle(0,0,600,600,0,600);

    //hair based on size of face
    stroke(0);                
    fill(223,180,130);      
    ellipse(w/2,h/2-50,headradius,headradius*1.4);


    //ears attached to face with 3 color possibilities
    if (skin==1) {
        fill(255,219,172)
    } else if (skin==2) {
        fill(224,172,105)
    } else {
        fill(241,194,125)
    }        
    ellipse(w/2-headradius/2,230,30,60);
    ellipse(w/2+headradius/2,230,30,60);


   //random size face with 3 color possibilities
   if (skin==1) {
       fill(255,219,172)
   } else if (skin==2) {
       fill(224,172,105)
   } else {
       fill(241,194,125)
   }
    ellipse(w/2,h/2,headradius,headradius*1.4);

    
    //random size eyes
    fill(245,245,245);          
    stroke(0);
    strokeWeight(1.5);
    circle(w/2-headradius/5,h/2-headradius/5,eyeRadius)
    circle(w/2+headradius/5,h/2-headradius/5,eyeRadius)
    fill(0,0,200,30);
    circle(w/2-headradius/5,h/2-headradius/5,eyeRadius/3)
    circle(w/2+headradius/5,h/2-headradius/5,eyeRadius/3)


    //random size mouth
    stroke(249,21,21)
    strokeWeight(1)
    fill(255,127,127) 
    arc(w/2,headradius/5+h/2,150,80, smileSize, PI, OPEN)

    //nose
    stroke(0)
    strokeWeight(.5)
    line(300,240,290,275);      
    line(310, 280,290, 275);
    //body attached to bottom of face
    var bodyx = w/2     
    var bodyy = h/2 + .5*(headradius*1.4)
    stroke(255,255,255);        
    strokeWeight(1.5)
    line(bodyx,bodyy, bodyx, bodyy+40);
    line(bodyx,bodyy+40,bodyx+10,bodyy+50)
    line(bodyx,bodyy+40,bodyx-10,bodyy+50);
    line(bodyx,bodyy+20,bodyx+10,bodyy+10)
    line(bodyx,bodyy+20,bodyx-10,bodyy+10)
   
}

    //assign random variables
function mousePressed() {       
    headradius= random(.4,.7)*h
    eyeRadius= random(headradius/8,headradius/4)
    skin = int(random(0,3))
    smileSize=random(0,1)
       
}

Project-02: Variable Faces; Face Variables.

sketch
// Simple beginning template for variable face.
var eyeSize = 20;
var faceWidth = 100;
var faceHeight = 150;
var noseWidth = 20
var noseHeight = 50;
var earSize = 20;
var hairStyle = 2;
var hairSize = 20;
var browSize = 10;

//colors
var faceR = 100;
var faceG = 150;
var faceB = 200;
var noseR = 100;
var noseG = 100;
var noseB = 100;

//

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

function draw() {
    //face
    background(180);
    noStroke();
    fill(faceR, faceG, faceB);
    ellipse(width / 2, height / 2, faceWidth,  faceHeight); 

    //ears
    ellipse(((width / 2) - (faceWidth / 2)), (height / 2), earSize, earSize + 10);
    ellipse(((width / 2) + (faceWidth / 2)), (height / 2), earSize, earSize + 10);


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

    //nose
    fill(noseR, noseG, noseB);
    triangle((width / 2), (height / 2), (width / 2 - 10) , (height / 2 + 10), (width / 2 + 10), (height / 2 + 10));

    //hair
    ellipse(width / 2, ((height / 2) - (faceHeight / 2) + 10), 60, 30);
    if (hairStyle > 1){
         ellipse((width / 2), ((height / 2) - (faceHeight / 2)), hairSize, hairSize);
       
    } else {
        ellipse((width / 2 - 30), ((height / 2) - (faceHeight / 2)), hairSize, hairSize);
        ellipse((width / 2 + 30), ((height / 2) - (faceHeight / 2)), hairSize, hairSize);
    }

    //brow
    rect(eyeLX - 15, height / 2 - 30, 30, browSize);
    rect(eyeRX - 15, height / 2 - 30, 30, browSize);


}

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.
    //color
    faceR = random(0, 256);
    faceG = random(0, 256);
    faceB = random(0, 256);

    noseR = random(0, 256);
    noseG = random(0, 256);
    noseB = random(0, 256);

    faceWidth = random(75, 150);
    faceHeight = random(100, 200);
    eyeSize = random(10, 20);
    earSize = random(20, 40);
    noseWidth = random(10, 20);
    noseHeight = random(40, 60);
    hairSize = random(30, 70);
    hairStyle = random(0, 2);
    console.log(hairStyle);
    browSize = random(10, 20);


}

Project-02: Variable Faces; Face Variables

sketch
var eyeSize = 20;
var faceWidth = 100;
var faceHeight = 150;
var facecolorR = 30;
var facecolorG = 60;
var facecolorB = 120;
var noseA = 30;
var noseB= 20;
var mouth = 40;
var mouthWidth= 20
var mouthHeight= 60
var eyebrowWidth = 50
var eyebrowHeight = 30
var eyecolorR = 70
var eyecolorG = 90
var eyecolorB = 240
function setup() {
    createCanvas(300, 300);
}
 
function draw() {
    background(180);
    fill (facecolorR,facecolorG,facecolorB);
    ellipse(width / 2, height / 2, faceWidth,  faceHeight);
    fill (eyecolorR, eyecolorG, eyecolorB);
    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);
    triangle(width/2,height/2,140,170,160,170); 
    //i could not get the nose to change without making it pinocchio 
    ellipse(width/2,190,mouthWidth,mouthHeight);
    rect(115,120,eyebrowWidth, eyebrowHeight);
    rect(170,120,eyebrowWidth, eyebrowHeight);

}

 
function mousePressed() {
    faceWidth = random(75, 150);
    faceHeight = random(100, 200);
    eyeSize = random(10, 30);
    facecolorR = random(5,10,40);
    facecolorG = random(300,10,2);
    facecolorB = random(50,250,20);
    mouthWidth = random (12,20);
    mouthHeight = random (0,20);
    noseA = random(140,180);
    NoseB = random(140,170);
    eyebrowWidth = random(10,20);
    eyebrowHeight = random(2,8);
    eyecolorR= random(0,300);
    eyecolorG= random(20,300);
    eyecolorB= random(4,200);

}

Variable Faces

sketchfile

var eyeSize = 20;
var pupilSize = 10;
var faceWidth = 100;
var faceHeight = 150;
var earSize = 30;
var eyeColor = 0;
var hairHeight = 300;
var hairWidth = 200;
var mouth = 1;

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

function draw() {
    background(150,50,25);
    fill(100);
    ellipse (width / 2, height / 2, hairWidth, hairHeight);
    fill(255,200,162);
    var earRX = (width / 2.1) + (faceWidth * .625);
    var earLX = (width / 1.9) - (faceWidth * .625);
    ellipse(earRX, height/2, earSize, earSize);
    ellipse(earLX, height /2, earSize, earSize);
    ellipse(width / 2, height / 2, faceWidth, faceHeight);
    fill(100)
    arc(width / 2, height / 2.1, hairWidth, hairHeight, PI, 0); //bangs
    fill(eyeColor);
    var eyeLX = width / 2 - faceWidth * 0.25;
    var eyeRX = width / 2 + faceWidth * 0.25;
    noFill();
    strokeWeight(2);
    arc(width / 2, height / 1.9, faceWidth / 4, faceHeight / 4, 0, PI); //nose
    if (faceHeight <= 150){ // mouth 1
        arc(width / 2, height / 1.8 , faceWidth /3.5 * 2, faceHeight / 5 , 0, PI);
    } else if (faceHeight <= 170){ //mouth 2
        arc(width / 2, height / 1.7, faceWidth /3.5 * 2.2, faceHeight / 5 , PI, 0);
    } else { //mouth 3
        line(220, height / 1.7, 240, height / 1.7);
     }
    fill(eyeColor);
    ellipse(eyeLX, height / 2, eyeSize, eyeSize);
    ellipse(eyeRX, height / 2, eyeSize, eyeSize);
    fill(0);
    ellipse(eyeLX, height / 2, pupilSize, pupilSize);
    ellipse(eyeRX, height / 2, pupilSize, pupilSize);
     if(hairHeight <faceHeight){ //for no bald head
    hairHeight = 250};
}

function mousePressed() {
    faceWidth = random(75, 150);
    faceHeight = random(100, 200);
    eyeSize = random(10, 30);
    pupilSize = random(5, 15);
    earSize = random(20, 30);
    eyeColor = random(0, 255, 0, 255, 0, 255);
    hairWidth = random(150, 225);
    hairHeight = random(125, 225);
    mouth = random(0.1);
}

This project was a lot easier for me than the last. I however, spent a lot of time stuck on my if else statements due to a }. Regardless, I made a changing face with eyes that turn different shades of grey and has different smiles. My person kinda looks like an old lady to me.

Project 02: Variable Face

With each click, the eyes are changed randomly. If the mouse is pressed, the facial expression changes, the arms move up and down, and the character switches between wearing different hats. When the pink button, blue button, or yellow sun button are clicked, either blushing circles, tear tracks, or yellow polka dots will appear.

sketch

//Alana Wu
//Section C


 var faceWidth = 120;
 var eyeLength = 20;
 var x = 200;
 var y = 250;
 var eyeThickness = 5; //for changing eye thickness
 var randomEars = 1; //for changing hat/ears
 var randomSun = 10; //for changing yellow polka dot locations

function setup() {
    createCanvas(640, 480);
}
 
function draw()
{
    background (51, 0, 102);

//if mouse is pressed on yellow sun, yellow polka dots appear
    if (mouseIsPressed & mouseX > .7 * width && mouseX < .9 * width
        && mouseY > .1*height && mouseY < .3*height) 
    {
        fill (255, 255, 0)
        strokeWeight(0);
        ellipse (randomSun, randomSun*10, faceWidth/2, faceWidth/2);
        ellipse (x + randomSun*4, randomSun*2, faceWidth/4, faceWidth/4);
        ellipse (randomSun*20, randomSun*6, faceWidth/5, faceWidth/5);
        ellipse (randomSun*7, y + randomSun*4, faceWidth/3, faceWidth/3);
        ellipse (randomSun*12, y +randomSun*6, faceWidth/4, faceWidth/4);
        ellipse (x + randomSun*3, randomSun*2.7, faceWidth/6, faceWidth/6);
        ellipse (randomSun*2.2, y +randomSun*5.7, faceWidth/7, faceWidth/7);
        ellipse (randomSun*6, y +randomSun*10, faceWidth/2, faceWidth/2);
        ellipse (randomSun*12, y +randomSun*12, faceWidth/3, faceWidth/3);
        ellipse (randomSun*20, y - randomSun*8, faceWidth/4, faceWidth/4);
        ellipse (randomSun*32, y +randomSun*11, faceWidth/4, faceWidth/4);
        ellipse (randomSun*28, y -randomSun*6, faceWidth/3, faceWidth/3);
        ellipse (randomSun*38, y +randomSun*5, faceWidth/2, faceWidth/2);
        ellipse (randomSun*35, y -randomSun*3, faceWidth/4, faceWidth/4);
    }

//blush button
    strokeWeight (0);
    fill (255, 0, 127);
    rect (15, 15, 70, 40);

//draws blue tear shape button
    fill (0, 0, 255);
    beginShape();
    curveVertex(50, 100);
    curveVertex(50, 100);
    curveVertex(25, 150);
    curveVertex(50, 175);
    curveVertex(75, 150);
    curveVertex(50, 100);
    curveVertex(75, 150);
    curveVertex(50, 100);
    endShape();

//draws sun
    fill (255, 255, 0);
    ellipse (.8*width, .2*height, width/5, width/5);
    strokeWeight(8);
    stroke(255, 255, 0);
    line ( .8*width, .2*height, .8*width + width/6, .2*height);
    line ( .8*width, .2*height, .8*width, .2*height + width/6);
    line ( .8*width, .2*height, .8*width, .2*height - width/6);
    line ( .8*width, .2*height, .8*width - width/6, .2*height);
    line ( .8*width, .2*height, .8*width + width/8, .2*height - width/8);
    line ( .8*width, .2*height, .8*width - width/8, .2*height - width/8);
    line ( .8*width, .2*height, .8*width + width/8, .2*height + width/8);
    line ( .8*width, .2*height, .8*width - width/8, .2*height + width/8);
    fill (255);
    strokeWeight (0);
    ellipse (x, y, faceWidth, faceWidth); //draws head shape

    strokeWeight (eyeThickness); //thickness of eye line
    stroke(0);
    line (x - faceWidth/5, y - faceWidth/5,
    x - faceWidth/5, y - faceWidth/4 + eyeLength); //draws left eye line
    line (x + faceWidth/5, y - faceWidth/5,
    x + faceWidth/5, y - faceWidth/4 + eyeLength); //draws right eye line


//draws body
    strokeWeight(5);
    stroke(255);
    fill (255);
    line (x - faceWidth/5, y + faceWidth/2, x - faceWidth/3, y + faceWidth);
    line (x + faceWidth/5, y + faceWidth/2, x + faceWidth/3, y + faceWidth);
    line (x - faceWidth/3, y + faceWidth, x + faceWidth/3, y + faceWidth);
//draw legs 
    line (x - faceWidth/5, y + faceWidth, x - faceWidth/5, y + 1.3*faceWidth);
    line (x + faceWidth/5, y + faceWidth, x + faceWidth/5, y + 1.3*faceWidth);
//draw feet 
    line (x - faceWidth/5, y + 1.3*faceWidth, x - faceWidth/3, y + 1.3*faceWidth);
    line (x + faceWidth/5, y + 1.3*faceWidth, x + faceWidth/3, y + 1.3*faceWidth);

//when mouseispressed, arms are lowered
    if (mouseIsPressed)
    {
        line (x - faceWidth/4, y + .6*faceWidth, x - faceWidth/2, y + faceWidth);
        line (x + faceWidth/4, y + .6*faceWidth, x + faceWidth/2, y + faceWidth);
        stroke(0);
        ellipse (x, y + faceWidth/7, faceWidth/4, faceWidth/4);
    }
//when mouse isn't pressed, arms are raised 
   else
    {
        line (x - faceWidth/4, y + .6*faceWidth, x - faceWidth, y - faceWidth/4);
        line (x + faceWidth/4, y + .6*faceWidth, x + faceWidth, y - faceWidth/4);
        stroke (0);
        line (x + faceWidth/5, y + faceWidth/7, x - faceWidth/5, y + faceWidth/7);
    }


//blush spots appear when you click "blush" button
    if (mouseIsPressed & mouseX > 15 && mouseX < 85 && mouseY > 15 && mouseY < 55)
    {
        strokeWeight (0);
        fill (255, 0, 127);
        ellipse (x + faceWidth/3, y + faceWidth/10, faceWidth/6, faceWidth/6);
        ellipse (x - faceWidth/3, y + faceWidth/10, faceWidth/6, faceWidth/6);
    }

// draws blue tear lines under eyes when blue teardrop is clicked
    if (mouseIsPressed & mouseX > 25 && mouseX < 75 && mouseY > 100 && mouseY < 175)
    {
        stroke (0, 0, 255);
        strokeWeight(8);
        line (x - faceWidth/5, 1.02*y, x - faceWidth/5, y + faceWidth/2);
        line (x + faceWidth/5, 1.02*y, x + faceWidth/5, y + faceWidth/2);
        strokeWeight (0);

    }

//depending on random number generated, either panda ears, a cone hat, or a top hat appears
    if (randomEars <= 1) //draws panda ears
    {
        fill (0);
        ellipse (x - faceWidth/2, y - faceWidth/2, faceWidth/2, faceWidth/2);
        ellipse (x + faceWidth/2, y - faceWidth/2, faceWidth/2, faceWidth/2);
        fill (255);
        ellipse (x - faceWidth/2, y - faceWidth/2, faceWidth/4, faceWidth/4);
        ellipse (x + faceWidth/2, y - faceWidth/2, faceWidth/4, faceWidth/4);
    }
    else if (randomEars <= 2) //draws red top hat w/ black and white buckle
    {
        strokeWeight (0);
        fill (255, 0, 0);
        rect (x - faceWidth/2, y - .6*faceWidth, faceWidth, faceWidth/4);
        rect (x - faceWidth/4, y - faceWidth, faceWidth/2, faceWidth/2);
        fill (0);
        rect (x - faceWidth/5, y - .58*faceWidth, faceWidth/2.5, faceWidth/5.5);
        fill (255);
        rect (x - faceWidth/9.5, y - .55*faceWidth, faceWidth/5, faceWidth/8);
    }
    else if (randomEars <= 3) //draws pink cone hat
    {
        strokeWeight(0);
        fill (255, 0, 127);
        triangle (x, y - 1.2*faceWidth, x - faceWidth/2.5, y - faceWidth/3, x + faceWidth/2.5, y - faceWidth/3);
        fill (255);
        ellipse (x, y - 1.2*faceWidth, faceWidth/4, faceWidth/4);
    }   
}


function mousePressed ()
{
    //when user clicks, these variables are reassigned to random values w/n specific ranges
    eyeLength = random (8, 25);
    eyeThickness = random (5, 12);
    randomEars = random (0, 3);
    randomSun = random (5, width/10);

}

Project 2: Variable Face

sketch
//Anthony Pan
//Section C
//Simple beginning template for variable face.
var eyeSize = 20;
var faceWidth = 100;
var faceHeight = 150;
var nose1 = 140;
var nose2 = 180;
var nose3 = 150;
var nose4 = 165;
var nose5 = 155;
var nose6 = 170;
var mouth = 1;
var hair = 1;
var color = 1;

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

function draw() {
    background(180);
    if (hair < 0.33){
        //hair middle
        line(width/2, height/2, width/2, height/2 - 2/3*faceHeight);
    }if (hair < 0.66){
        //hair right
        curve(width/2, height/2, width/2 + 25, height/2 - 1/3*faceHeight,
         width/2 + 50, height/2 - 1/2*faceHeight, width/2 + 75, height/2 - 3/4*faceHeight);
    }if (hair < 1){
        //hair left
        curve(width/2, height/2, width/2 - 25, height/2 - 1/3*faceHeight, 
        width/2 - 50, height/2 - 1/2*faceHeight, width/2 - 75, height/2 - 3/4*faceHeight);
    }
    if (color < 0.25){
        //pastel red face
        fill(235,136,129);
    }else if(color < 0.5){
        //pastel blue face
        fill(129, 219, 235);
    }else if (color < 0.75){
        //pastel green face
        fill(181, 245, 176);
    }else{
        //white face
        fill(255,255,255);
    }
    ellipse(width / 2, height / 2, faceWidth,  faceHeight);
    var eyeLX = width / 2 - faceWidth * 0.25;
    var eyeRX = width / 2 + faceWidth * 0.25;
    fill(255,255,255); //keeps features white
    ellipse(eyeLX, height / 2, eyeSize, eyeSize);
    ellipse(eyeRX, height / 2, eyeSize, eyeSize);
    if (mouth < 0.33){ 
        //happy mouth
        arc(150, 180, 20, 20, 0, PI + QUARTER_PI, CHORD);
    }else if (mouth < 0.66) {
        //sad mouth
        noFill(); //keeps mouth white
        curve(130, 200, 145, 185, 160, 185, 175, 200);
    }else {
        //neutral mouth
        line(140, 190, 170, 190);
    }
    fill(255,255,255); // keeps nose white
    triangle(nose1, nose2, nose3, nose4, nose5, nose6); //triangular nose with random coordinates

    

}

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);
    nose1 = random(145, 150);
    nose2 = random(180, 190);
    nose3 = random(150, 155);
    nose4 = random(165, 170);
    nose5 = random(155, 160);
    nose6 = random(170, 180);
    mouth = random(0,1);
    hair = random(0,1);
    color = random(0,1);
    console.log(mouth);




}