Project-02-Variable-Face

var faceWidth = 400;
var faceHeight = 270;
var awidth = 640; // width as a variable that can change
var aheight = 480; //height as a variable that can change
var eyeposition = 20;
var eyepositionn = 10;
var mouthheight = 300; //original position of 
var mouthemotion = 1;
var sidefacewidth = 270;
var sidefaceheight = 400;
var definetheface = 1
var topfence = 0

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

//coding for first condition starts
    

    if (0<definetheface & definetheface<1){ //first*condition
    background(242,85,0);
    fill(35, 89, 41);
    rect(50,50, 550, 380);
    fill(255,234,117);//face color
    strokeWeight(1);
    ellipse(width / 2, height / 2, faceWidth,  faceHeight);
    var eyeLX = width / 2 - faceWidth * 0.2;
    var eyeRX = width / 2 + faceWidth * 0.2;

    beginShape();
    noFill();
    strokeWeight(2); 
    curveVertex(eyeLX - eyeposition, aheight/2 - eyepositionn);
    curveVertex(eyeLX - eyepositionn , aheight / 2 - eyepositionn);
    curveVertex(eyeLX, aheight / 2);
    curveVertex(eyeLX - 2* eyepositionn , aheight /2 - eyepositionn);
    curveVertex(eyeLX - 2* eyeposition, aheight /2 - eyeposition);
    endShape();

    beginShape();
    noFill();
    strokeWeight(2); 
    curveVertex(eyeRX - eyeposition, aheight/2 - eyepositionn);
    curveVertex(eyeRX - eyepositionn , aheight / 2 - eyepositionn);
    curveVertex(eyeRX, aheight / 2);
    curveVertex(eyeRX - 2* eyepositionn , aheight /2 - eyepositionn);
    curveVertex(eyeRX - 2*  eyeposition, aheight /2 - eyeposition);
    endShape();

    fill(0);
    strokeWeight(1);
    ellipse(width / 2, height / 2, eyeposition,  eyepositionn);

    if(0 < mouthemotion & mouthemotion < 1){
        arc(width/2, mouthheight, 100, 50, 1*Math.PI, 0*Math.PI, CHORD);
    } else if (1 < mouthemotion & mouthemotion < 2){
        arc(width/2, mouthheight, 100, 50, 0*Math.PI, 1*Math.PI, CHORD); 
    } else if (2 < mouthemotion & mouthemotion <3){
         arc(width/2, mouthheight, 100, 50, 0*Math.PI, 0*Math.PI, CHORD);
    }
    //heart
    fill(255,0,0);
    strokeWeight(1);
    arc(100, 100, 20, 20, PI, 0);
    arc(120, 100, 20, 20, PI, 0);
    triangle(90, 100, 130, 100, 110, 130);

    arc(500,200,20,20, PI, 0);
    arc(520,200, 20, 20, PI, 0);
    triangle(490, 200, 530, 200, 510, 230);

    strokeWeight(1);
    fill(255,0,0);
    rect(mouseX, mouseY, 50,50)
    fill(0,0,230);
    beginShape();
    vertex(mouseX,mouseY);
    vertex(mouseX+10,mouseY-30);
    vertex(mouseX+25,mouseY-0);
    vertex(mouseX+40,mouseY-40);
    vertex(mouseX+50,mouseY-0);
    endShape(CLOSE);
    
    


 //coding for second condition starts

    }else if (1<definetheface & definetheface<2){ //second*condition
         background(255,0,106);//background color
         fill(0,255,0);
         ellipse(mouseX, mouseY, 40, 40);
           fill(0,0,255);
            strokeWeight(0);
            circle(0,0,50);
            circle(50,0,50);
            circle(100,0,50);
            circle(150,0,50);
            circle(200,0,50);
            circle(250,0,50);
            circle(300,0,50);
            circle(350,0,50);
            circle(400,0,50);
            circle(450,0,50);
            circle(500,0,50);
            circle(550,0,50);
            circle(600,0,50);
            circle(650,0,50);

         fill(255); //color of the face
         strokeWeight(1);
         ellipse(width / 2, height / 2, sidefacewidth, sidefaceheight);
         strokeWeight(2); //stoke of eye
         if(mouthemotion<1.5){
            line(250, 150, 280, 160);
            line(280, 160, 250, 170);
        }else{
            line(260, 150, 230, 160);
            line(230, 160, 260, 170);
        }
         fill(0); //color of the nose
            ellipse(width/2 - sidefacewidth*0.5, height/2-sidefaceheight*0.1, sidefacewidth/5, sidefaceheight/7);
        if(0 < mouthemotion & mouthemotion < 1){
            arc((width/2-sidefacewidth/2)+10, mouthheight, 100, 50, 0*Math.PI, 0.5*Math.PI, CHORD);
        } else if (1 < mouthemotion & mouthemotion < 2){
            arc((width/2-sidefacewidth/2)+10, mouthheight, 100, 50, 1.2*Math.PI, 0.6*Math.PI, CHORD); 
        } else if (2 < mouthemotion & mouthemotion <3){
            arc((width/2-sidefacewidth/2)+10, mouthheight, 70, 30, 0.5*Math.PI, 1.5*Math.PI, CHORD);
            arc((width/2-sidefacewidth/2)+10, mouthheight+20, 70, 30, 0.5*Math.PI, 1.5*Math.PI, CHORD);
        }
        fill(0,255,0);
         ellipse(mouseX, mouseY, 40, 40);
// coding for third condition starts 

    }else{ // third*condition
        background(180);
        strokeWeight(2);
        fill(0,255,0);
        //clover
        circle(mouseX, mouseY, 30);
        circle(mouseX+30, mouseY, 30);
        circle(mouseX+15, mouseY-27,30)
        noFill();
        arc(mouseX-20, mouseY, 70,70, 0*Math.PI, 0.5*Math.PI);

        fill(255,77,0);
        strokeWeight(0);
        rect(0,0,30,480);
        rect(610,-30,30, 480);


        fill(187,240,252);//color of face
        strokeWeight(1);
        ellipse(width/2-sidefaceheight/2, height/2,50); //ear left
        ellipse(640-(width/2-sidefaceheight/2),height/2,50); // ear right
        ellipse(width/2, height/2, sidefaceheight, sidefaceheight);

        fill(0);
        ellipse (width/2 - sidefaceheight*0.2, 100, 20, 10); //left eye
        ellipse (width/2 + sidefaceheight*0.2, 100, 20, 10); //rught eye
        ellipse (width/2, height/2 - sidefaceheight*0.5, 10,10); //nose
        

        fill(0);
        if(0 < mouthemotion & mouthemotion < 1){
            arc(width/2, height/2, sidefaceheight, sidefaceheight, 0*Math.PI, 1*Math.PI);
        } else if (1 < mouthemotion & mouthemotion < 2){
            arc(width/2, height/2, sidefaceheight, sidefaceheight, 0.25*Math.PI, 0.75*Math.PI);
        } else if (2 < mouthemotion & mouthemotion <3){
            arc(width/2, height/2, sidefaceheight, sidefaceheight, 1.75*Math.PI, 1.25*Math.PI);
        }
        
        strokeWeight(2);
        fill(0,255,0);
        circle(mouseX, mouseY, 30);
        circle(mouseX+30, mouseY, 30);
        circle(mouseX+15, mouseY-27,30)
        noFill();
        arc(mouseX-20, mouseY, 70,70, 0*Math.PI, 0.5*Math.PI);

    }
}

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(350, 450);
    faceHeight = random(250, 290);
    eyeposition = random (20,30);
    eyepositionn = random (10,15);
    aheight = random(300,500);
    mouthemotion = random (0,3);
    definetheface = random (0,3);
    sidefacewidth = random (250,300);
    sidefaceheight = random (380,470);
}

Project 2: Variable Faces

sketch Download

var eyeSize = 35;
var faceWidth = 250;
var faceHeight = 290;
var face = 1; //1 = happy, 2 = surprised, 3 = sad

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

function draw() {
    background(200);
    strokeWeight(0);
    fill(231, 198, 142);
    ellipse(width/2, height/2, faceWidth, faceHeight);
    var eyeLX = width / 2 - faceWidth * 0.25;
    var eyeRX = width / 2 + faceWidth * 0.25;
    var pupilLX = width / 2 - faceWidth * 0.25;
    var pupilRX = width / 2 + faceWidth * 0.25
    var noseLx = width / 2 - faceWidth * 0.15;
    var noseRx = width / 2 + faceWidth * 0.15;
    var nosey = height / 2 + faceWidth * 0.25;
    var cheekL = width / 2 - faceWidth * 0.3;
    var cheekR = width / 2 + faceWidth * 0.3;
    var hairL = width / 2 - faceWidth * 0.75;
    var hairR = width / 2 + faceWidth * 0.45;
    var earLx = hairL + faceWidth * 0.27; 
    var earLy = height / 2;
    var earRx = hairL + faceWidth * 1.23;
    var earRy = height / 2;
    fill(250); //left eye
    ellipse(pupilLX, height / 2.1, eyeSize * 1.7, eyeSize);
    fill(250); //right eye
    ellipse(pupilRX, height / 2.1, eyeSize * 1.7, eyeSize);
    fill(0); //left eye
    ellipse(eyeLX, height / 2.1, eyeSize, eyeSize);
    fill(0); //right eye
    ellipse(eyeRX, height / 2.1, eyeSize, eyeSize);
    fill(202, 176, 131); //nose
    triangle(width / 2, height / 2 - faceWidth * 0.1, noseLx, nosey, noseRx, nosey);
    if (face == 1 || face == 2) {
        fill(250, 148, 178); //cheeks
        ellipse(cheekL, height / 1.8, eyeSize * 1.4, eyeSize * 1.4);
        ellipse(cheekR, height / 1.8, eyeSize * 1.4, eyeSize *1.4);
    } else {
        fill(95, 175, 211); //tears
        ellipse(cheekL, height / 1.8, eyeSize * 0.5, eyeSize * 1.4);
        ellipse(cheekR, height / 1.8, eyeSize * 0.5, eyeSize *1.4);
    }  
    fill(77, 48, 26); //hair
    rect(hairL, height/3.5, faceWidth * 0.3, faceHeight * 1.3);
    rect(hairR, height/3.5, faceWidth * 0.3, faceHeight * 1.3);
    rect(hairL, height/3.8, faceWidth * 1.5, faceHeight * 0.3);
    fill(231, 198, 142); //ears
    ellipse(earLx, earLy, faceWidth * 0.1, faceHeight * 0.15);
    ellipse(earRx, earRy, faceWidth * 0.1, faceHeight * 0.15);
    if (face == 1) {
        fill(250, 148, 178); //mouth
        arc(width / 2, height / 2 + faceWidth * 0.35, 120, 70, 2 * PI, PI, OPEN);
    } else if (face == 2) {
        fill(250, 148, 178); //mouth
        ellipse(width/2, height /2 + faceWidth * 0.4, eyeSize * 2, eyeSize * 1.4);
    } else {
        fill(250, 148, 178); //mouth
        arc(width / 2, height / 2 + faceWidth * 0.45, 120, 70, PI, 2 * PI, OPEN);
    }
}

function mousePressed() {
    if (face == 1) {
        face = 2;
    } else if (face == 2) {
        face = 3;
    } else {
        face = 1;
    }
}

I really enjoyed making this because it was the first time using variables and the mousepressed function. I was really satisfied when I got the function to work.

Project 02: Variable Faces; Face Variables

sketch

//Julianna Bolivar, Section D
var eyeSize = 20;
var pupilSize = 10;
var faceWidth = 100;
var faceHeight = 150;
var skinTone = 1;
var mouth = 1;
var nose = 1;

function setup() {
    createCanvas(300, 300);
}
 
function draw() {
    background(180);
    if (skinTone <= 1) {
        fill(230,204,178); //light skin tone
    } 
    else if (skinTone <= 2) {
        fill(221,184,146); //beige skin tone
    } 
    else if (skinTone <= 3) {
        fill(189,143,107); //tan skin tone
    } 
    else if (skinTone <= 4) {
        fill(156,102,68); //medium skin tone
    } 
    else if (skinTone <= 5) {
        fill(127,85,57); //dark skin tone
    } 
    else {
        fill(80,57,43); //deep skin tone
    }
    ellipse(width / 2, height / 2, faceWidth, faceHeight); //head shape
    var eyeLX = width / 2 - faceWidth * 0.25; //left eye size
    var eyeRX = width / 2 + faceWidth * 0.25; //right eye size
    fill(255);
    ellipse(eyeLX, height / 2, eyeSize, eyeSize); //left eye
    ellipse(eyeRX, height / 2, eyeSize, eyeSize); //right eye
    if (mouth <= 1) {
        line(140,180,160,180); //small mouth
    } 
    else if (mouth <= 2) {
        line(125,180,175,180); //medium mouth
    } 
    else {
        line(115,180,185,180); //big mouth
    }
    fill(229,135,118); //pink for nose
    if (nose <= 1) {
        circle(width / 2, 160, 18); //circle nose
    }
    else if (nose <= 2) {
        square(143, 155, 13.5); //square nose
    } else {
        triangle(150, 150, 143, 165, 157, 165); //triangle nose
    }
    fill(0,0,0); //black pupils
    ellipse(eyeLX, height / 2, pupilSize, pupilSize); //left pupil
    ellipse(eyeRX, height / 2, pupilSize, pupilSize); //right pupil

}
 
function mousePressed() {
    faceWidth = random(75, 150);
    faceHeight = random(100, 200);
    eyeSize = random(10, 30);
    skinTone = random (0,6);
    mouth = random (0,3);
    nose = random (0,3);
}

Project 2 – Variable Faces

var c = 0.1;
var x;
var y;
var r = 100;

function setup() {
    createCanvas(420, 400);
    background(220);
}

function draw() {

  x = width / 2;
  y = height / 2;

  //filled head
  noStroke();
  fill(255,226,226);
  ellipse(x+20,y-20,2*r);

  //hair
  stroke(100);
  strokeWeight(35);
  line(((x-r/3)+5),(y-r-5),((x+2*r/3)+5), (y-r-5));
  stroke(40);
  line((x-r/3),(y-r),(x+2*r/3),(y-r));

  //outline head
  noFill();
  strokeWeight(10);
  stroke(230, 168,168);
  ellipse(x, y, 2*r);

  //earrings
  fill(182);
  noStroke();
  ellipse(x-(r+10),y-40,15);
  ellipse(x-(r+6),y+10,15);

  stroke(230, 168,168);
  strokeWeight(6);
  noFill();
  arc(x-(r/2),y-(r/2), 15,15,0, PI);
  arc(x+(r/3),y-(r/2), 15,15,0, PI);
  arc(x-r/6,y+(r/3), 30,15,PI/6, PI-PI/6);

  noLoop()
}

function mousePressed(){
    c = random(7);
    print(c.toString())

    if (c < 1) {
        background(220);
        //filled head
        noStroke();
        fill(255,226,226);
        ellipse(x+20,y-20,2*r);
        print("face1")

        //hair
        stroke(100);
        strokeWeight(35);
        line(((x-r/3)+5),(y-r-5),((x+2*r/3)+5), (y-r-5));
        stroke(40);
        line((x-r/3),(y-r),(x+2*r/3),(y-r));

        //outline head
        noFill();
        strokeWeight(10);
        stroke(230, 168,168);
        ellipse(x, y, 2*r);

        //earrings
        fill(182);
        noStroke();
        ellipse(x-(r+10),y-40,15);
        ellipse(x-(r+6),y+10,15);

        //face
        stroke(230, 168,168);
        strokeWeight(6);
        noFill();
        ellipse(x-(r/2),y-(r/2), 15, 15);
        ellipse(x+(r/3),y-(r/2), 15, 15);
        ellipse(x-r/6,y+(r/3), 30, 30);
    }
  else if (c > 1 & c < 2) {
      background(220);
      //filled head
      noStroke();
      fill(255,226,226);
      ellipse(x+20,y-20,2*r);

      //hair
      stroke(100);
      strokeWeight(35);
      line(((x-r/3)+5),(y-r-5),((x+2*r/3)+5), (y-r-5));
      stroke(40);
      line((x-r/3),(y-r),(x+2*r/3),(y-r));

      //outline head
      noFill();
      strokeWeight(10);
      stroke(230, 168,168);
      ellipse(x, y, 2*r);

      //earrings
      fill(182);
      noStroke();
      ellipse(x-(r+10),y-40,15);
      ellipse(x-(r+6),y+10,15);

      print("face2")
      stroke(230, 168,168);
      strokeWeight(6);
      noFill();
      ellipse(x-(r/2),y-(r/2), 15, 15);
      ellipse(x+(r/3),y-(r/2), 15, 15);
      arc(x-r/6,y+(r/3), 30,15, PI+PI/6, 0-PI/6);
      stroke(40);
      strokeWeight(12);
      line(x-(r/2),y-(r/2)-15/2-15, x-(r/2)+15/2+10, y-(r/2)-10);
      line(x+(r/3),y-(r/2)-15/2-15, x+(r/3)-15/2-10,y-(r/2)-10);
  }
  else if(c > 2 & c < 3){
      background(220);

      //filled head
      noStroke();
      fill(255,226,226);
      ellipse(x-20,y-20,2*r);

      //hair
      stroke(100);
      strokeWeight(35);
      line(((x-r/3)+5)-80,(y-r-5)+40,((x+2*r/3)+5)-80, (y-r-5)-20);
      stroke(40);
      line((x-r/3)-80,(y-r)+40,(x+2*r/3)-80,(y-r)-20);

      //outline head
      noFill();
      strokeWeight(10);
      stroke(230, 168,168);
      ellipse(x, y, 2*r);

      //earrings
      fill(182);
      noStroke();
      ellipse(x-(r+10),y-40,15);
      ellipse(x-(r+6),y+10,15);

      print("face3")
      stroke(230, 168,168);
      strokeWeight(6);
      noFill();
      arc(x-(r/2),y-(r/2), 15,15,0, PI);
      arc(x+(r/3),y-(r/2), 15,15,0, PI);
      line(x-r/6, y+(r/3), (x-r/6)+20, y+(r/3));
  }
  else if (c > 3 & c < 4) {
      background(220);
      //filled head
      noStroke();
      fill(255,226,226);
      ellipse(x-20,y+20,2*r);

      //hair
      stroke(100);
      strokeWeight(35);
      line(((x-r/3)+5)-80,(y-r-5)+40,((x+2*r/3)+5)-80, (y-r-5)-20);
      stroke(40);
      line((x-r/3)-80,(y-r)+40,(x+2*r/3)-80,(y-r)-20);

      //outline head
      noFill();
      strokeWeight(10);
      stroke(230, 168,168);
      ellipse(x, y, 2*r);

      //earrings
      fill(182);
      noStroke();
      ellipse(x-(r+10),y-40,15);
      ellipse(x-(r+6),y+10,15);

      print("face4")
      stroke(230, 168,168);
      strokeWeight(6);
      noFill();
      ellipse(x-(r/2),y-(r/2), 15, 15);
      ellipse(x+(r/3),y-(r/2), 15, 15);
      arc(x-r/6,y+(r/3), 30,15, PI+PI/6, 0-PI/6);
      stroke(40);
      strokeWeight(12);
  }
  else if(c > 4 & c < 5){
      background(220);

      //filled head
      noStroke();
      fill(255,226,226);
      ellipse(x-20,y-20,2*r);

      //hair
      stroke(100);
      strokeWeight(35);
      line(((x-r/3)+5)-80,(y-r-5)+40,((x+2*r/3)+5)-80, (y-r-5)-20);
      stroke(40);
      line((x-r/3)-80,(y-r)+40,(x+2*r/3)-80,(y-r)-20);

      //outline head
      noFill();
      strokeWeight(10);
      stroke(230, 168,168);
      ellipse(x, y, 2*r);

      //earrings
      fill(182);
      noStroke();
      ellipse(x-(r+10),y-40,15);
      ellipse(x-(r+6),y+10,15);

      print("face5")
      stroke(230, 168,168);
      strokeWeight(6);
      noFill();
      arc(x-(r/2),y-(r/2), 15,15,0, PI);
      arc(x+(r/3),y-(r/2), 15,15,0, PI);
  }
  else if(c > 5 & c < 6){
      background(220);

      //filled head
      noStroke();
      fill(255,226,226);
      ellipse(x+20,y+20,2*r);

      //hair
      stroke(100);
      strokeWeight(35);
      line(((x-r/3)+5),(y-r-5),((x+2*r/3)+5), (y-r-5));
      stroke(40);
      line((x-r/3),(y-r),(x+2*r/3),(y-r));

      //outline head
      noFill();
      strokeWeight(10);
      stroke(230, 168,168);
      ellipse(x, y, 2*r);

      //earrings
      fill(182);
      noStroke();
      ellipse(x-(r+10),y-40,15);
      ellipse(x-(r+6),y+10,15);

      print("face6")
      stroke(230, 168,168);
      strokeWeight(6);
      noFill();
      ellipse(x-(r/2),y-(r/2), 15, 15);
      ellipse(x+(r/3),y-(r/2), 15, 15);
      arc(x+(r/3),y+(r/2), 30,30,0, PI);
      line(x-(r/3),y+(r/2),x+(r/3)+15,y+(r/2));
  }
  else{
      background(220);
      //filled head
      noStroke();
      fill(255,226,226);
      ellipse(x+20,y-20,2*r);

      //hair
      stroke(100);
      strokeWeight(35);
      line(((x-r/3)+5)+20,(y-r-5),((x+2*r/3)+5)+20, (y-r-5)+20);
      stroke(40);
      line((x-r/3)+20,(y-r),(x+2*r/3)+20,(y-r)+20);

      //outline head
      noFill();
      strokeWeight(10);
      stroke(230, 168,168);
      ellipse(x, y, 2*r);

      //earrings
      fill(182);
      noStroke();
      ellipse(x-(r+10),y-40,15);
      ellipse(x-(r+6),y+10,15);

      print("face7")
      stroke(230, 168,168);
      strokeWeight(6);
      noFill();
      arc(x-(r/2),y-(r/2), 15,15,0, PI);
      arc(x+(r/3),y-(r/2), 15,15,0, PI);
      arc(x-r/6,y+(r/3), 30,15,PI/6, PI-PI/6);
  }
}

Project-02: Variable faces

Emilio Bustamante

Section D

Right-click, select all and copy then paste in p5js editor and erase the extra lines at the beginning and end. I apologize had some problems importing the html.

// Maintain pressing the mouse and then release to see the face movement

function setup() {
  createCanvas(425,500);
  strokeWeight(0);
  noLoop();
}

// Profile face  

function draw() {
  background(115,191,69);

// Hair  

       fill(120,100,100)
  
  rect(50,175,25,25)
  rect(50,225,25,25)
  rect(50,250,25,25)
  rect(50,275,25,25)
  
  rect(75,175,25,25)
  rect(75,200,25,25)
  rect(75,225,25,25)
  rect(75,250,25,25)
  rect(75,275,25,25)
  rect(75,300,25,25)
  rect(75,325,25,25)
  
  rect(100,150,25,25)
  rect(100,175,25,25)
  rect(100,200,25,25)
  rect(100,225,25,25)
  
  rect(125,75,25,25)
  rect(125,100,25,25)
  rect(125,125,25,25)
  rect(125,150,25,25)
  rect(125,175,25,25)
  rect(125,200,25,25)
  rect(125,225,25,25)
  
  rect(150,100,25,25)
  rect(150,125,25,25)
  rect(150,150,25,25)
  rect(150,175,25,25)
  rect(150,200,25,25)
  rect(150,225,25,25)
  rect(150,250,25,25)
  
  rect(175,125,25,25)
  rect(175,150,25,25)
  rect(175,175,25,25)
  rect(175,200,25,25)
  rect(175,225,25,25)
  rect(175,250,25,25)
  
  rect(200,100,25,25)
  rect(200,125,25,25)
  rect(200,150,25,25)
  rect(200,175,25,25)
  rect(200,200,25,25)
  
  rect(225,125,25,25)
  rect(225,150,25,25)
  rect(225,175,25,25)
  rect(225,200,25,25)
  
  rect(250,100,25,25)
  rect(250,125,25,25)
  rect(250,150,25,25)
  rect(250,175,25,25)
  
  rect(275,75,25,25)
  rect(275,100,25,25)
  rect(275,125,25,25)
  rect(275,150,25,25)
  rect(275,175,25,25)
  
  rect(300,100,25,25)
  rect(300,125,25,25)
  rect(300,150,25,25)
  rect(300,175,25,25)
  rect(300,175,25,25)
  rect(300,200,25,25)
  
  rect(325,125,25,25)
  rect(325,150,25,25)
  rect(325,175,25,25)
  
  rect(350,125,25,25)
  
// Shadows
    
       fill(23,19,20)

  rect(100,325,25,25)
  rect(100,350,25,25)
  rect(100,375,25,25)
 
  rect(125,275,25,25)
  rect(125,300,25,25)
  rect(125,325,25,25)
  rect(125,350,25,25)
  rect(125,375,25,25)
  rect(125,400,25,25)
  rect(125,425,25,25)
  rect(125,450,25,25)
  rect(125,475,25,25)

  rect(150,275,25,25)
  rect(150,300,25,25)
  rect(150,325,25,25)
  rect(150,350,25,25)
  rect(150,375,25,25)
  rect(150,400,25,25)
 
  rect(175,325,25,25)
  rect(175,350,25,25)
  rect(175,375,25,25)
  rect(175,400,25,25)
  rect(175,425,25,25)
  
  rect(200,250,25,25)
  rect(200,350,25,25)
  rect(200,375,25,25)
  rect(200,400,25,25)
  rect(200,425,25,25)

  rect(225,250,25,25)
  rect(225,375,25,25)
  rect(225,400,25,25)
  rect(225,425,25,25)
  rect(225,450,25,25)
  rect(225,475,25,25)
  
  rect(250,250,25,25)
  rect(250,375,25,25)
  rect(250,425,25,25)
  rect(250,450,25,25)
  
  rect(275,250,25,25)
  rect(275,275,25,25)
  rect(275,375,25,25)
  rect(275,425,25,25)
  
  rect(300,250,25,25)
  rect(300,275,25,25)
  rect(300,300,25,25)
  rect(300,375,25,25)
  
// Skin

      fill(135,62,43)
  
  rect(100,250,25,25)
  rect(100,275,25,25)
  rect(100,300,25,25)
  
  rect(125,250,25,25)
  
  rect(150,425,25,25)
  rect(150,450,25,25)
  rect(150,475,25,25)
  
  rect(175,275,25,25)
  rect(175,300,25,25)
  rect(175,450,25,25)
  rect(175,475,25,25)
  
  rect(200,225,25,25)
  rect(200,275,25,25)
  rect(200,300,25,25)
  rect(200,325,25,25)
  rect(200,450,25,25)
  rect(200,475,25,25)
 
  rect(225,225,25,25)
  rect(225,275,25,25)
  rect(225,300,25,25)
  rect(225,325,25,25)
  rect(225,350,25,25)

  rect(250,200,25,25)
  rect(250,225,25,25)
  rect(250,275,25,25)
  rect(250,300,25,25)
  rect(250,325,25,25)
  rect(250,350,25,25)
  rect(250,400,25,25)
  
  rect(275,200,25,25)
  rect(275,225,25,25)
  rect(275,300,25,25)
  rect(275,325,25,25)
  rect(275,350,25,25)  
  rect(275,400,25,25)

  rect(300,225,25,25)
  rect(300,325,25,25)
  rect(300,350,25,25)  
  
  rect(325,300,25,25)
  rect(325,325,25,25)
  
  rect(350,325,25,25)
}

// 3/4 face

function mousePressed() {
  background(115,191,69);
  
// Hair
  
      fill(120,100,100)

  rect(50,75,25,25)
  rect(50,150,25,25)
  rect(50,175,25,25)
  rect(50,225,25,25)
  rect(50,250,25,25)
  rect(50,275,25,25)
  
  rect(75,75,25,25)
  rect(75,100,25,25)
  rect(75,175,25,25)
  rect(75,200,25,25)
  rect(75,225,25,25)
  rect(75,250,25,25)
  
  rect(100,100,25,25)
  rect(100,125,25,25)
  rect(100,150,25,25)
  rect(100,175,25,25)
  rect(100,200,25,25)
  rect(100,225,25,25)
  rect(100,250,25,25)
  
  rect(125,75,25,25)
  rect(125,100,25,25)
  rect(125,125,25,25)
  rect(125,150,25,25)
  rect(125,175,25,25)
  rect(125,200,25,25)
  
  rect(150,100,25,25)
  rect(150,125,25,25)
  rect(150,150,25,25)
  rect(150,175,25,25)
  rect(150,200,25,25)
  
  rect(175,50,25,25)
  rect(175,125,25,25)
  rect(175,150,25,25)
  rect(175,175,25,25)
  
  rect(200,50,25,25)
  rect(200,75,25,25)
  rect(200,100,25,25)
  rect(200,125,25,25)
  rect(200,150,25,25)
  rect(200,175,25,25)
  
  rect(225,75,25,25)
  rect(225,100,25,25)
  rect(225,125,25,25)
  rect(225,150,25,25)
  rect(225,175,25,25)
  rect(225,200,25,25)
  
  rect(250,100,25,25)
  rect(250,125,25,25)
  rect(250,150,25,25)
  rect(250,175,25,25)
  
  rect(275,75,25,25)
  rect(275,100,25,25)
  rect(275,125,25,25)
  rect(275,150,25,25)
  rect(275,175,25,25)
  
  rect(300,100,25,25)
  rect(300,125,25,25)
  rect(300,150,25,25)
  rect(300,175,25,25)
  rect(300,175,25,25)
  rect(300,200,25,25)
  
  rect(325,75,25,25)
  rect(325,100,25,25)
  rect(325,125,25,25)
  rect(325,150,25,25)
  rect(325,175,25,25)
  
  rect(350,75,25,25)
  rect(350,150,25,25)
  rect(350,175,25,25)
  
// Shadows
  
       fill(23,19,20)
  
  rect(75,275,25,25)
  rect(75,300,25,25)
  
  rect(100,275,25,25)
  rect(100,300,25,25)
  rect(100,325,25,25)
  rect(100,350,25,25)
  rect(100,375,25,25)
  
  rect(125,250,25,25)
  rect(125,350,25,25)
  rect(125,375,25,25)
  rect(125,400,25,25)
  rect(125,425,25,25)
  rect(125,450,25,25)
  rect(125,475,25,25)
  
  rect(150,250,25,25)
  rect(150,275,25,25)
  rect(150,375,25,25)
  rect(150,400,25,25)
  rect(150,425,25,25)
  
  rect(175,250,25,25)
  rect(175,275,25,25)
  rect(175,300,25,25)
  rect(175,400,25,25)
  rect(175,425,25,25)
  rect(175,450,25,25)
  
  rect(200,250,25,25)
  rect(200,275,25,25)
  rect(200,400,25,25)
  rect(200,450,25,25)
  rect(200,475,25,25)
  
  rect(225,250,25,25)
  rect(225,350,25,25)
  rect(225,400,25,25)
  rect(225,450,25,25)
  rect(225,475,25,25)
  
  rect(250,250,25,25)
  rect(250,275,25,25)
  rect(250,350,25,25)
  rect(250,400,25,25)
  rect(250,425,25,25)
  rect(250,450,25,25)
  
  rect(275,250,25,25)
  rect(275,275,25,25)
  rect(275,300,25,25)
  rect(275,375,25,25)
  rect(275,400,25,25)
  rect(275,425,25,25)
  
  rect(300,225,25,25)
  rect(300,250,25,25)
  rect(300,275,25,25)
  rect(300,300,25,25)
  rect(300,325,25,25)
  rect(300,350,25,25)
  rect(300,375,25,25)
  
  rect(325,250,25,25)
  
// Skin
  
      fill(135,62,43)
  
  rect(125,225,25,25)
  rect(125,275,25,25)
  rect(125,300,25,25)
  rect(125,325,25,25)
  
  rect(150,225,25,25)
  rect(150,300,25,25)
  rect(150,325,25,25)
  rect(150,350,25,25)
  rect(150,450,25,25)
  rect(150,475,25,25)
  
  rect(175,200,25,25)
  rect(175,225,25,25)
  rect(175,325,25,25)
  rect(175,350,25,25)
  rect(175,375,25,25)
  rect(175,475,25,25)
  
  rect(200,200,25,25)
  rect(200,225,25,25)
  rect(200,300,25,25)
  rect(200,325,25,25)
  rect(200,350,25,25)
  rect(200,375,25,25)
  rect(200,425,25,25)
 
  rect(225,225,25,25)
  rect(225,275,25,25)
  rect(225,300,25,25)
  rect(225,325,25,25)
  rect(225,375,25,25)
  rect(225,425,25,25)
  
  rect(250,200,25,25)
  rect(250,225,25,25)
  rect(250,300,25,25)
  rect(250,325,25,25)
  rect(250,375,25,25)
  
  rect(275,200,25,25)
  rect(275,225,25,25)
  rect(275,325,25,25)
  rect(275,350,25,25)
 
}

// Front face

function mouseClicked() {
  background(115,191,69);
  
// Hair
  
      fill(120,100,100)

  rect(50,100,25,25)
  rect(50,150,25,25)
  rect(50,175,25,25)
  rect(50,225,25,25)
  rect(50,250,25,25)
  rect(50,275,25,25)
  
  rect(75,100,25,25)
  rect(75,125,25,25)
  rect(75,150,25,25)
  rect(75,175,25,25)
  rect(75,200,25,25)
  rect(75,225,25,25)
  
  rect(100,100,25,25)
  rect(100,125,25,25)
  rect(100,150,25,25)
  rect(100,175,25,25)
  rect(100,200,25,25)
  
  rect(125,75,25,25)
  rect(125,100,25,25)
  rect(125,125,25,25)
  rect(125,150,25,25)
  rect(125,175,25,25)
  
  rect(150,100,25,25)
  rect(150,125,25,25)
  rect(150,150,25,25)
  
  rect(175,50,25,25)
  rect(175,75,25,25)
  rect(175,100,25,25)
  rect(175,125,25,25)
  rect(175,150,25,25)
  
  rect(200,75,25,25)
  rect(200,100,25,25)
  rect(200,125,25,25)
  rect(200,150,25,25)
  rect(200,175,25,25)
  
  rect(225,100,25,25)
  rect(225,125,25,25)
  rect(225,150,25,25)
  rect(225,175,25,25)
  rect(225,200,25,25)
  
  rect(250,75,25,25)
  rect(250,100,25,25)
  rect(250,125,25,25)
  rect(250,150,25,25)
  rect(250,175,25,25)
  
  rect(275,50,25,25)
  rect(275,75,25,25)
  rect(275,100,25,25)
  rect(275,125,25,25)
  rect(275,150,25,25)
  rect(275,175,25,25)
  
  rect(300,100,25,25)
  rect(300,125,25,25)
  rect(300,150,25,25)
  rect(300,175,25,25)
  rect(300,175,25,25)
  rect(300,200,25,25)
  
  rect(325,100,25,25)
  rect(325,150,25,25)
  rect(325,175,25,25)
  rect(325,200,25,25)
  rect(325,225,25,25)

  rect(350,175,25,25)
  
// Shadows

       fill(23,19,20)
  
  
  rect(75,250,25,25)
  rect(75,300,25,25)
  rect(75,325,25,25)
  rect(75,350,25,25)
  
  rect(100,250,25,25)
  rect(100,275,25,25)
  rect(100,350,25,25)
  rect(100,375,25,25)
  
  rect(125,250,25,25)
  rect(125,275,25,25)
  rect(125,300,25,25)
  rect(125,375,25,25)
  rect(125,400,25,25)
  rect(125,425,25,25)
  rect(125,450,25,25)
  rect(125,475,25,25)
  
  rect(150,250,25,25)
  rect(150,275,25,25)
  rect(150,375,25,25)
  rect(150,400,25,25)
  rect(150,425,25,25)
  
  rect(175,250,25,25)
  rect(175,375,25,25)
  rect(175,425,25,25)
  rect(175,450,25,25)
  
  rect(200,250,25,25)
  rect(200,375,25,25)
  rect(200,425,25,25)
  rect(200,450,25,25)
  
  rect(225,250,25,25)
  rect(225,275,25,25)
  rect(225,375,25,25)
  rect(225,400,25,25)
  rect(225,425,25,25)
  
  rect(250,250,25,25)
  rect(250,275,25,25)
  rect(250,300,25,25)
  rect(250,375,25,25)
  rect(250,400,25,25)
  rect(250,425,25,25)
  rect(250,450,25,25)
  rect(250,475,25,25)
  
  rect(275,250,25,25)
  rect(275,275,25,25)
  rect(275,350,25,25)
  rect(275,375,25,25)

  rect(300,250,25,25)
  rect(300,300,25,25)
  rect(300,325,25,25)
  rect(300,350,25,25)
  
  
// Skin

      fill(135,62,43)
  
  rect(75,275,25,25)
  
  rect(100,225,25,25)
  rect(100,300,25,25)
  rect(100,325,25,25)
  
  rect(125,200,25,25)
  rect(125,225,25,25)
  rect(125,325,25,25)
  rect(125,350,25,25)
  
  rect(150,175,25,25)
  rect(150,200,25,25)
  rect(150,225,25,25)
  rect(150,300,25,25)
  rect(150,325,25,25)
  rect(150,350,25,25)
  rect(150,450,25,25)
  rect(150,475,25,25)
  
  rect(175,175,25,25)
  rect(175,200,25,25)
  rect(175,225,25,25)
  rect(175,275,25,25)
  rect(175,300,25,25)
  rect(175,325,25,25)
  rect(175,350,25,25)
  rect(175,400,25,25)
  rect(175,475,25,25)
  
  rect(200,200,25,25)
  rect(200,225,25,25)
  rect(200,275,25,25)
  rect(200,300,25,25)
  rect(200,325,25,25)
  rect(200,350,25,25)
  rect(200,400,25,25)
  rect(200,475,25,25)
 
  rect(225,225,25,25)
  rect(225,300,25,25)
  rect(225,325,25,25)
  rect(225,350,25,25)
  rect(225,450,25,25)
  rect(225,475,25,25)
  
  rect(250,200,25,25)
  rect(250,225,25,25)
  rect(250,325,25,25)
  rect(250,350,25,25)
  
  rect(275,200,25,25)
  rect(275,225,25,25)
  rect(275,325,25,25)
  rect(275,300,25,25)
  
  rect(300,225,25,25)
  rect(300,275,25,25)
}

Project-02-Variable-Face

Variable-Face

var eyeSpacing = 80;
var noseLength = 120;
var mouthWidth = 120;
var mouthHeight = 100;

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

function draw() {
    //head
    fill(255,255,255);
    ellipse(240,320,360,440);
    //eyes
    fill(0,0,0);
    ellipse(240+eyeSpacing, 300, 50, 80);
    ellipse(240-eyeSpacing, 300, 50, 80);
    //nose
    fill(255);
    triangle(240, 300, 200, 300+noseLength, 280, 300+noseLength);
    //mouth
    arc(240, 400, mouthWidth, mouthHeight, 0, PI, CHORD)

    //check for user input
    if(mouseIsPressed) {
      eyeSpacing = random(50,100);
      noseLength = random(40,80);
      mouthWidth = random(120,240);
      mouthHeight = random(100,200);
    }
}

Phew I think I uploaded this correctly! Honestly the hardest part of the assignment was figuring out how to do the HTML stuff. Although very simple, I like my final product since it’s always smiling at me 😀

Project 2: Variable Faces

wpf-variable-face

//Patrick Fisher, section B

var eyeSize = 20;
var faceWidth = 100;
var faceHeight = 150;
var eyeColor = 2;
var mouthType = 1;
var noseType = 1;
var browLength = (1.15 * eyeSize);
var r = 0; //color value for eyebrows
var m = 1; //coefficent for for size of mouth and nose
var skinColor = 1;

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

function draw() {
    var midX = width / 2; //intermediate varriable for half the canvas length
    background(180);
    
    if(skinColor == 1){ //chooses a variety of skin colors from paper white to dark brown
        strokeWeight(1);
        fill(255);
        ellipse(midX, height / 2, faceWidth,  faceHeight); 
    
    } else if(skinColor == 2){
        strokeWeight(1);
        fill(254, 219, 117); 
        ellipse(midX, height / 2, faceWidth,  faceHeight); 
    
    } else if(skinColor == 3){ 
        strokeWeight(1);
        fill(241, 194, 125);
        ellipse(midX, height / 2, faceWidth,  faceHeight); 
    
    } else if(skinColor == 4){ 
        strokeWeight(1);
        fill(224, 172, 105); 
        ellipse(midX, height / 2, faceWidth,  faceHeight); 
    
    } else if(skinColor == 5){ 
        strokeWeight(1);
        fill(198, 134, 66); 
        ellipse(midX, height / 2, faceWidth,  faceHeight); 
    
    } else if(skinColor == 6){
        strokeWeight(1);
        fill(140, 85, 36); 
        ellipse(midX, height / 2, faceWidth,  faceHeight); 
    
    } else if(skinColor == 7){
        strokeWeight(1);
        fill(54, 30, 2);        
        ellipse(midX, height / 2, faceWidth,  faceHeight); 
    
    }

    var eyeLX = midX - faceWidth * 0.25; //variable for x position of left eye
    var eyeRX = midX + faceWidth * 0.25; //wariable for x position of left eye
    var eyeBrowL = (eyeLX - (.65 * eyeSize)); //variable for left eyebrow x position based off of left eye position
    var eyeBrowR = (eyeRX - (.5 * eyeSize)); //wariable for right eyebrow x position based off of the right eye position
    strokeWeight(1);
    fill(r);
    rect(eyeBrowL, ((height / 2) - eyeSize), browLength, (0.25 * eyeSize)); //left eyebrow
    
    strokeWeight(1);
    fill(r);
    rect(eyeBrowR, ((height / 2) - eyeSize), browLength, (0.25 * eyeSize)); //right eyebrow
    
    strokeWeight(1);
    fill(255);
    ellipse(eyeLX, height / 2, eyeSize, eyeSize); //creates left eye
    
    strokeWeight(1);
    fill(255);
    ellipse(eyeRX, height / 2, eyeSize, eyeSize); //creates right eye

    if(eyeColor == 1){ //makes brown irises       
            strokeWeight(1);
            fill(100,63,33);
            ellipse(eyeLX, height / 2, eyeSize * (2/3), eyeSize * (2/3));

            strokeWeight(1);
            fill(100,63,33);
            ellipse(eyeRX, height / 2, eyeSize * (2/3), eyeSize * (2/3));
    
    }    else if(eyeColor == 2){   //makes green irises     
            strokeWeight(1);
            fill(0,125,75);
            ellipse(eyeLX, height / 2, eyeSize * (2/3), eyeSize * (2/3));

            strokeWeight(1);
            fill(0,125,75);
            ellipse(eyeRX, height / 2, eyeSize * (2/3), eyeSize * (2/3));    
    
    }    else if(eyeColor == 3){   //makes blue irises     
            strokeWeight(1);
            fill(35,164,242);
            ellipse(eyeLX, height / 2, eyeSize * (2/3), eyeSize * (2/3));

            strokeWeight(1);
            fill(35,164,242);
            ellipse(eyeRX, height / 2, eyeSize * (2/3), eyeSize * (2/3));    
    
    }    else if(eyeColor == 4){   //makes heterochromia, brown right blue left     
            strokeWeight(1);
            fill(100,63,33);
            ellipse(eyeLX, height / 2, eyeSize * (2/3), eyeSize * (2/3));

            strokeWeight(1);
            fill(35,164,242);
            ellipse(eyeRX, height / 2, eyeSize * (2/3), eyeSize * (2/3));    
    
    }    else if(eyeColor == 5){   //makes heterochromia, blue right brown left     
            strokeWeight(1);
            fill(35,164,242);
            ellipse(eyeLX, height / 2, eyeSize * (2/3), eyeSize * (2/3));

            strokeWeight(1);
            fill(100,63,33);
            ellipse(eyeRX, height / 2, eyeSize * (2/3), eyeSize * (2/3));    
    
    }    else if(eyeColor == 6){   //makes heterochromia, blue right green left     
            strokeWeight(1);
            fill(0,125,75);
            ellipse(eyeLX, height / 2, eyeSize * (2/3), eyeSize * (2/3));

            strokeWeight(1);
            fill(35,164,242);
            ellipse(eyeRX, height / 2, eyeSize * (2/3), eyeSize * (2/3));    
    
    }   else if(eyeColor == 7){   //makes heterochromia, green right blue left     
            strokeWeight(1);
            fill(35,164,242);
            ellipse(eyeLX, height / 2, eyeSize * (2/3), eyeSize * (2/3));

            strokeWeight(1);
            fill(0,125,75);
            ellipse(eyeRX, height / 2, eyeSize * (2/3), eyeSize * (2/3));    
    
    }    else if(eyeColor == 8){   //makes heterochromia, brown right green left     
            strokeWeight(1);
            fill(0,125,75);
            ellipse(eyeLX, height / 2, eyeSize * (2/3), eyeSize * (2/3));

            strokeWeight(1);
            fill(100,63,33);
            ellipse(eyeRX, height / 2, eyeSize * (2/3), eyeSize * (2/3));    
    
    }    else if(eyeColor == 9){   //makes heterochromia, green right brown left     
            strokeWeight(1);
            fill(100,63,33);
            ellipse(eyeLX, height / 2, eyeSize * (2/3), eyeSize * (2/3));

            strokeWeight(1);
            fill(0,125,75);
            ellipse(eyeRX, height / 2, eyeSize * (2/3), eyeSize * (2/3));    
    
    }
    //variables for positioning and drawing the mouth
    var mouthWidth = (faceWidth * (1/3));
    var mouthHeight = (faceHeight * .25);
   //intermediate variables for the x,y coordiantes for the tirangle nose type
    var tx1 = midX;
    var ty1 = ((height / 2) - (faceHeight / 16));
    var tx2 = (midX - (faceWidth / 8));
    var ty2 = ((height / 2) + (faceHeight / 6))
    var tx3 = (midX + (faceWidth / 8));
    var ty3 = ((height / 2) + (faceHeight / 6));

    if(mouthType == 1){
        strokeWeight(1);
        fill(0);
        arc(midX , ((height / 2) + (faceHeight * .25)), mouthWidth, mouthHeight, m * TWO_PI, m * PI); //creates a smiling mouth

    } else if(mouthType == 2){ //creates a frowning mouth
        strokeWeight(1);
        fill(0);
        arc(midX , ((height / 2) + (faceHeight * .375)), mouthWidth, mouthHeight, m * PI, m * TWO_PI,);

    } else if(mouthType == 3) { //creates a neutral line mouth
        
        strokeWeight(3);
        line(m * (midX - (mouthWidth / 2)), ((height / 2) + (faceHeight * .25)), m * (midX + (mouthWidth / 2)), ((height / 2) + (faceHeight * .25)));
    }
    
    if(noseType == 1){ //creates a half circle nose
        strokeWeight(1);
        fill(255);
        arc(((width * (51/100))), (height * (51/100)), (faceWidth / 4), (faceHeight / 6), m * HALF_PI, m * PI + HALF_PI);
    }

    else if(noseType == 2){ //creates a triangle nose
        strokeWeight(1);
        fill(255);
        triangle(tx1, ty1, m * tx2, ty2, m * tx3, ty3);
    }

    else if(noseType == 3){ //creates a line nose
        
        strokeWeight(3);
        line(midX, m * ((height / 2) + (faceHeight / 8)),midX, ((height / 2) - (faceHeight / 8)));
    }

}

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);
    browLength = random((eyeSize * .95), (eyeSize * 1.35));
    eyeColor = floor(random(1,10)); //chooses one of the eye color combinations
    mouthType = floor(random(1,4)); //choose the mouth type
    noseType = floor(random(1,4));  //chooses the nose type
    r = random(255); //changes eyebrow color
    m = (random(.95,1.05));
    skinColor = floor(random(1,8)); //changes the skin color

}

I had a lot of fun with this project. It was interesting trying to come up with more and more ways to make the face different. One of my early troubles was a problem with my eye colors. I was using “if(eyeColor == x)…” and eyeColor = “random(1,10)” but most clicks would end with no irises at all. I then realized the problem was that random() gives a floating point number and I was asking for a specific integer, so the odds of getting one were super low, so I changed the line to “floor(random(1,10))” which thankfully fixed it.

Project 2: Variable Faces

var headWidth = 300
var headHeight = 400
var earWidth = 20
var earHeight = 20
var mouthWidth = 200
var mouthHeight = 100
var eyeWidth = 60
var eyeHeight = 60
var pupilWidth = 50
var pupilHeight = 60

function setup() {
createCanvas(480, 600);
background(255, 255, 255);

}

function draw() {
fill (‘#fae’);
ellipse(width/2,height/2,headWidth,headHeight);
fill (255, 255, 255);
ellipse(width/2-60,height/2-20,eyeWidth,eyeHeight);
ellipse(width/2+60,height/2-20,eyeWidth,eyeHeight);
fill (255, 255, 255);
ellipse(width/2,height/2+90,mouthWidth-120,mouthHeight-30);
fill (50, 135, 200);
ellipse(width/2-40,height/2-20,pupilWidth-30,pupilHeight-20);
ellipse(width/2+80,height/2-20,pupilWidth-30,pupilHeight-20);
fill (‘#fae’);
circle(width/2-100,height/2-160,earWidth-80,earHeight-40);
circle(width/2+100,height/2-160,earWidth-80,earHeight-40);

}

function mousePressed() {
mouthWidth = random (40, 60);
mouthHeight = random (60, 30);

}

Face Randomizer

sketch

var eyeSize = 20;
var pupilSize = 10;
var faceWidth = 100;
var faceHeight = 150;
var mouth = 1;

function setup() {
    createCanvas(300, 300);
    faceShape = 1;
}


function mousePressed() {
    faceShape = -faceShape;
    faceWidth = random(75, 200);
    faceHeight = random(100, 200);
    eyeSize = random(10, 50);
    pupilSize = random(1,4)
    mouth = random(1,4);

}

function draw() {
    background(180);
    //head shapes
    if (faceShape>0) {
        ellipse(width/2,height/2,faceWidth,faceHeight);

    }
    else if (faceShape<0){
        rect((width - faceWidth)/2,(height - faceHeight)/2,faceWidth,faceHeight);
    }

    //eyes and pupils
    var LeftEye = width / 2 - faceWidth / 4;
    var Righteye = width / 2 + faceWidth / 4;
    ellipse(LeftEye, 5*height / 12, eyeSize);
    ellipse(Righteye, 5*height / 12, eyeSize);
    fill(0);
    ellipse(LeftEye, 5*height / 12, eyeSize/pupilSize);
    ellipse(Righteye, 5*height / 12, eyeSize/pupilSize);
    fill(255);

    //mouths

    if (mouth<2) {
        //smile
    ellipse(width/2,height/2+25,50,25);
    stroke(255);
    rect(width/2-30,height/2+10,60,15);
    stroke(0);
    }
    else if (mouth<3) {
        //sad
    ellipse(width/2,height/2+35,50,25);
    stroke(255);
    rect(width/2-30,height/2+35,60,15);
    stroke(0);
    }
    else if (mouth<4) {
        line((width/2)-faceWidth/4, (height/2)+faceHeight/5, (width/2)+faceWidth/4, (height/2)+faceHeight/5);
    }
    
}

One of the difficulties I had with this project was creating a uniform smile. In order to do so, I used certain blocks to cover the ellipses and removed the stroke color. I had a lot of trouble with the random() function because I had also forgotten that it outputted float point numbers.

Project 2- Variable Faces; Face Variables

var eyeSize = 25;
var faceWidth = 150;
var faceHeight = 180;
var mouthWidth = 40;
var mouthHeight = 15;
var browWidth = 10;
var browHeight = 3;
var noseColor = 230; 
 
function setup() {
    createCanvas(480, 640);
}
 
function draw() {
    background(173,216,230);
    fill(246,232,205);
    ellipse(width / 2, height / 2, faceWidth,  faceHeight);
    var eyeLX = width / 2 - faceWidth * 0.2;
    var eyeRX = width / 2 + faceWidth * 0.2;
    fill(0,100,0);
    ellipse(eyeLX, height / 2, eyeSize, eyeSize);
    fill(0,100,0);
    ellipse(eyeRX, height / 2, eyeSize, eyeSize);
    fill(199,54,59);
    ellipse(width/2, (height/2+35), mouthWidth, mouthHeight);
    var browY = height/2 - 30;
    fill(0);
    rect(eyeLX-5,browY,browWidth, browHeight);
    fill(0);
    rect(eyeRX-5,browY,browWidth, browHeight);
    fill(noseColor);
    triangle(width/2,height/2+5,width/2-8,height/2+20, width/2+8,height/2+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(75, 150);
    faceHeight = random(100, 200);
    eyeSize = random(10, 30);
    mouthWidth = random(10,45);
    mouthHeight = random(10,20);
    browWidth = random (10,20);
    browHeight = random (3,7);
    noseColor = random (0,255);
}

The face that I created varies the mouth shape, eye size, and face shape, brow shape and nose shade on each click.