Category: Project-02-Variable-Face

Project 2 – Variable Faces

Click on the hamster and see its mood evolve as it eats and chews!

sketch
/*
 * Michelle Kim
 * Section B
 */

var faceWidth = 170;
var faceHeight = 150;
var leftCheekWidth = 85;
var leftCheekHeight = 70;
var rightCheekWidth = 85;
var rightCheekHeight = 70;
var eyeWidth = 15;
var eyeHeight = 20;
var noseWidth = 40;
var noseHeight = 25;
var leftEarWidth = 40;
var leftEarHeight = 50;
var rightEarWidth = 40;
var rightEarHeight = 50;
var bodyWidth = 240;
var bodyHeight = 200;
var footWidth = 50;
var footHeight = 30;
var leftMouthStop = 1.57;
var rightMouthStart = 1.57;

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

function draw() {
    var canvasCenter = width / 2;
    var footX = bodyWidth * 0.3;
    var footY = bodyHeight * 0.45;
    var bodyCenterY = height * 0.65;
    var faceY = bodyCenterY - (bodyHeight * 0.8);
    var earX = faceWidth * 0.25;
    var earY = faceY - (faceHeight * 0.45);
    var cheekY = faceY + (faceHeight * 0.25);
    var eyeX = faceWidth * 0.2;
    var eyeY = faceHeight * 0.1;
    var blushX = leftCheekWidth * 0.45;
    var handX = bodyWidth * 0.1;
    var mouthX = noseWidth * 0.25;
    var mouthY = faceY + (noseHeight * 0.8);
    var noseY = faceY + eyeY - (noseHeight * 0.2);
    var leftBlushX = leftCheekWidth * 0.3;
    var leftBlushY = leftCheekHeight * 0.2;
    var rightBlushX = rightCheekWidth * 0.3;
    var rightBlushY = rightCheekHeight * 0.2;

    background(204, 238, 245);
    noStroke();
    fill(218, 205, 141);
    //left foot
    ellipse(canvasCenter - footX, bodyCenterY + footY, footWidth, footHeight);
    //right foot
    ellipse(canvasCenter + footX, bodyCenterY + footY, footWidth, footHeight);

    fill(246, 231, 153);
    //yellow body
    ellipse(canvasCenter, bodyCenterY, bodyWidth, bodyHeight);
    //left yellow ear
    ellipse(canvasCenter - earX, earY, leftEarWidth, leftEarHeight);
    //right yellow ear
    ellipse(canvasCenter + earX, earY, rightEarWidth, rightEarHeight);

    fill(161, 154, 118);
    //left brown ear
    ellipse(canvasCenter - earX, earY, leftEarWidth / 2, leftEarHeight / 2);
    //right brown ear
    ellipse(canvasCenter + earX, earY, rightEarWidth / 2, rightEarHeight / 2);

    fill(246, 231, 153);
    //yellow face
    ellipse(canvasCenter, faceY, faceWidth, faceHeight);

    fill(242, 234, 183);
    //white body
    ellipse(canvasCenter, bodyCenterY, bodyWidth * 0.7, bodyHeight);

    fill(245, 239, 213);
    //left cheek
    ellipse(canvasCenter - earX, cheekY, leftCheekWidth, leftCheekHeight);
    //right cheek
    ellipse(canvasCenter + earX, cheekY, rightCheekWidth, leftCheekHeight);
    //snout
    ellipse(canvasCenter, cheekY, faceWidth * 0.35, faceHeight * 0.45);

    fill(81, 80, 72);
    //left eye
    ellipse(canvasCenter - eyeX, faceY - eyeY, eyeWidth, eyeHeight);
    //right eye
    ellipse(canvasCenter + eyeX, faceY - eyeY, eyeWidth, eyeHeight);

    noFill();
    stroke(100);
    strokeWeight(2);
    //left mouth
    arc(canvasCenter - mouthX, mouthY, 20, 40, 0, leftMouthStop);
    //right mouth
    arc(canvasCenter + mouthX, mouthY, 20, 40, rightMouthStart, 3.14);

    fill(218, 205, 141);
    stroke(210, 198, 138);
    //left hand
    arc(canvasCenter - handX, bodyCenterY, 20, 60, 0, 3.49);
    //right hand
    arc(canvasCenter + handX, bodyCenterY, 20, 60, 5.93, 3.14);

    noStroke();
    fill(141, 136, 102);
    //brown nose
    ellipse(canvasCenter, faceY + eyeY, noseWidth, noseHeight);

    fill(225, 223, 208);
    //white nose
    ellipse(canvasCenter - mouthX, noseY, mouthX, noseHeight * 0.25);

    fill(235, 192, 216);
    //left blush
    ellipse(canvasCenter - blushX, faceY + eyeY, leftBlushX, leftBlushY);
    //right blush
    ellipse(canvasCenter + blushX, faceY + eyeY, rightBlushX, rightBlushY);
}

function mousePressed() {
    leftCheekWidth = random (85, 100);
    leftCheekHeight = random (60, 110);
    rightCheekWidth = random (85, 100);
    rightCheekHeight = random (60, 110);
    eyeWidth = random (10, 20);
    eyeHeight = random (15, 25);
    leftEarHeight = random (25, 50);
    rightEarHeight = random (25, 50);
    bodyWidth = random (230, 280);
    leftMouthStop = random (1.5, 2);
    rightMouthStart = random (1, 1.5);
}

Project-02: Variable Faces

project-02-variableFaces-lkenny 
// Lauren Kenny (lkenny)
// Project 2 - Variable Faces
// Section A

var r = 220;
var g = 220;
var b = 220;
var faceWidth  = 100;
var faceHeight  = 100;
var leftEyeSize = 10;
var rightEyeSize = 10;

function setup() {
    createCanvas(640, 480);
    r = random(256);
    g = random(256);
    b = random(256);
}

function draw() {
    background(r, g, b);
    //ears
    fill(r+50, g+50, b+50);
    stroke(r-50, g-50, b-50);
    ellipse(((width/2)-(faceWidth/2)), (height/2), faceWidth/6, faceHeight/6);
    ellipse(((width/2)+(faceWidth/2)), (height/2), faceWidth/6, faceHeight/6);
    //face
    fill(r+50, g+50, b+50);
    stroke(r-50, g-50, b-50);
    strokeWeight(2);
    ellipse(width/2, height/2, faceWidth, faceHeight);
    //eyes
    ellipse(width/2-20, height/2-20, leftEyeSize, leftEyeSize);
    ellipse(width/2+20, height/2-20, rightEyeSize, rightEyeSize);
    //pupils
    fill(r-50, g-50, b-50);
    noStroke();
    ellipse(width/2-20, height/2-20, leftEyeSize/5, leftEyeSize/5);
    ellipse(width/2+20, height/2-20, rightEyeSize/5, rightEyeSize/5);
    //body
    fill(r+50, g+50, b+50,)
    stroke(r-50, g-50, b-50);
    rect((width/2)-(faceWidth/2), (height/2)+(faceHeight/2)+15, faceWidth, ((height)-(faceHeight)-15), 50, 50);
    //lips
    fill(r+75, 20, 20);
    noStroke();
    arc((width/2-(faceWidth/10)/3), height/2+25, faceWidth/8, faceHeight/10, PI, TWO_PI);
    arc((width/2+(faceWidth/10)/3), height/2+25, faceWidth/8, faceHeight/10, PI, TWO_PI);
    fill(r+95, 50, 50);
    arc((width/2), (height/2+25), faceWidth/6, faceHeight/12, 0, PI);
    //nose
    noFill();
    stroke(r-50, g-50, b-50);
    arc(width/2, height/2, faceWidth/6, 10, 0, PI, OPEN);
}

function mousePressed(){
    r = random(5, 256);
    g = random(5, 256);
    b = random(5, 256);
    faceWidth = random(75, 165);
    faceHeight = random(75, 200);
    leftEyeSize = random(5, 30);
    rightEyeSize = random(5, 30);
}

Project 02 – Variable Face

Made in honor of the moldy tomato I found at the back of my fridge. Rest in peace.

tomatoes
//Iris Yip
//15104 Section D

var bgColorR=0;
var bgColorG=0;
var bgColorB=0;
var faceWidth=200;
var faceHeight=300;
var eyeShape=0;
var eyeColor=0;
var smileYN=1;
var leafColor=1;
var leafLength=1;
var leafHeight=1;

//I need better names for my variables


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

function draw() {
  //background
  background(bgColorR, bgColorG, bgColorB)
  
  //faceshape
    noStroke();
  fill(225, bgColorB, 110)
    ellipse(300, 300, faceWidth, faceHeight);
  
  //nose
    fill(225, bgColorB-20, 120)
  ellipse(300, 316, faceWidth/30, faceHeight-250)
  
  //eyes
  fill(255,255.255)
    ellipse(205, 290, (faceWidth/4), (faceHeight/4));
    ellipse(390, 290, (faceWidth/4), (faceHeight/4));
  fill(bgColorR,bgColorG,bgColorB)
    ellipse(390, 290, 50, 50);
    ellipse(205, 290, 50, 50);
  
  //mouth
  noFill()
  strokeWeight(10)
  stroke(225, bgColorB+50, 110)
  arc(270, 380, 120, (smileYN), PI + QUARTER_PI, TWO_PI)
  
  
  //leaf things
  noStroke();
  fill(bgColorR, 255-(bgColorG/3), (bgColorB-100))
  triangle(leafLength, 150, 300, 130, 240, leafHeight);
  triangle(leafLength, 200, 300, 130, 220, leafHeight);
  triangle(leafLength+20, 150, 300, 130, 200, leafHeight+60);
  
  //label
    fill(255);
    textSize(20);
    textAlign(CENTER);
    text("So Many Tomatoes",width/2,560);
}

function mousePressed() {
  //background color
    bgColorR = random(120, 130);
  bgColorG = random(80, 90);
    bgColorB = random (110, 120);
  
  //faceshape change
    faceWidth= random(250,450);
    faceHeight= random (300,300);
  
  //nose
  
  
  //smile, yes/no
    smileYN= random(2,100);
  
  //leaf things
    leafHeight=random (120,150);
    leafLength=random (300,340);

  
}

The code for this project was relatively simple in terms of creating and using the different shapes, but I did initially have a lot of trouble coming up with colors that still looked different but didn’t clash. I do regret not going in with a plan or initial sketch because I think it inhibited me from trying out more ambitious commands and shapes.

Project-02-Variable-Face

For this project I modeled the face from the aliens in Toy Story. I think they have relatively simple features that were easier to abstract. I found a cartoon collector toy version of them which served as a much better basis for the actual shapes.

sketchDownload

function setup() {
    createCanvas(600, 600);
    background(220);
    noLoop();
}

function draw() {
    var antennas = random(3);
    var eyes = random(3);
    var mouth = random(4);
    var background = random(6);

    if (background < 1) {
      var backgroundColor = "#BF2D22"
    } else if (background > 1 & background < 2) {
      var backgroundColor = "#730B03"
    } else if (background > 2 && background < 3) {
      var backgroundColor = "#40211F"
    } else if (background > 3 && background < 4) {
      var backgroundColor = "#CA6861"
    } else if (background > 4 && background < 5) {
      var backgroundColor = "#400F0B"
    } else {
      var backgroundColor = "#8C2119"
    }
//background
    fill(backgroundColor);
    noStroke();
    rect(0,0,width,height);

//head
    fill(179,209,25);           //green
    rect(75,175,450,350,90);

  //ears
    beginShape();
    curveVertex(75,275);
    curveVertex(75,275);
    curveVertex(55,250);
    curveVertex(35,230);
    curveVertex(28,233);
    curveVertex(25,240);
    curveVertex(25,240);
    curveVertex(30,350);
    curveVertex(30,350);
    curveVertex(28,360);
    curveVertex(31,373);
    curveVertex(38,380);
    curveVertex(55,375);
    curveVertex(65,370);
    curveVertex(75,365);
    curveVertex(75,365);
    endShape();

    beginShape();
    curveVertex(600-75,275);
    curveVertex(600-75,275);
    curveVertex(600-55,250);
    curveVertex(600-35,230);
    curveVertex(600-28,233);
    curveVertex(600-25,240);
    curveVertex(600-25,240);
    curveVertex(600-30,350);
    curveVertex(600-30,350);
    curveVertex(600-28,360);
    curveVertex(600-31,373);
    curveVertex(600-38,380);
    curveVertex(600-55,375);
    curveVertex(600-65,370);
    curveVertex(600-75,365);
    curveVertex(600-75,365);
    endShape();

    stroke(0,0,0,60);       //transparent black
    strokeWeight(5);
    noFill();
    beginShape();
    curveVertex(75,285);
    curveVertex(75,285);
    curveVertex(35,240);
    curveVertex(45,360);
    curveVertex(45,360);
    endShape();

    beginShape();
    curveVertex(600-75,285);
    curveVertex(600-75,285);
    curveVertex(600-35,240);
    curveVertex(600-45,360);
    curveVertex(600-45,360);
    endShape();

//collar
    stroke(126,77,152);       //purple
    strokeWeight(40);
    line(155,530,455,530);

//shirt
    noStroke();
    fill(6,149,209);          //blue
    beginShape();
    curveVertex(0,599);
    curveVertex(0,599);
    curveVertex(25,555);
    curveVertex(155,530);
    curveVertex(155,530);
    curveVertex(455,530);
    curveVertex(455,530);
    curveVertex(574,555);
    curveVertex(599,599);
    curveVertex(599,599);
    endShape();

//antennas
    if (antennas < 1) {
      fill(179,209,25);
      beginShape();
      curveVertex(270,175);
      curveVertex(270,175);
      curveVertex(285,125);
      curveVertex(270,75);
      curveVertex(270,75);
      curveVertex(270,75);
      curveVertex(330,75);
      curveVertex(330,75);
      curveVertex(330,75);
      curveVertex(315,125);
      curveVertex(330,175);
      curveVertex(330,175);
      endShape();

      circle(300,75,60);
    } else if (antennas > 1 & antennas < 2){
      fill(179,209,25);
      beginShape();
      curveVertex(270-50,175);
      curveVertex(270-50,175);
      curveVertex(285-50,125);
      curveVertex(270-50,75);
      curveVertex(270-50,75);
      curveVertex(270-50,75);
      curveVertex(330-50,75);
      curveVertex(330-50,75);
      curveVertex(330-50,75);
      curveVertex(315-50,125);
      curveVertex(330-50,175);
      curveVertex(330-50,175);
      endShape();

      beginShape();
      curveVertex(270+50,175);
      curveVertex(270+50,175);
      curveVertex(285+50,125);
      curveVertex(270+50,75);
      curveVertex(270+50,75);
      curveVertex(270+50,75);
      curveVertex(330+50,75);
      curveVertex(330+50,75);
      curveVertex(330+50,75);
      curveVertex(315+50,125);
      curveVertex(330+50,175);
      curveVertex(330+50,175);
      endShape();

      circle(300+50,75,60);

      circle(300-50,75,60);
    } else {
      fill(179,209,25);
      beginShape();
      curveVertex(270,175);
      curveVertex(270,175);
      curveVertex(285,125);
      curveVertex(270,75);
      curveVertex(270,75);
      curveVertex(270,75);
      curveVertex(330,75);
      curveVertex(330,75);
      curveVertex(330,75);
      curveVertex(315,125);
      curveVertex(330,175);
      curveVertex(330,175);
      endShape();

      beginShape();
      curveVertex(270+80,175);
      curveVertex(270+80,175);
      curveVertex(285+80,125);
      curveVertex(270+80,75);
      curveVertex(270+80,75);
      curveVertex(270+80,75);
      curveVertex(330+80,75);
      curveVertex(330+80,75);
      curveVertex(330+80,75);
      curveVertex(315+80,125);
      curveVertex(330+80,175);
      curveVertex(330+80,175);
      endShape();

      beginShape();
      curveVertex(270-80,175);
      curveVertex(270-80,175);
      curveVertex(285-80,125);
      curveVertex(270-80,75);
      curveVertex(270-80,75);
      curveVertex(270-80,75);
      curveVertex(330-80,75);
      curveVertex(330-80,75);
      curveVertex(330-80,75);
      curveVertex(315-80,125);
      curveVertex(330-80,175);
      curveVertex(330-80,175);
      endShape();

      circle(300,75,60);

      circle(300+80,75,60);

      circle(300-80,75,60);
    }

//eyes
    if (eyes < 1) {
      fill(255,255,255);
      stroke(0);
      strokeWeight(3);
      circle(300,275,90);
      fill(0);
      circle(300,275,40);
    } else if (eyes > 1 & eyes < 2) {
      fill(255,255,255);
      stroke(0);
      strokeWeight(3);
      circle(300-60,275,90);
      fill(0);
      circle(300-60,275,40);

      fill(255,255,255);
      circle(300+60,275,90);
      fill(0);
      circle(300+60,275,40);
    } else {
      fill(255,255,255);
      stroke(0);
      strokeWeight(3);
      circle(300,275,90);
      fill(0);
      circle(300,275,40);

      fill(255,255,255);
      circle(300+110,275,90);
      fill(0);
      circle(300+110,275,40);

      fill(255,255,255);
      circle(300-110,275,90);
      fill(0);
      circle(300-110,275,40);
    }

//smile
    var mouthH = random(400,450);
    var mouthW = random(100,150);

    noFill();
    stroke(0);
    strokeWeight(10);

    beginShape();
    curveVertex((width/2)+mouthW,400);
    curveVertex((width/2)+mouthW,400);
    curveVertex(300,mouthH);
    curveVertex((width/2)-mouthW,400);
    curveVertex((width/2)-mouthW,400);
    endShape();
  }

function mouseClicked() {
    loop();
    noLoop();
    clear();
    background(220);
    //allowing user to click to loop another random face
  }

Project-02-Variable-Face

In addition to the faces, I tried making each variation bigger after each click, as if the image is approaching you. After a certain size, the image would revert back to the starting size but the variables are still different, giving a new look each time.

var eyesize = 30
var headwidth = 200
var headheight = 270
var headcolor = 255
var red = 0
var green = 0
var blue = 0
var hair = 230
var hairheight = 200
var hairR = 410
var hairheightR = 200
var hairsize = 50
var hairdifference = 10
var lefteyex = 270
var righteyex = 370
var eyeheight = 240
var mouthheight = 50
var tonguelength = 30
var bodysize = 500
var browstartleft = 240
var browstartright = 340
var browheight = 180
var browlength = 50


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

}

function draw() {
    background(red,green,blue);
  //body
    fill(random(90),random(90),random(90))
    ellipse(320,520,bodysize,400);
  //head
    fill(219, 181, 88);
    noStroke();
    ellipse(320,240,headwidth,headheight);
  //parameters
    if(headheight>400) {headheight=270,headwidth=200,
                        hair=230,hairheight=200,
                        hairR=410,hairheightR=200
                        hairsize=50,hairdifference=10
                        lefteyex=270,righteyex=370
                        eyeheight=230,mouthheight=50
                        tonguelength=30,bodysize=500
                        browstartright=340,browstartleft=240
                        browheight=180,browlength=50}
  //hair
    noFill();
    stroke(0,50);
    strokeWeight(5,);
    arc(hair,hairheight,hairsize,30,PI,0);
    arc(hair,hairheight-hairdifference,hairsize,30,PI,0);
    arc(hairR,hairheightR,hairsize,30,PI,0);
    arc(hairR,hairheightR-hairdifference,hairsize,30,PI,0);
  //eyes
    noStroke();
    fill(random(200,255),random(200,255),random(200,255))
    circle(lefteyex,eyeheight,eyesize);
    circle(righteyex,eyeheight,eyesize);
  //mouth
    fill(0);
    rect(250,300,140,mouthheight,50);
  //tongue
    stroke(241, 76, 88);
    arc(320,330,30,tonguelength,0,PI);
  //eyebrows
    noStroke();
    rect(browstartleft,browheight,browlength,10,30);
    rect(browstartright,browheight,browlength,10,30);

}

function mousePressed() {
  red = random(255);
  green = random(255);
  blue = random(255);
  headwidth += 25
  headheight += 30
  hair -= 10
  hairheight -= 5
  hairR += 10
  hairheightR -= 5
  hairsize += 7
  hairdifference += 2
  eyesize = random(50, 70);
  lefteyex -= 7
  righteyex += 7
  eyeheight -= 3
  mouthheight +=10
  tonguelength += 10
  bodysize += 30
  browstartleft -= 7
  browstartright +=7
  browheight = random(150,200);
  browlength += 7
}

Project-02-Variable-Face

sketch-variable-face
	// Huijun Shen D


	var faceWidthA = 100;
    var faceHeightA = 120;
    var faceWidthB = 100;
    var faceWidthB = 100;
    var faceHeightB = 100;
    var eyeWidth = 30;
    var eyeHeight = 30;
    var mouthWidth = 30;
    var mouthHeight = 30;
    var puffRWidth = 30;
    var puffRHeight = 30;
    var puffLwidth = 30;
    var puffLHeight = 30;
    var r = 10;
    var g = 10;
    var b = 10;

 
function setup() {
    createCanvas(640,480);
}
 
function draw() {
    noStroke();
    //bg
    background(r,g,b);    //randomize bg color
    fill(r+30, g+30, b+30);
    rect(width/2-width/3, height/2-height/3, width-width/2-width/3, height -30);
    rect(width/2-width/3+faceWidthB, height/2-height/3, width-width/2-width/3, height -30);
    rect(width/2-width/3+faceWidthB*2, height/2-height/3, width-width/2-width/3, height -30);
    //fill(r, g, b);

    stroke(0)
    fill(219,153,112);
    fill(50+r,50+g,b+50);  //neckDeco
    rect(width/2 - faceWidthB * 0.25, height/2 + faceHeightB/3, faceWidthB/2, faceHeightB/5);  
    fill(247,216,186);
    ellipse(width/2, height/2, faceWidthB, faceHeightB);  //face    
    var eyeLX = width / 2 - faceWidthB * 0.25;
    var eyeRX = width /2 + faceWidthB * 0.25;
    stroke(255,0,0);
    fill(245,140,203);
    ellipse(width / 2- faceWidthB * 0.25, height/2 + faceHeightB * 0.2, puffLwidth, puffLHeight); //puff
    ellipse(width / 2+ faceWidthB * 0.25, height/2 + faceHeightB * 0.2 , puffRWidth, puffRHeight); //puff

    //change eye white cirlce position
    fill(255);
    if (mouseX < width/2) {
        ellipse(eyeLX, height / 2, eyeWidth+20, eyeHeight+15); //eyeWhitCircle
    }else{
        ellipse(eyeRX, height / 2, eyeWidth+20, eyeHeight+15);
    }

    
    fill(0);
    ellipse (eyeLX, height / 2, eyeWidth, eyeHeight); //eye
    ellipse (eyeRX, height / 2, eyeWidth, eyeHeight); //eye
    stroke(0);
    ellipse(width / 2, height/2 + faceHeightB * 0.25, mouthWidth, mouthHeight) //mouth


    noFill();  //hair
    beginShape();
    vertex(width / 2 - faceWidthB * 0.5 ,height / 2 - faceHeightB * 0.5);
    bezierVertex(width / 2 - faceWidthB * 0.3, height / 2 - faceHeightB * 0.3, width / 2 - faceWidthB * 0.25, height / 2 - faceHeightB * 0.2, height / 2 - faceHeightB * 0.1 , height / 2 - faceHeightB * 0.1);
    endShape();

    noFill();  //hair
    beginShape();
    vertex(width / 2 - faceWidthB * 0.65 ,height / 2 - faceHeightB * 0.65);
    bezierVertex(width / 2 - faceWidthB * 0.3, height / 2 - faceHeightB * 0.3, width / 2 - faceWidthB * 0.25, height / 2 - faceHeightB * 0.2, height / 2 - faceHeightB * 0.1 , height / 2 - faceHeightB * 0.1);
    endShape();

    noFill(); //hair
    beginShape();
    vertex(width / 2 + faceWidthB * 0.25 ,height / 2 - faceHeightB * 0.25);
    bezierVertex(width / 2 + faceWidthB * 0.3, height / 2 - faceHeightB * 0.4, width / 2 + faceWidthB * 0.25, height / 2 + faceHeightB * 0.2, width / 2 + faceWidthB * 0.25 , height / 2 - faceHeightB * 0.6);
    endShape();

    noFill();  //hair
    beginShape();
    vertex(width / 2 + faceWidthB * 0.4 ,height / 2 - faceHeightB * 0.4);
    bezierVertex(width / 2 + faceWidthB * 0.4, height / 2 - faceHeightB * 0.5, width / 2 + faceWidthB * 0.3, height / 2 + faceHeightB * 0.25, width / 2 + faceWidthB * 0.25 , height / 2 - faceHeightB * 0.6);
    endShape();

    noFill();  //hair
    beginShape();
    vertex(width / 2 + faceWidthB * 0.6 ,height / 2 - faceHeightB * 0.5);
    bezierVertex(width / 2 + faceWidthB * 0.2, height / 2 - faceHeightB * 0.7, width / 2 + faceWidthB * 0.5, height / 2 + faceHeightB * 0.8, width / 2 + faceWidthB * 0.5 , height / 2 - faceHeightB * 0.9);
    endShape();
}


    function mousePressed() {
        r = random (0,255);
        g = random (0,255);
        b = random (0,255);
        faceWidthA = random(50, 70);
        faceHeightA = random(30,50);
        faceWidthB = random(150,250);
        faceHeightB = random (150, 300);
        eyeWidth = random(10, 30);
        eyeHeight = random(10, 30);
        mouthWidth = random (8, 15);
        mouthHeight = random (5,10);
        puffRWidth = random (10,30);
        puffRHeight = random (5,15);
        puffLwidth = random(10,30);
        puffLHeight = random(5,15);

    }

I tried some basics first then I tried to decorate the background. I would like to make some funny face so that I tried hard to make some ridiculous hair. Not very successful, I should say. I wanted to add some interaction in it so that I tried if/else. If you click on the left half of the canvas, the white circle of the under the eye is on the left, other wise it is on the right side.

Variable Face

sketchDownload
// Simple beginning template for variable face.
var eyeWidth = 30;
var eyeLength = 38;
var faceWidth = 220;
var faceHeight = 180;
var earWidth = 50;
var inEar = 30
var noseWidth = 22;
var noseHeight = 9;
var blushWidth = 40;
var blushHeight = 21;
var snoutWidth = 73
var BlushR = 159;
var BlushG = 66;
var BlushB = 76;
var OutlineR = 106;
var OutlineG = 44;
var OutlineB = 76;
 
function setup() {
    createCanvas(300, 300);
}
 
function draw() {
    background(180);
	
	//EARS
	fill(139, 94, 60);
	stroke(OutlineR, OutlineG, OutlineB);
	strokeWeight(4)
	var earLX = width / 2 - faceWidth * 0.3;
    var earRX = width / 2 + faceWidth * 0.3;
	var earHt = height / 2 - faceHeight * 0.4;
    ellipse(earLX, earHt, earWidth, earWidth);
    ellipse(earRX, earHt, earWidth, earWidth);
	
	fill(BlushR, BlushG, BlushB);
	stroke(OutlineR, OutlineG, OutlineB);
	strokeWeight(4)
	ellipse(earLX, earHt, inEar, inEar);
	ellipse(earRX, earHt, inEar, inEar);
    
	//FACE
	fill(139, 94, 60);
	stroke(OutlineR, OutlineG, OutlineB);
	strokeWeight(4)
	ellipse(width / 2, height / 2, faceWidth,  faceHeight); 


	//EYES
	stroke(OutlineR, OutlineG, OutlineB);
	strokeWeight(4)
	var eyeLX = width / 2 - faceWidth * 0.25; //EYE
    var eyeRX = width / 2 + faceWidth * 0.25;
    arc(eyeLX, height - 180, eyeWidth, eyeLength, radians(0),radians(180), OPEN);
	arc(eyeRX, height - 180, eyeWidth, eyeLength, radians(0),radians(180), OPEN);
    
	//SNOUT
	fill(169, 124, 80);
	noStroke();
	beginShape();
    vertex(width/2, width / 2 - faceWidth * 0.2);
    vertex(width / 2 + faceWidth * 0.2, width/2);
    vertex(width/2, width / 2 + faceWidth * 0.2);
    vertex(width / 2 - faceWidth * 0.2, width/2);
    endShape(CLOSE);
	
	//MOUTH
	stroke(OutlineR, OutlineG, OutlineB);
	strokeWeight(4)
	beginShape();
    vertex(width/2, height / 2 - faceHeight * 0.1);
	vertex(width/2, height / 2 + faceHeight * 0.02);
    vertex(width / 2 + faceWidth * 0.08, width / 2 + faceWidth * 0.05);
	endShape();
	beginShape();
    vertex(width/2, height / 2 - faceHeight * 0.1);
	vertex(width/2, height / 2 + faceHeight * 0.02);
    vertex(width / 2 - faceWidth * 0.08, width / 2 + faceWidth * 0.05);
	endShape();
	
	//NOSE
	fill(OutlineR, OutlineG, OutlineB);
	noStroke();
	var noseHt = height / 2 - faceHeight * 0.1;
	ellipse(width/ 2, noseHt, noseWidth, noseHeight);
	
	
	//BLUSH
	fill(BlushR, BlushG, BlushB);
	noStroke();
	var blushLx = width / 2 - faceWidth * 0.32;
	var blushRx = width / 2 + faceWidth * 0.32; 
	ellipse(blushLx, height - 150, blushWidth, blushHeight); 
	ellipse(blushRx, height - 150, blushWidth, blushHeight);
}
 
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(130, 230);
    faceHeight = random(120, 200);
    eyeWidth = random(10, 30);
	eyeLength = random(10, 50);
	earWidth = random(40, 60);
	inEar = random(10, 30);
	noseWidth = random(22, 28);
	noseHeight = random(9,15);
	blushWidth = random(10,40);
	blushHeight = random(10,21);
	BlushR = random(140,180);
    BlushG = random(40,80);
    BlushB = random(60,80);
	OutlineR = random(0,200);
    OutlineG = random(0,200);
    OutlineB = random(0,200);
}

My Many Faces

It was really fun making a bunch of different faces. I really wanted to experiment with color, not just focus on the faces. So, you should be able to see that the colors change depending on the face I make. Also, I enjoyed making laugh lines for my happy face!

sketch-SarahLDownload
function setup() {
    createCanvas(640,480);
    background(247,221,235);
    text("p5.js vers 0.9.0 test.", -3, -3);
    text("Sarah",603,476);
}

function draw() {
    noStroke();

    // hair
    fill(38,23,8);
    ellipse(320,260,300,450);

    // face
    fill(235,190,143);
    ellipse(320,250,200,270);

    // ears
    circle(220,240,25);
    circle(420,240,25);

    // neck
    rect(297,300,50,150);

    // nose
    stroke(255,222,179);
    strokeWeight(2);
    triangle(310,285,320,250,330,285);

    // bangs
    noStroke();
    fill(38,23,8);
    arc(250,110,160,190,-.18,HALF_PI+QUARTER_PI,OPEN); // left
    arc(370,125,125,130,QUARTER_PI,-2.5,OPEN);         // right

    // This is my happy face
    if(mouseIsPressed & (mouseY < (height * .33))) {
	// eyebrows
        noFill();
        stroke(38, 23, 8);
        arc(275, 227, 60, 50, (5 * PI) / 4, (7 * PI) / 4); // left
        arc(365, 227, 60, 50, (5 * PI) / 4, (7 * PI) / 4); // right

        // mouth
        fill(255, 255, 255);
        stroke(255, 0, 0);
        strokeWeight(4);
        arc(320, 315, 55, 55, 0, PI, CHORD);
        stroke(0);
        strokeWeight(1);
        line(297.5, 326.5, 342.5, 326.5);

        // eyes
        stroke(0);
        strokeWeight(6);
        line(260,227,290,227); // left
        line(350,227,380,227); // right

        // crows feet - left
        stroke(0);
        strokeWeight(1);
        line(243,233,255,227);
        line(243,227,255,227);
        line(243,222,255,227);

        // crows feet - right
        line(385,227,397,233); 
        line(385,227,397,227);
        line(385,227,397,222);

	// upper body   
	stroke(0);
	strokeWeight(1);
        fill(255,255,153);
        rect(250, 410, 140, 70);
    }

    // This is my surprised face
    else if(mouseIsPressed & (mouseY > (height * .66))) {
        // eyebrows
        noFill();
        stroke(38, 23, 8);
        arc(275, 225, 60, 50, (5 * PI) / 4, (7 * PI) / 4); // left
        arc(365, 225, 60, 50, (5 * PI) / 4, (7 * PI) / 4); // right
	   
        // mouth
        noStroke();
        fill(0,0,0);
        circle(320, 325, 40, 40);

        // eyes (outer)
        stroke(0);
        strokeWeight(1);
        fill(255,255,255);
        arc(275, 233, 30, 30, PI, 0, CHORD); // left
        arc(365, 233, 30, 30, PI, 0, CHORD); // right

        //eyeballs
        fill(75, 45, 14);
        circle(275, 225.55555, 12, 12); // left
        circle(365, 225.5, 12, 12);     // right
        noStroke();
        fill(0, 0, 0);
        circle(275, 225., 6.5, 6.5);    // left
        circle(365, 225.5, 6.5, 6.5);   // right
        fill(255, 255, 255);
        circle(277, 224, 1, 1);         // left
        circle(367, 224, 1, 1);         // right
    
        // upper body 
        stroke(0);
        strokeWeight(1);
        fill(0,76,153);
        rect(250, 410, 140, 70);
    }

    // This is my angry face
    else if(mouseIsPressed) {
        // eyebrows
        stroke(38,23,8);
        strokeWeight(3);
        line(260,205,290,213); // left
        line(350,213,380,205); // right

        // mouth
        stroke(0);
        strokeWeight(6);
        line(298,327,343,327);

        // eyes (outer)                       
        stroke(0);
        strokeWeight(1);
        fill(255,255,255);
        arc(275, 233, 30, 30, PI, 0, CHORD); // left
        arc(365, 233, 30, 30, PI, 0, CHORD); // right

        //eyeballs    
        fill(75, 45, 14);
        circle(275, 225.55555, 12, 12); // left
        circle(365, 225.5, 12, 12);     // right
        noStroke();     
        fill(0, 0, 0);                
        circle(275, 225., 6.5, 6.5);    // left
        circle(365, 225.5, 6.5, 6.5);   // right
        fill(255, 255, 255);
        circle(277, 224, 1, 1);         // left
        circle(367, 224, 1, 1);         // right	
    
        // upper body 
        stroke(0);
        strokeWeight(1);
        fill(205,0,0);
        rect(250, 410, 140, 70);
    }

    // This is my neutral face
    else {
        // eyebrows
        noFill();
        stroke(38, 23, 8);
        arc(275, 227, 60, 50, (5 * PI) / 4, (7 * PI) / 4); // left
        arc(365, 227, 60, 50, (5 * PI) / 4, (7 * PI) / 4); // right
       
        // mouth
	stroke(255,153,204);
	strokeWeight(3);
        line(298,327,343,327)

	// eyes (outer)                       
        stroke(0);
	strokeWeight(1);
        fill(255,255,255);
        arc(275, 233, 30, 30, PI, 0, CHORD); // left
        arc(365, 233, 30, 30, PI, 0, CHORD); // right

        //eyeballs    
        fill(75, 45, 14);
        circle(275, 225.55555, 12, 12); // left
        circle(365, 225.5, 12, 12);     // right
        noStroke();     
        fill(0, 0, 0);                
        circle(275, 225., 6.5, 6.5);    // left
        circle(365, 225.5, 6.5, 6.5);   // right
        fill(255, 255, 255);
        circle(277, 224, 1, 1);         // left
        circle(367, 224, 1, 1);         // right        
    
        // upper body 
        stroke(0);
        strokeWeight(1);
        fill(204,255,229);
        rect(250, 410, 140, 70);
    } 
}

PROJECT-02 (variable faces)

SEAN-02
// SEAN CHEN
// 15-104 A

function setup() {
    smooth();
    createCanvas(600, 600);
}

function mouseClicked() {
    noStroke();
    background(232, 232, 228);

    var cntr = width / 2;
    var facex = random(width/4, width/2);
    var facey = random(width/4, width/2);

    // FACE BASE
    fill(255, 219, 88);
    var x = 10
    var ushift = random(-x, x);
    var rshift = random(-x, x);
    var dshift = random(-x, x);
    var lshift = random(-x, x);
    beginShape();
    curveVertex(cntr+ushift, cntr-facey/2+rshift);
    curveVertex(cntr+facex/2+ushift, cntr-facey/2+rshift);
    curveVertex(cntr+facex/2+rshift, cntr+dshift);
    curveVertex(cntr+facex/2+rshift, cntr+facey/2+dshift);
    curveVertex(cntr+dshift, cntr+facey/2+lshift);
    curveVertex(cntr-facex+dshift, cntr+facey/2+lshift);
    curveVertex(cntr-facex/2+lshift, cntr+ushift);
    curveVertex(cntr-facex/2+lshift, cntr-facey+ushift);
    endShape(CLOSE);
    
    // eye whites
    fill(255);
    var eyew = random(height/20, height/10);
    stroke(255);
    strokeWeight(eyew);
    beginShape(LINES);
    vertex(cntr-facex/4, cntr);
    vertex(cntr-facex/4, cntr-facey/4);
    vertex(cntr+facex/4, cntr);
    vertex(cntr+facex/4, cntr-facey/4);
    endShape();

    // pupils
    stroke(0);
    strokeWeight(eyew/4*3);
    var pupil = eyew/8*5;
    var lshift = random(-5, 5);
    var rshift = random(-5, 5);
    beginShape(POINTS);
    vertex(cntr-facex/4+lshift, cntr-5+2*rshift);
    vertex(cntr-facex/4+lshift, cntr-5-pupil+2*rshift);
    vertex(cntr+facex/4+rshift, cntr-5+2*lshift);
    vertex(cntr+facex/4+rshift, cntr-5-pupil+2*lshift);
    endShape();

    // eyelids
    beginShape(POINTS);
    stroke(255, 180, 88);
    strokeWeight(eyew);
    vertex(cntr-facex/4, cntr-facey/4);
    vertex(cntr+facex/4, cntr-facey/4);
    endShape();
    beginShape();
    noStroke();
    fill(255, 180, 88);
    vertex(cntr-facex/4-eyew/2, cntr-facey/4);
    vertex(cntr-facex/4+eyew/2, cntr-facey/4);
    vertex(cntr-facex/4+eyew/2, cntr-facey/4+eyew/2);
    vertex(cntr-facex/4-eyew/2, cntr-facey/4+eyew/2);
    endShape();
    beginShape();
    vertex(cntr+facex/4-eyew/2, cntr-facey/4);
    vertex(cntr+facex/4+eyew/2, cntr-facey/4);
    vertex(cntr+facex/4+eyew/2, cntr-facey/4+eyew/2);
    vertex(cntr+facex/4-eyew/2, cntr-facey/4+eyew/2);
    endShape();

    // eyebrows
    var broww = eyew/2;
    var browshift = random(-10, 10);
    stroke(0);
    strokeWeight(20);
    beginShape();
    curveVertex(cntr-facex/4-broww, cntr-facey/4-eyew/2+browshift);
    curveVertex(cntr-facex/4-broww, cntr-facey/4-eyew/2+browshift);
    curveVertex(cntr-facex/4, cntr-facey/4-eyew/2);
    curveVertex(cntr-facex/4+broww, cntr-facey/4-eyew/2+browshift/4);
    curveVertex(cntr-facex/4+broww, cntr-facey/4-eyew/2+browshift/4);
    endShape();
    beginShape();
    curveVertex(cntr+facex/4-broww, cntr-facey/4-eyew/2+browshift/4);
    curveVertex(cntr+facex/4-broww, cntr-facey/4-eyew/2+browshift/4);
    curveVertex(cntr+facex/4, cntr-facey/4-eyew/2);
    curveVertex(cntr+facex/4+broww, cntr-facey/4-eyew/2+browshift);
    curveVertex(cntr+facex/4+broww, cntr-facey/4-eyew/2+browshift);
    endShape();

    //lips
    var mouthw = facex/4*3
    var mouthshift = random(-100, 100);
    stroke(255, 38, 38);
    strokeWeight(random(30, 50));
    beginShape();
    curveVertex(cntr-mouthw/2, cntr+facey/4+mouthshift);
    curveVertex(cntr-mouthw/2, cntr+facey/4);
    curveVertex(cntr+mouthw/2, cntr+facey/4);
    curveVertex(cntr+mouthw/2, cntr+facey/4+mouthshift);
    endShape();
    stroke(0);
    strokeWeight(5);
    noFill();
    beginShape();
    curveVertex(cntr-mouthw/2, cntr+facey/4+mouthshift);
    curveVertex(cntr-mouthw/2, cntr+facey/4);
    curveVertex(cntr+mouthw/2, cntr+facey/4);
    curveVertex(cntr+mouthw/2, cntr+facey/4+mouthshift);
    endShape();

}

Project 2: Variable Face

For this project, I was inspired by a cute sketch of a tomato (reference at bottom) that I found, and wanted to replicate the same idea onto an apple/tomato that looks more like one or the other depending on the random regeneration after clicking.

sketch Download
// Susie Kim
// Section A
var BodyHeight = 265;
var BodyWidth = 175;
var leafLength = 30;
var leafWidth = 60;
var pupilSize = 35;
var mouthLength = 20;
var stemLength = 150;
var stemThickness = 15;
var nose = 10;
var eyebrowHeight = 300
function setup() {
    createCanvas(480,640);
}

function draw() {
	background(255,218,185);
	// draw  stem
	stroke(0, 139, 0);
	strokeWeight(stemThickness);
	line(230, 320, 230, stemLength);
	// cheeks
	noStroke();
	fill(255,8,0);
	// draw left cheek
	ellipse(180, 320, BodyWidth, BodyHeight);
	// draw right cheek
	ellipse(270, 320, BodyWidth, BodyHeight);
	// leaves
	fill(0,139,0);
	ellipse(200,170, leafWidth, leafLength);
	ellipse(260,160, leafWidth, leafLength);
	// eyes, outer
	fill(255);
	ellipse(170,330,55);
	ellipse(280,330,55);
	// eyes, pupil
	fill (0);
	ellipse(170,335, pupilSize);
	ellipse(280,335, pupilSize);
	// nose:
	fill (230,230,250)
	ellipse(225,365,nose)
	// mouth:
	strokeWeight(3);
	stroke(0);
	line(215, 390, 235, 390);
	// eyebrows
	line(160,eyebrowHeight, 180, eyebrowHeight);
	line(270,eyebrowHeight, 290, eyebrowHeight);
}


function mousePressed() {
    // when the user clicks, the following variables are reassigned
    // randomly depending on the assigned paramenets.
    BodyHeight = random(265, 305);
    BodyWidth = random(175, 225);
    pupilSize = random(25, 45);
    stemLength = random(90, 140);
    stemThickness = random(8, 21);
    leafLength = random(25, 50);
    leafWidth = random(70, 80);
    nose = random(9,20);
    eyebrowHeight = random(250,300)
}