Category: Project-02-Variable-Face

Project 2 – Variable Face(s)

I call this piece, “My Parents.” I thought it would be interesting to try to generate some sort of dialogue between two figures each with their own characteristics. It was difficult assigning locations to elements when they were dependent on other variables.

peachproject2
///Boy
var eyeSize = 20;
var faceWidth = 100;
var faceHeight = 150;
var noseWidth = 10
var noseHeight = 5
var b = 40
var b2 = 170
var bodyL = 130
var bodyR = 200
var mouthA = 20
var mouthB = 10
var mouthC = 250
var mouthD = 250 


//Girl
var geyeSize = 20;
var gfaceWidth = 100;
var gfaceHeight = 150;
var gnoseWidth = 10
var gnoseHeight = 5
var mouthWidth = 10
var mouthHeight = 10
var bodyGL = 450
var bodyGR = 510
var g = 50
var g2 = 170

function setup() {
    createCanvas(640, 480);
}
 
function draw() {
  background(180);
    fill(150)
    rect(0,height/3*2, width,height/3)

    
//boy
  noStroke()
    fill(b, b2, 253)
      triangle(width/4, height/2, bodyL, height/5*4, bodyR, height/5*4)
  //eyes
  ellipse(width / 4, height / 2, faceWidth,  faceHeight);
      var eyeLX = width / 4 - faceWidth * 0.25;
      var eyeRX = width / 4 + faceWidth * 0.25;
  fill(255)
      ellipse(eyeLX, height / 2, eyeSize, eyeSize);
      ellipse(eyeRX, height / 2, eyeSize, eyeSize);
  //eyebrows
  stroke(0)
    strokeWeight(3)
      line(eyeLX-6, height/2 - (faceHeight * 0.15), eyeLX + 6,height/2 - (faceHeight * 0.2))  
      line(eyeRX-6, height/2 - (faceHeight * 0.2), eyeRX + 6,height/2 - (faceHeight * 0.15)) 
  //mouth
  stroke(0)
    strokeWeight(3)
    noFill()
      curve (mouthD, mouthC, width/4+5, height/2 + mouthA, width/4+10, height/2+mouthB,mouthC,mouthD);
  //pupils 
  noStroke()
    fill(0)
      ellipse(eyeLX, height / 2, eyeSize * 0.25, eyeSize * 0.25);
      ellipse(eyeRX, height / 2, eyeSize*0.25, eyeSize*0.25);
  //nose
    fill(0)
      rect(width/4, height/2, noseWidth, noseHeight)
 
//girl  
  //body
    fill(220,g,g2)
      triangle(width/4*3, height/2, bodyGL, height/5*4, bodyGR, height/5*4)
  //head
    ellipse(width / 4 * 3, height / 2, gfaceWidth,  gfaceHeight);
  //eyes
      var geyeLX = width / 4 * 3- gfaceWidth * 0.25;
      var geyeRX = width / 4 *3 + gfaceWidth * 0.25;
    fill(255)
        ellipse(geyeLX, height / 2, geyeSize, geyeSize);
        ellipse(geyeRX, height / 2, geyeSize, geyeSize);
    fill(0)
        ellipse(geyeLX, height / 2, geyeSize * 0.25, geyeSize * 0.25);
        ellipse(geyeRX, height / 2, geyeSize*0.25, geyeSize*0.25);
    fill(0) 
  //nose
    ellipse(width/4*3-5, height/2, gnoseWidth, gnoseHeight)
  //eyebrows
    stroke(0)
      strokeWeight(3)
        line(geyeLX-6, height/2 - (faceHeight * 0.2), geyeLX + 6,height/2 - (faceHeight * 0.15))  
        line(geyeRX-6, height/2 - (faceHeight * 0.15), geyeRX + 6,height/2 - (faceHeight * 0.2)) 

  //mouth
    noStroke()
      ellipse(width/4*3-5, height/2 +(faceHeight*0.25), mouthWidth, mouthHeight)

  
}
 
function mousePressed() {
  
  faceHeight = random(100, 170);
  faceWidth = random(75,150)
  eyeSize = random(20, 40)
  noseWidth=random(5,20)
  noseHeight = random(3,10)
  
  gfaceHeight = random(100, 170);
  gfaceWidth = random(75,150)
  geyeSize = random(20, 40)
  gnoseWidth=random(5,20)
  gnoseHeight = random(3,10)
  
  mouthWidth = random (10,30)
  mouthHeight = random (8,30)
  
  b = random(10,200)
  b2 = random(150,225)
  
  g= random(5,140)
  g2 = random(100,150)
  
  bodyL = random (120,135)
  bodyR = random (195,210)
  
  mouthA = random(15,25)
  mouthB = random(15,25)
  mouthC = random(280,320)
  mouthD = random (280,320)
  
  bodyGL = random(430,450)
  bodyGR = random (500, 530)
}

Project-02: Variable Faces

For this project I created a “Random Minion Generator.” Rather than post my horrific sketches – I decided to include the image I saw on Pinterest that inspired the facial variations.

Click through to see all the Bobs, Kevins, and Stuarts.

sketch

//Helen Cheng
//helenc1
//Section C

var canvasX = 480/6 //canvas split into 6/6 grid
var canvasY = 640/6
var eyeType = 1 
var mouthType = 3
var r = 245
var g = 224
var b = 80
var eyeOffsetY = 10
var eyeOffsetX = 0
var mouthOffsetY = 0
var hair = 5

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

function draw() {
    background(r, g, b);
    strokeWeight(5);
  
    //goggles
    fill(0);
    rect(0,canvasY*2.5+eyeOffsetY, 480, canvasY);
  
    //two eyes or one eye
    if (eyeType < 3) {
      //left eye
      fill(255);
      circle(canvasX*2, canvasY*3 + eyeOffsetY, canvasX*2);
      fill(0);
      circle(canvasX*2+eyeOffsetX, canvasY*3 + eyeOffsetY, canvasX);
      //right eye
      fill(255);
      circle(canvasX*4, canvasY*3 + eyeOffsetY, canvasX*2);
      fill(0);
      circle(canvasX*4+eyeOffsetX, canvasY*3 + eyeOffsetY, canvasX);
  }
    else{
      fill(255);
      circle(canvasX*3, canvasY*3+eyeOffsetY, canvasX*2);
      fill(0);
      circle(canvasX*3+eyeOffsetX, canvasY*3+eyeOffsetY, canvasX);
  }
  
     //eyelids open or half open
    if (eyeType < 2) {
        fill(r,g,b);
        arc(canvasX*4, canvasY*3 +eyeOffsetY, canvasX*2, canvasX*2, PI, 0);
        arc(canvasX*2, canvasY*3 +eyeOffsetY, canvasX*2, canvasX*2, PI, 0);
}
    else if (eyeType > 4) {
        fill(r,g,b);
        arc(canvasX*3, canvasY*3+eyeOffsetY, canvasX*2, canvasX*2, PI, 0);
}
        
    //mouth
    if (mouthType < 2) {
        strokeWeight(5);
        line(canvasX*2, mouthOffsetY+canvasY*4, canvasX*3, mouthOffsetY+canvasY*4)
}
    else {
    // smile
        fill(0);
        strokeWeight(0);
        arc(canvasX*3, canvasY*4 + mouthOffsetY, canvasX*2, canvasY, 0, PI);
    //teeth
        fill(255);
        rect(canvasX*2.7, canvasY*4+ mouthOffsetY, canvasY/5, canvasY/5);
        rect(canvasX*3, canvasY*4+mouthOffsetY, canvasY/5, canvasY/5);
}
      //hair
    strokeWeight(hair); 
    line(canvasX*2,canvasY*2+eyeOffsetY,canvasX*2-abs(eyeOffsetY),canvasY+eyeOffsetY);
    line(canvasX*3,canvasY*2+eyeOffsetY,canvasX*3, canvasY+eyeOffsetY);
    line(canvasX*4,canvasY*2+eyeOffsetY,canvasX*4+abs(eyeOffsetY),canvasY+eyeOffsetY);
}

function mouseClicked() {
    eyeType = random(5);
    mouthType = random(1,3);
    r = random(245,255);
    g = random(224,255);
    b = random(0,80);
    eyeOffsetY = random(-canvasY/2,canvasY/2);
    eyeOffsetX = random (-canvasX/2, canvasX/2);
    mouthOffsetY = eyeOffsetY + random(canvasY/2);
    hair = random(0,10)
}

Inspiration:

Minion faces from Pinterest

Project-02: Variable Faces; Face Variables

For this project, I wanted to try and capture the idea that people can have different features, but functionally and physiologically, we aren’t so different. I coded the profile to change (nose shape, head shape, and etcetera) when you click, but the brain always stays the same.

variableface
var noseBridge = 33;
var noseBump = 340;
var noseShape = 17;
var nostrilAngle = 20;
var noseLip = 50;
var lipPurse = 407;
var upperLip = 45;
var lipOut = 40;
var centerLip = 50;
var chinIn = 60;
var chinPoint = 50;
var jawLine = 530;
var lipHeight = 420
var lipTop = 45
var headWidth = 440
var headHeight = 55
var headTop = 110
var r = 235
var g = 205
var b = 167


function setup() {
    createCanvas(480, 640);
}
 
function draw() {
    background(255);
    
    //head
	fill(r, g, b);
	noStroke();
	beginShape();
	curveVertex(454,265);				//last point before back of head shape
	curveVertex(427,208);
	curveVertex(389,headTop+41);
	curveVertex(321,headTop+10);
	curveVertex(248,headTop);			//top of head
	curveVertex(156,128);
	curveVertex(116,164);
	curveVertex(93,210);
	curveVertex(headHeight+21,253);
	curveVertex(headHeight+20,280);
	curveVertex(headHeight,313);		//eyes
	curveVertex(noseBridge,noseBump);	//nose bridge
	curveVertex(noseShape,364);			//nose roundness
	curveVertex(nostrilAngle,377);		//bottom nostril angle
	curveVertex(noseLip,388);			//nostril end to upper lip
	curveVertex(upperLip,lipPurse);		//upper lip
	curveVertex(lipOut,lipHeight);		//upper lip sticking out
	curveVertex(centerLip,429);			//lip center
	curveVertex(lipOut+1,444);			//bottom lip sticking out
	curveVertex(56,lipHeight+lipTop);	//bottom lip
	curveVertex(chinIn,470);			//chin height
	curveVertex(chinPoint,492);			//chin roundness
	curveVertex(63,517);				//chin angles
	curveVertex(83,530);				//jawline
	curveVertex(121,jawLine);			//chin to neck angle
	curveVertex(155,541);
	curveVertex(173,607);
	curveVertex(155,567);			//bottom neck point
	endShape();

	//back of head
	beginShape();
	curveVertex(388,155);
	curveVertex(405,175);
	curveVertex(headWidth+3,219);
	curveVertex(noseShape+headWidth,259);
	curveVertex(noseShape+headWidth+3,298);
	curveVertex(441,358);
	curveVertex(headWidth-30,400);
	curveVertex(399,439);
	curveVertex(396,511);
	curveVertex(401,541);
	curveVertex(169,601);
	curveVertex(335,125);
	endShape();

    //cerebellum
    fill(253, 182, 185);
	strokeWeight(10);
	stroke(241, 113, 110);
    beginShape();
	curveVertex(288,326);
	curveVertex(306,328);
	curveVertex(330,325);
	curveVertex(339,314);
	curveVertex(360,318);
	curveVertex(386,320);
	curveVertex(414,326);
	curveVertex(401,349);
	curveVertex(376,368);
	curveVertex(359,377);
	curveVertex(335,376);
	curveVertex(322,369);
	curveVertex(300,350);
	endShape();

	strokeWeight(6);
	stroke(241, 113, 110);
    beginShape();
	curveVertex(290,329);
	curveVertex(311,344);
	curveVertex(321,330);
	curveVertex(339,330);
	curveVertex(371,332);
	curveVertex(382,342);
	curveVertex(403,342);
	curveVertex(398,349);
	curveVertex(373,349);
	curveVertex(364,339);
	curveVertex(335,345);
	curveVertex(329,329);
	curveVertex(355,351);
	curveVertex(386,358);
	curveVertex(381,364);
	curveVertex(356,361);
	curveVertex(331,351);
	curveVertex(325,356);
	curveVertex(346,366);
	curveVertex(360,371);
	curveVertex(369,371);
	curveVertex(347,375);
	curveVertex(317,362);
	curveVertex(305,352);
	curveVertex(305,334);
	curveVertex(310,330);
	endShape();

    //cortex
	fill(255, 200, 198);
	strokeWeight(12);
	stroke(241, 113, 110);
	beginShape();
	curveVertex(266,127);
	curveVertex(247,124);
	curveVertex(221,130);
	curveVertex(181,143);
	curveVertex(134,172);
	curveVertex(115,194);
	curveVertex(107,220);
	curveVertex(109,240);
	curveVertex(121,259);
	curveVertex(133,274);
	curveVertex(153,283);
	curveVertex(171,287);
	curveVertex(174,307);
	curveVertex(182,326);
	curveVertex(196,332);
	curveVertex(205,340);
	curveVertex(225,346);
	curveVertex(248,341);
	curveVertex(265,329);
	curveVertex(291,325);
	curveVertex(325,324);
	curveVertex(341,314);
	curveVertex(351,318);
	curveVertex(363,318);
	curveVertex(372,322);
	curveVertex(385,322);
	curveVertex(404,322);
	curveVertex(413,320);
	curveVertex(432,300);
	curveVertex(431,282);
	curveVertex(425,265);
	curveVertex(416,235);
	curveVertex(410,215);
	curveVertex(396,197);
	curveVertex(387,185);
	curveVertex(377,171);
	curveVertex(352,154);
	curveVertex(329,144);
	curveVertex(296,131);
	curveVertex(246,125);
	curveVertex(301,132);
	curveVertex(332,147);
	curveVertex(367,162);
	endShape();
	
	//lateral fissure
	noFill();
	strokeWeight(10);
	stroke(241, 113, 110);
	beginShape();
	curveVertex(169,286);
	curveVertex(171,285);
	curveVertex(208,256);
	curveVertex(243,258);
	curveVertex(267,252);
	curveVertex(331,247);
	curveVertex(353,226);
	curveVertex(367,206);
	endShape();

	

	//contours
	noFill();
	strokeWeight(7);
	stroke(241, 113, 110);
	beginShape();
	curveVertex(173,294);
	curveVertex(185,287);
	curveVertex(195,293);
	curveVertex(211,287);
	curveVertex(220,297);
	curveVertex(230,287);
	curveVertex(250,280);
	curveVertex(255,287);
	curveVertex(271,276);
	curveVertex(289,271);
	curveVertex(300,283);
	curveVertex(311,281);
	curveVertex(320,269);
	curveVertex(335,271);
	curveVertex(343,277);
	curveVertex(345,257);
	curveVertex(331,250);	
	endShape();

	beginShape();
	curveVertex(127,216);
	curveVertex(149,233);
	curveVertex(164,224);
	curveVertex(165,210);
	curveVertex(183,201);
	curveVertex(199,210);
	curveVertex(211,206);
	curveVertex(209,180);
	curveVertex(221,166);
	curveVertex(236,159);
	curveVertex(232,147);
	curveVertex(249,132);
	curveVertex(266,126);
	curveVertex(291,131);
	curveVertex(275,150);
	curveVertex(257,169);
	curveVertex(239,169);
	curveVertex(233,189);
	curveVertex(227,211);
	curveVertex(234,231);
	curveVertex(215,257);	
	endShape();

	beginShape();
	curveVertex(331,142);
	curveVertex(330,150);
	curveVertex(319,160);
	curveVertex(303,156);
	curveVertex(298,165);
	curveVertex(285,176);
	curveVertex(283,188);
	curveVertex(266,208);
	curveVertex(253,197);
	curveVertex(261,212);
	curveVertex(252,220);
	curveVertex(245,241);
	curveVertex(249,256);
	endShape();

	beginShape();
	curveVertex(300,235);
	curveVertex(292,211);
	curveVertex(304,184);
	curveVertex(323,177);
	curveVertex(343,161);
	curveVertex(355,167);
	curveVertex(360,178);
	curveVertex(341,189);
	curveVertex(332,210);
	curveVertex(317,225);
	curveVertex(307,227);
	curveVertex(317,235);
	endShape();

	beginShape();
	curveVertex(208,134);
	curveVertex(190,138);
	curveVertex(194,148);
	curveVertex(182,166);
	curveVertex(187,177);
	curveVertex(167,190);
	curveVertex(161,182);
	endShape();


	beginShape();
	curveVertex(118,200);
	curveVertex(126,201);
	curveVertex(135,170);
	curveVertex(142,168);
	curveVertex(119,226);
	curveVertex(136,249);
	curveVertex(144,258);
	curveVertex(161,265);
	curveVertex(178,259);
	curveVertex(193,264);
	curveVertex(193,247);
	curveVertex(188,400);
	endShape();

	beginShape();
	curveVertex(175,160);
	curveVertex(166,157);
	curveVertex(165,171);
	curveVertex(153,196);
	curveVertex(149,215);
	curveVertex(161,228);
	endShape();

	beginShape();
	curveVertex(209,219);
	curveVertex(207,236);
	curveVertex(211,257);
	endShape();

	beginShape();
	curveVertex(400,204);
	curveVertex(352,223);
	curveVertex(369,240);
	curveVertex(377,222);
	curveVertex(390,219);
	curveVertex(401,229);
	curveVertex(409,252);
	curveVertex(397,278);
	endShape();

	beginShape();
	curveVertex(371,256);
	curveVertex(359,256);
	curveVertex(366,265);
	curveVertex(356,283);
	curveVertex(329,294);
	curveVertex(305,301);
	curveVertex(289,295);
	curveVertex(287,288);
	curveVertex(282,299);
	curveVertex(257,309);
	curveVertex(264,331);
	endShape();

	beginShape();
	curveVertex(217,323);
	curveVertex(217,335);
	curveVertex(226,339);
	curveVertex(248,341);
	curveVertex(265,325);
	curveVertex(285,313);
	curveVertex(295,311);
	curveVertex(319,315);
	curveVertex(342,307);
	endShape();

	beginShape();
	curveVertex(191,308);
	curveVertex(197,320);
	curveVertex(211,326);
	curveVertex(220,332);
	curveVertex(227,315);
	curveVertex(242,298);
	curveVertex(261,305);
	endShape();

	beginShape();
	curveVertex(347,315);
	curveVertex(362,319);
	curveVertex(368,305);
	curveVertex(382,303);
	curveVertex(397,300);
	curveVertex(394,273);
	curveVertex(379,258);
	curveVertex(395,251);
	curveVertex(402,228);
	endShape();

	beginShape();
	curveVertex(213,221);
	curveVertex(213,233);
	curveVertex(221,247);
	curveVertex(234,256);
	curveVertex(249,256);
	curveVertex(263,252);
	curveVertex(282,233);
	curveVertex(289,224);
	curveVertex(294,235);
	curveVertex(296,249);
	endShape();
}
 
function mousePressed() {
    // when the user clicks, these variables are reassigned
    // to random values within specified ranges. 

    noseBridge = random(24, 40);
	noseBump = random(330, 340);
	noseShape = random(5, 20);
	nostrilAngle = random(15, 40);
	noseLip = random(40, 50);
	lipPurse = random(402, 410);
	upperLip = random(40, 50);
	lipOut = random(37, 42);
	centerLip = random(45, 52);
	chinIn = random(50, 65);
	chinPoint = random(45, 57);
	jawLine = random(520, 542);
	lipTop = random(30, 42);
	headWidth = random(430, 440);
	headTop = random(100, 118);
	r = random(48, 249);
	g = random(30,223);
	b = random(16, 198);

}

I made some preliminary concept sketches, but mostly used an Image Map HTML Generator to generate some base coordinates and fiddled with those.

My preliminary sketches and coordinate notations

Project 2: Variable Face

variable face cb
var eyeWidth = 55;
var eyeHeight = 70;
var eyeColor = 10;
var earHeight = 180;
var faceWidth = 300;
var faceHeight = 230;
var backgroundR = 245;
var backgroundG = 200;
var backgroundB = 175;
var dressR = 240;
var dressG = 90;
var dressB = 160;
var blushWidth = 30;
var blushHeight = 15;
var bodyWidth = 120;

 
function setup() {
    createCanvas(640, 480);
}
 
function draw() {
    var centerX = width / 2
    var centerY = height / 2
    background(backgroundR, backgroundG, backgroundB);

    //body
    noStroke();
    fill(95, 130, 255);
    ellipse(centerX, centerY + 120, bodyWidth, 50);
    rect(centerX - (bodyWidth / 2), centerY + 120, bodyWidth, 300);

    //ears
    var earLX = centerX - 55
    var earRX = centerX + 55
    var earLH = centerY - earHeight
    var earRH = centerY - earHeight
    stroke(95, 130, 255);
    strokeWeight(10);
    fill(255, 130, 130);
    triangle(centerX - 115, centerY - 60, earLX, centerY - 60, centerX - 70, earLH);
    triangle(centerX + 115, centerY - 60, earRX, centerY - 60, centerX + 70, earRH);

    //dress
    noStroke();
    fill(dressR, dressG, dressB);
    triangle(centerX - 60, height, centerX + 60, height, centerX, centerY - 100);

    //face
    noStroke();
    fill(95, 130, 255);
    ellipse(centerX, centerY, faceWidth,  faceHeight);

    //hair
    //left
    noStroke();
    fill(0, 30, 130);
    beginShape();
    curveVertex(centerX, centerY - 100);
    curveVertex(centerX, centerY - 100);
    curveVertex(centerX - 35, centerY - 90);
    curveVertex(centerX - 50, centerY - 50);
    curveVertex(centerX - 40, centerY - 50);
    curveVertex(centerX, centerY - 100);
    curveVertex(centerX, centerY - 100);
    endShape();
    //center
    noStroke();
    fill(0, 30, 130);
    beginShape();
    curveVertex(centerX, centerY - 100);
    curveVertex(centerX, centerY - 100);
    curveVertex(centerX - 15, centerY - 70);
    curveVertex(centerX, centerY - 35);
    curveVertex(centerX + 15, centerY - 70);
    curveVertex(centerX, centerY - 100);
    curveVertex(centerX, centerY - 100);
    endShape();
    //right
    noStroke();
    fill(0, 30, 130);
    beginShape();
    curveVertex(centerX, centerY - 100);
    curveVertex(centerX, centerY - 100);
    curveVertex(centerX + 35, centerY - 90);
    curveVertex(centerX + 50, centerY - 50);
    curveVertex(centerX + 40, centerY - 50);
    curveVertex(centerX, centerY - 100);
    curveVertex(centerX, centerY - 100);
    endShape();

    //eyes
    var eyeLX = centerX - faceWidth * 0.25;
    var eyeRX = centerX + faceWidth * 0.25;
    noStroke();
    fill(255);
    ellipse(eyeLX, centerY, eyeWidth, eyeHeight);
    ellipse(eyeRX, centerY, eyeWidth, eyeHeight);
    //eye black
    noStroke();
    fill(eyeColor);
    ellipse(eyeLX - 5, centerY + 5, 48, 60);
    ellipse(eyeRX - 5, centerY + 5, 48, 60);
    //eye highlight
    noStroke();
    fill(255);
    triangle(eyeLX, centerY, eyeLX + 20, centerY - 10, eyeLX + 20, centerY + 10);
    triangle(eyeRX, centerY, eyeRX + 20, centerY - 10, eyeRX + 20, centerY + 10);

    //blush
    noStroke();
    fill(210, 150, 170);
    ellipse(eyeLX + 2, centerY + 55, blushWidth, blushHeight);
    ellipse(eyeRX + 2, centerY + 55, blushWidth, blushHeight);

   
    //mouth
    if (mouseY <= (centerY)) {
        //smile
        noFill();
        stroke(0, 30, 130);
        strokeWeight(5);
        beginShape();
        curveVertex(centerX - 32, centerY + 60);
        curveVertex(centerX - 32, centerY + 60);
        curveVertex(centerX - 25, centerY + 70);
        curveVertex(centerX, centerY + 60);
        curveVertex(centerX + 25, centerY + 70);
        curveVertex(centerX + 32, centerY + 60);
        curveVertex(centerX + 32, centerY + 60);
        endShape();
    } else if (mouseY > centerY) {
        //frown
        noFill();
        stroke(0, 30, 130);
        strokeWeight(5);
        beginShape();
        curveVertex(centerX - 25, centerY + 70);
        curveVertex(centerX - 25, centerY + 70);
        curveVertex(centerX, centerY + 60);
        curveVertex(centerX + 25, centerY + 70);
        curveVertex(centerX + 25, centerY + 70);
        endShape();
    }
}
 
function mousePressed() {
    faceWidth = random(280, 330);
    faceHeight = random(210, 300);
    eyeWidth = random(50, 60);
    eyeHeight = random(65, 75);
    eyeColor = random(0, 100);
    backgroundR = random(170, 255);
    backgroundG = random(170, 170);
    backgroundB = random(170, 200);
    blushWidth = random(25, 40);
    blushHeight = random(5, 25);
    bodyWidth = random(110, 150);
    dressR = random(130, 255);
    dressG = random(80, 170);
    dressB = random(110, 150);
    earHeight = random(160, 200);
}

My inspiration for this project was Rosie, a character from the game Animal Crossing. I played around with the variability of the size of the eyes, face, blush, and body as well as the color of the eyes, background, and dress. When creating the two mouth facial expressions, I also explored if statements and curves. Below is a picture of Rosie and my initial Illustrator sketch!

inspiration & sketch

Project2 – Variable Faces

Pikachu is too cute so I make him uglier.

pikachu
/*
 * Fangzheng Zhu
 * fangzhez@andrew.cmu.edu
 * Section D
 *
 * This program draws variable faces.
 */

var eyeSize = 40;
var faceWidth = 100;
var faceHeight = 150;
var cheekSize = 40;
var TopHeadWidth = 210;
var TopHeadHeight = 180;
var BottomHeadWidth = 230;
var BottomHeadHeight = 170;
var x=40;
var y=10;
var r=35;
var z=20;
var ballSize=40;
var a=100;
var b=100;

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

function draw() {
    background(180);
    //Ball
    stroke(0);
    strokeWeight(4);
    fill(255,0,0);
    arc(a,b,ballSize,ballSize,180,360);
    fill(255,255,255);
    arc(a,b,ballSize,ballSize,0,180);
    line(a-ballSize/2,b,a+ballSize/2,b);
    ellipse(a,b,ballSize/4,ballSize/4);

    //TopFace
    noStroke();
    fill(255, 218, 36);
    ellipse(width / 2, height / 2, TopHeadWidth, TopHeadHeight);
    //BottomFace
    ellipse(width / 2, height / 2 + 50, BottomHeadWidth, BottomHeadHeight);

    //Eye black
    fill(0);
    noStroke();
    ellipse(width/2 - 45, height/2 - 10, eyeSize, eyeSize);
    ellipse(width/2 + 45, height/2 - 10, eyeSize, eyeSize);

    //Eye white
    fill(255);
    noStroke();
    ellipse(width/2 - x, height/2 -y, eyeSize - 20, eyeSize - 20);
    ellipse(width/2 + x, height/2 -y, eyeSize - 20, eyeSize - 20);

    //Nose
    fill(0);
    ellipse(width / 2, height / 2 + 20, 10, 5);

    //LeftCheek
    fill(255, 0 , 0);
    noStroke();
    ellipse(width / 2 - BottomHeadWidth/3, height / 2 + 50, cheekSize, cheekSize +10);
    //RightCheek
    ellipse(width / 2 + BottomHeadWidth/3, height / 2 + 50, cheekSize, cheekSize +10);



    //right mouth
    strokeWeight(3);
    stroke(0,0,0);
    fill(255, 218, 36);
    arc(width/2+ 17, height/2 + 30, 45, 45, z, 140);
    arc(width/2- 17, height/2 + 30, 45, 45, 40, 180-z);

    //Left Ear
    fill(255, 218, 36);
    noStroke();
    translate(width/2, height/2);
    rotate(-r);
    ellipse(-30, -150, 50, 150);
    //Right Ear
    rotate(2*r);
    ellipse(30, -150, 50, 150);
}

function mousePressed() {
    eyeSize = random(30, 50);
    BottomHeadWidth = random(210,240);
    BottomHeadHeight = random(150,180);
    TopHeadHeight = random(170, 190);
    TopHeadWidth = random(180,200);
    cheekSize = random(30, 60);
    x = random(30,40);
    y = random (8,12);
    r = random (30,45);
    z = random (10,45);
    ballSize = random (40,100);
    a = random (0,width);
    b = random (0, height);
}

Project 2: Variable Faces

sketch
/* 
 * Amy Lee 
 * amyl2
 * Section B 
 */ 


//template for variable face 
var backgroundColor = 0; 
var shirtColor = 255; 
var faceHeight = 300;
var faceWidth = 290;
var snoutWidth = 330; 
var snoutHeight = 220; 
var earWidth = 150;
var eyeSize = 50; 
var noseHeight = 50; 
var noseWidth = 80; 
var nostHeight = 14; 
var nostWidth = 8; 
var mouthWidth = 50;
var mouthHeight = 30;
var eyebrow = 1; 
var x; 
var y; 
var z; 
var b1 = 224; 
var b2 = 200; 
var b3 = 206; 
var b4 = 230; 
var color1; 
var color2; 
var color3;
var color4; 

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

function draw(){

// -PIG- //
	noStroke(); 
	background(backgroundColor); 
//shirt 
	fill(shirtColor); 
	x = width/2; 
	y = height; 		
	ellipse(x,y/2+snoutHeight,x,y*.6); 
//collar of shirt 
	y = 265; 
	color1 = random(150,255); 
	color2 = random(150,255); 
	color3 = random(150,255); 
	color4 = random(150,255); 
	fill(color1,color2,color3,color4); 
	triangle(x-snoutWidth*.3,y+snoutHeight*.6,x-snoutWidth*.3,y+snoutHeight*.8,x,y+snoutHeight*.7); 
	triangle(x+snoutWidth*.3,y+snoutHeight*.6,x+snoutWidth*.3,y+snoutHeight*.8,x,y+snoutHeight*.7); 
//overall head 
	y = height/2; 
	fill(255,218,224); 
//snout area
	ellipse(x,y+height*.15,snoutWidth,snoutHeight);
//face 
	ellipse(x,y,faceWidth,faceHeight);

//nose 
	fill(247,191,200); 
	ellipse(x,y+snoutHeight*.2,noseWidth,noseHeight); 


//nostrils 
	fill(255,255,255); 
	var nL = x - snoutWidth/15;
	var rL = x + snoutWidth/15;
	ellipse(nL,y+height*.1,nostWidth,nostHeight); 
	ellipse(rL,y+height*.1,nostWidth,nostHeight); 

//eyes
	y = 240;
	fill(48,33,25);
	var eL = x - faceWidth/5
	var eR = x + faceWidth/5
	circle(eL,y,eyeSize); 
	circle(eR,y,eyeSize); 

//overlapping eyes to make them appear closed  
	fill(255,218,224);
	circle(eL,y-10,eyeSize);
	circle(eR,y-10,eyeSize);

//ears 
	fill(247,191,200); 
	var earLX = x - faceWidth*.6; 
	var earY = 175; 
	var earRX = x + faceWidth*.6;

//left ear 
	triangle(earLX,earY,earLX+30,earY+50,earLX+60,earY); 
//right ear 
	triangle(earRX-60,earY,earRX-30,earY+50,earRX,earY); 

//mouth 
	y = 362;
	fill(203,73,95); 
	ellipse(x,y,mouthWidth,mouthHeight);
	fill(255,218,224);
	ellipse(x,y+z,mouthWidth,mouthHeight); 

//eyebrow 
	y = 230 
	fill(48,33,25); 
	if (eyebrow < 2) {
//sad 
		beginShape(); 
		vertex(x-faceWidth*.33,b1); 
		vertex(x-faceWidth*.13,b2);
		vertex(x-faceWidth*.1,b3);
		vertex(x-faceWidth*.31,b4); 
		endShape();

		beginShape(); 
		vertex(x+faceWidth*.33,b1);
		vertex(x+faceWidth*.13,b2);
		vertex(x+faceWidth*.1,b3); 
		vertex(x+faceWidth*.31,b4); 
		endShape(); 

	} else if (eyebrow < 3) { 
//mad 

		beginShape(); 
		vertex(x-faceWidth*.1,b1);
		vertex(x-faceWidth*.33,b2);
		vertex(x-faceWidth*.31,b3);
		vertex(x-faceWidth*.13,b4); 
		endShape();

		beginShape(); 
		vertex(x+faceWidth*.1,b1);
		vertex(x+faceWidth*.33,b2);
		vertex(x+faceWidth*.31,b3); 
		vertex(x+faceWidth*.13,b4); 
		endShape(); 

	} else { 
//neutral

		beginShape(); 
		vertex(x-faceWidth*.33,b1);
		vertex(x-faceWidth*.33,b2);
		vertex(x-faceWidth*.1,b3);
		vertex(x-faceWidth*.1,b4); 
		endShape();

		beginShape(); 
		vertex(x+faceWidth*.33,b1);
		vertex(x+faceWidth*.33,b2);
		vertex(x+faceWidth*.1,b3); 
		vertex(x+faceWidth*.1,b4); 
		endShape(); 
}
}

function mousePressed() {
	backgroundColor = color(random(255), random(255), random(255)); 
	shirtColor = color(random(255), random(255), random(255)); 
	faceWidth = random(230,320); 
	faceHeight = random(240,360); 
	snoutWidth = random(260,380); 
	snoutHeight = random(160,260); 
	noseWidth = random(60,120); 
	noseHeight = random(60,90); 
	nostWidth = random(6,10); 
	nostHeight = random(10,16); 
	eyeSize = random(30,70); 
	mouthWidth = random(30,70);
	z = random(-8,8);
	b1 = random(221,228); 
	b2 = random(197,204); 
	b3 = random(203,207); 
	b4 = random(227,234); 
	eyebrow = random(1,4); 
}

Variable-Face

VariableFaceNWDownload

 /*
Nicholas Wong
Section A
*/

 //Variables
 var eyeSizeR = 50; //Right eye squint amount
 var eyeSizeL = 50; //Left eye squint amount
 var smile = false; //Smile Bool
 var lBrowHeight = 0; //Brow height modifier
 var rBrowHeight = 0; //Brow height modifier
 var browAngle = 0; // Brow Angle
  var nostrilSize = 0; //Nostril size modifier
 var circleShade = 230; //Outer Circle greyscale tone
 var bgColor = 'white' //Background of inner circle

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

    //White Background (hah no it's black)
    background(0);

}

function draw() {

//Circles
	fill(circleShade); //Fill outer circle with variable shade
	ellipse (width/2,height/2+30,500,500); //Outer Circle

	if (bgColor == 'white'){ //Make background circle white
		fill(255);
		stroke(150);
		strokeWeight(4);
		ellipse (width/2,height/2+30,450,450);
	}
	else if (bgColor == 'green'){ //Make background circle green
		fill(255);
		fill(240,255,240);
		stroke(150);
		strokeWeight(4);
		ellipse (width/2,height/2+30,450,450);
	}
	else{ 	//Make background circle blue
		fill(230,230,255);
		stroke(150);
		strokeWeight(4);
		ellipse (width/2,height/2+30,450,450);
	}

// I originally made my face thing 2000x2000
	scale (0.4); //Scaling drawing to fit in canvas
	translate(115,170) //Moving drawing to roughly be in center

//Neck
	noStroke();
	fill(235,190,160);
	rect(547,860,290,160);
	fill(250,205,175);
	rect(730,860,108,160);

//Face Base Shape
	noStroke();
	fill(250, 215, 172);
	beginShape();
	vertex(459,657);
	vertex(499,816);
	vertex(566,899);
	vertex(623,960);
	vertex(749,960);
	vertex(837,871);
	vertex(884,789);
	vertex(914,688);
	vertex(949,533);
	vertex(933,346);
	vertex(890,278);
	vertex(784,252);
	vertex(659,242);
	vertex(561,261);
	vertex(469,336);
	vertex(459,657);
	endShape();


	//Chin Shading
	noStroke();
	fill(250, 205, 175);
	beginShape();
	vertex(635,837);
	vertex(722,839);
	vertex(737,962);
	vertex(629,963);
	vertex(614,922);
	endShape();

	//Face Shading
	noStroke();
	fill(245, 200, 172)
	beginShape();
	vertex(469,200);
	vertex(445,606);
	vertex(499,811);
	vertex(626,960);
	vertex(686,960);
	vertex(672,852);
	vertex(610,795);
	vertex(510,527);
	vertex(538,429);
	endShape();

	//Right Eye
	noStroke();
	fill(250);
	ellipse(570,522,100,eyeSizeR);

	//Left Eye
	noStroke();
	fill(250);
	ellipse(805,522,100,eyeSizeL);

	//Left eye Shading
	noStroke();
	fill(245, 195, 162);
	beginShape();
	vertex(532,451);
	vertex(602,458);
	vertex(641,516);
	vertex(634,550);
	vertex(572,506);
	vertex(533,506);
	vertex(515,508);
	endShape();


	//Right Eye Shading
	noStroke();
	fill(245, 195, 165);
	beginShape();
	vertex(731,523);
	vertex(763,476);
	vertex(856,460);
	vertex(882,517);
	vertex(821,503);
	vertex(779,511);
	vertex(744,556);
	endShape();

	//Brows
	fill(200, 175, 175);

	quad(751,466+rBrowHeight,796,443+rBrowHeight,855,440+rBrowHeight,877,460+rBrowHeight); //Brow height variable added to Y coordinates of quad

	quad(507,438+lBrowHeight,579,437+lBrowHeight,611,461+lBrowHeight,496,454+lBrowHeight); //Brow height variable added to Y coordinates of quad

	//Nose Shading
	noStroke();
	fill(245, 200, 162);
	beginShape();
	vertex(669,573);
	vertex(613,688);
	vertex(617,713);
	vertex(638,694);
	vertex(684,689);
	vertex(674,623);
	endShape();

	//Under Nose Shading
	fill(248, 205, 170);
	quad(643,722,615,789,669,769,674,717);


	//Nostrils
	noStroke();
	fill(230,150,150);
	triangle(643-nostrilSize,695-nostrilSize,662+nostrilSize,707+nostrilSize,641-nostrilSize,707+nostrilSize); //Left
	triangle(715-nostrilSize,708+nostrilSize,739+nostrilSize,706+nostrilSize,728+nostrilSize,698-nostrilSize); //Right

	
	//Mouth
	noStroke();
	fill(245,193,172);
	if (smile) //If smile variable is true, draw smile shape for mouth
	{
		beginShape();
		vertex(595,776);
		vertex(664,784);
		vertex(690,788);
		vertex(719,784);
		vertex(790,776);
		vertex(739,820);
		vertex(693,832);
		vertex(654,820);
		endShape();

	}
	else //If smile variable is false, draw normal mouth
	{
		beginShape();
		vertex(605,792);
		vertex(664,784);
		vertex(690,788);
		vertex(719,784);
		vertex(780,793);
		vertex(739,828);
		vertex(693,832);
		vertex(654,827);
		endShape();
	}


	//Hair
	noStroke();
	fill(30,25,30);
	beginShape();
	vertex(445,644);
	vertex(364,521);
	vertex(375,402);
	vertex(393,263);
	vertex(447,201);
	vertex(563,81);
	vertex(717,45);
	vertex(793,52);
	vertex(890,107);
	vertex(935,160);
	vertex(950,226);
	vertex(950,272);
	vertex(960,308);
	vertex(970,401);
	vertex(950,478);
	vertex(948,550);
	vertex(947,584);
	vertex(935,603);
	vertex(936,451);
	vertex(925,344);
	vertex(889,278);
	vertex(778,266);
	vertex(698,261);
	vertex(599,262);
	vertex(535,292);
	vertex(464,365);
	endShape();

	//Hair Shading
	noStroke();
	fill(25,15,15);
	beginShape();
	vertex(448,607);
	vertex(461,378);
	vertex(557,286);
	vertex(651,254);
	vertex(782,260);
	vertex(920,288);
	vertex(870,189);
	vertex(764,120);
	vertex(679,126);
	vertex(593,162);
	vertex(509,205);
	vertex(426,279);
	vertex(401,409);
	endShape();


}

function mousePressed(){
	eyeSizeL = random(10,50); // Controls squint for left eye
	eyeSizeR = random(10,50); // Controls squint for right eye
	smile = random([true,false]); // Bool for smile or no smile
	lBrowHeight = random(0, -30); // Amount to increase left brow height by
	rBrowHeight = random(0, -30); // Amount to increase right brow height by
	browAngle = random(0,30); // Angle to rotate brow
	nostrilSize = random(0,5); // Amount to increase nostril size
	circleShade = random(0,255); // Greyscale tone for the outer circle in the background
	bgColor = random(['green','blue','white']); // Choose color randomly for background

}

Variable Face

I decided to give this flower a face. I made each eye shape to randomize differently. In addition, the flower occasionally blushes.

VariableFace
/*
 *  Hayoon Choi
 *  hayoonc@andrew.cmu.edu
 *  Section C
 *
 *  Random Face
 */
var reyeWidth = 23;
var reyeHeight = 7;
var leyeWidth = 23;
var leyeHeight = 7;
var headWidth = 160;
var headHeight = 262;
var petalHeight = 150;
var petalR = 237;
var petalG = 227;
var petalB = 98;
var nosePoint = 253.5;
var noseePoint = 243.5;
var blush = 0;

function setup() {
    createCanvas(480, 640);
    frameRate = 10;
}
 
function draw() {
    background(166, 213, 221);
    //clouds
    fill(255);
    circle(100, 50, 70);
    circle(140, 90, 60);
    circle(70, 90, 90);
    circle(150, 60, 50);
    circle(300, 180, 50);
    circle(350, 170, 80);
    circle(375, 120, 85);
    circle(430, 150, 100);
    circle(400, 200, 45);
    //petals
    noStroke();
    fill(petalR, petalG, petalB);
    ellipse(207, 168, 61, petalHeight);
    push();
    translate(290,210);
    rotate(PI / 3.0);
    ellipse(0, 0, 61, petalHeight);
    pop();
    push();
    translate(320,275);
    rotate(HALF_PI);
    ellipse(0, 0, 61, petalHeight);
    pop();
    push();
    translate(310,345);
    rotate(PI / 1.5);
    ellipse(0, 0, 61, petalHeight);
    pop();
    push();
    translate(270,390);
    rotate(PI / 1.25);
    ellipse(0, 0, 61, petalHeight);
    pop();
    push();
    translate(120,210);
    rotate(-PI / 3.0);
    ellipse(0, 0, 61, petalHeight);
    pop();
    push();
    translate(100,275);
    rotate(-HALF_PI);
    ellipse(0, 0, 61, petalHeight);
    pop();
    push();
    translate(100,345);
    rotate(-PI / 1.5);
    ellipse(0, 0, 61, petalHeight);
    pop();
    push();
    translate(114,390);
    rotate(-PI / 1.25);
    ellipse(0, 0, 61, petalHeight);
    pop();
    //shirt
    noStroke();
    fill(112, 163, 72);
    rect(80, 400, 250, 300, 80);
    //leaves
    ellipse(390, 530, 180, 70);
    ellipse(50, 580, 180, 70);
    strokeWeight(2);
    stroke(49, 73, 29);
    line(330, 530, width, 530);
    line(0, 580, 80, 580);
    //v neck
    point(135, 400);
    point(160, 470);
    point(200, 530);
    point(240, 470);
    point(280, 400);
    noStroke();
    fill(201, 170, 109);
    beginShape();
    curveVertex(135, 400);
    curveVertex(135, 400);
    curveVertex(160, 470);
    curveVertex(200, 530);
    curveVertex(240, 470);
    curveVertex(280, 400);
    curveVertex(280, 400);
    endShape();
    //head
    fill(216, 187, 115);
    ellipse(207, 347, headWidth, headHeight);
    noFill();
    strokeWeight(3);
    stroke(153, 128, 80);
    arc(230, 450, 30, 15, 0, PI);
    //eyes
    strokeWeight(1);
    stroke(0);
    fill(255);
    ellipse(189, 312, leyeWidth, leyeHeight);
    ellipse(258, 312, reyeWidth, reyeHeight);
    fill(0);
    noStroke();
    var x = constrain(mouseX, 189 - leyeWidth + 20, 189 + (leyeWidth - 20));
    ellipse(x, 312, 9, 7);
    var xTwo = constrain(mouseX, 257 - reyeWidth + 20, 257 + (reyeWidth - 20));
    ellipse(xTwo, 312, 9, 7);
    //mouth
    fill(214, 116, 146);
    ellipse(245, 368, 20.5, 16.5);
    stroke(0);
    line(236, 368, 256, 368);
    //blush
    if (blush > 1.5) {
        fill(245, 223, 223);
        noStroke();
        ellipse (170, 347, headWidth / 5, headHeight /12);
        ellipse (280, 347, headWidth / 7, headHeight /14);
    }
    //nose
    point(233.5, 307.5);
    point(noseePoint, 320.5);
    point(nosePoint, 350.5);
    point(241.5, 355.5);
    fill(216, 187, 115);
    stroke(0);
    beginShape();
    curveVertex(233.5, 307.5);
    curveVertex(233.5, 307.5);
    curveVertex(noseePoint, 320.5);
    curveVertex(nosePoint, 350.5);
    curveVertex(241.5, 355.5);
    curveVertex(241.5, 355.5);
    endShape();
    noFill();
    arc(236.5, 354.5, 4, 4, PI , TWO_PI);
    //shine
    fill(255);
    noStroke();
    push()
    translate(170 , 250);
    rotate(-PI / 3.75);
    ellipse(0, 0, 40, 10);
    pop();
    ellipse(195, 227, 10, 10);
}

function mousePressed() {
    reyeWidth = random(20, 35);
    reyeHeight = random(7, 25);
    leyeWidth = random(20, 35);
    leyeHeight = random(7, 25);
    headWidth = random(145, 230);
    headHeight = random(260, 350);
    petalHeight = random(100, 250);
    petalR = random(150, 250);
    petalG = random(30, 250);
    petalB = random(40, 220);
    nosePoint = random(245, 350);
    noseePoint = random(240, 280);
    blush = random(0,2);
}

Variable Faces

variable faces
//Rouann Chen, Section B

var facewidth = 450;
var eyesize = 50;
var faceheight = 250;
var smile = 15

function setup() {
    createCanvas(640, 480);
    text("Variable Faces", 10, 15);
}

function draw() {
	background(163, 216, 238);
	fill(255);
	noStroke();
	triangle(width/2, height/2 - faceheight/2 - 80, width/2 - 40, height/2 - faceheight/2 + 40, width/2 + 40, height/2 - faceheight/2 + 40);	//horn
	fill(255, 211, 216);
	ellipse(width/2, height/2, facewidth, faceheight);	//face
	noFill();
	stroke(252, 127, 136);
	arc(width/2, height/2 + faceheight/2*0.7, 80, 30, 0, PI);	//DOUBLE CHIN
	strokeWeight(7);
	point(width/2 - 5, height/2 + 5);
	point(width/2 + 5, height/2 + 5);	//piggy nose
	var eyeLX = width/2 - facewidth * 0.16;
	var eyeRX = width/2 + facewidth * 0.16;
	fill(175, 114, 201);
	stroke(255);
	strokeWeight(9);
	ellipse(eyeLX, height/2 - faceheight*0.05, eyesize, eyesize);	//left eye
	ellipse(eyeRX, height/2 - faceheight*0.05, eyesize, eyesize);	//right eye
	var mouthLX = width/2 - facewidth * 0.13;
	var mouthLY = height/2 + faceheight * 0.17;
	var mouthMX = width/2;
	var mouthMY = height/2 +faceheight * 0.17 + smile;
	var mouthRX = width/2 + facewidth * 0.13;
	var mouthRY = height/2 + faceheight * 0.17;
	stroke(252, 127, 136);
	strokeWeight(3);
	noFill();
	beginShape();
	curveVertex(mouthLX, mouthLY);
	curveVertex(mouthLX, mouthLY);
	curveVertex(mouthMX, mouthMY);
	curveVertex(mouthRX, mouthRY);
	curveVertex(mouthRX, mouthRY);
	endShape();	//mouth
}

function mousePressed() {
	faceheight = random(200, 300);
	facewidth = random(200, 500);
	smile = random(-20, 15);
	eyesize = random(9, 50);

}

Project 2 Variable Face!

Instead of just varying the sizes of the elements of the faces I decided to go with having 2 or 3 set options for each element, then by assigning them numbers and calling them out via the random command, I could get a variation of faces from the set.

tjchen face
//tjchen
//15-104 section a

var face = 2;
var eyesright = 2;
var eyesleft = 2;
var eyesizeL = 5;
var eyesizeR = 5;
var hair = 2;
var mouth = 2;
function setup() {
    createCanvas(480, 600);
    background(255);
    text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {
    background(220);
    rectMode(CENTER); 
    var cenx = (width/2);
    var ceny = (height/2);
    fill(255);
    rect(width/2, height/2, 50, 50);
    // short face
        if (face <=2 ){
            noStroke();
            rect(width/2, height/2, 80, 200, 40);
        } else if (face <= 3){
            noStroke();
            rect(width/2, height/2, 200, 200, 40);
        } else {
            noStroke();
            circle(width/2,height/2 ,200);
        }
    // eyes right
        if (eyesright<=2) {
            fill(0);
            circle((width/2)+ 10, (height/2)-20, eyesizeR);
        } else if(eyesright <=3) {
            fill(0);
            circle((width/2)+ 10, ((height/2)+ 3)-20, eyesizeR);
        } else {
            fill(0);
            circle((width/2)+ 10, ((height/2)- 3)-20, eyesizeR);
        }
    // eyes left
        if (eyesleft<=2) {
            fill(0);
            circle((width/2)- 10, (height/2)-20, eyesizeL);
        } else if(eyesleft <=3) {
            fill(0);
            circle((width/2)- 10, ((height/2)+3)-20, eyesizeL);
        } else {
            fill(0);
            circle((width/2)- 10, ((height/2)-3)-20, eyesizeL);
        }
    //hair 
        if (hair<=2) {
            //fro
            noStroke();
            fill(161, 119, 96);
            circle(cenx,ceny-100,80);
            circle(cenx+30,ceny-100,80);
            circle(cenx+80,ceny-100,80);
            circle(cenx-55,ceny-100,80);
            circle(cenx-80,ceny-100,80);

            circle(cenx,ceny-140,80);
            circle(cenx+30,ceny-135,80);
            circle(cenx+80,ceny-155,80);
            circle(cenx-55,ceny-140,80);
            circle(cenx-80,ceny-145,80);

            circle(cenx,ceny-180,80);
            circle(cenx+30,ceny-190,80);
            circle(cenx+80,ceny-185,80);
            circle(cenx-55,ceny-170,80);
            circle(cenx-80,ceny-180,80);
        } else if (hair<=3){
            //tophat
            noStroke();
            fill(0);
            rect(cenx,ceny-200,80,200);
            rect(cenx,ceny-100,100,20);
        }
    //mouth 
        if (mouth <=2) {
            stroke(0);
            strokeWeight(2);
            line(cenx-40, ceny+20, cenx+40, ceny+20);
        } else {
            fill(255,0,0);
            ellipse(cenx,ceny+20, 40,20);
            stroke(143, 4, 25);
            strokeWeight(2);
            line(cenx-20,ceny+20,cenx+20,ceny+20);
        }

}

function mousePressed(){
    face = (random(1,4)); 
    eyesright = (random(1,4));
    eyesleft = (random(1,4));
    eyesizeR = (random(5,10));
    eyesizeR = (random(5,10));
    hair = (random(1,4));
    mouth = (random(1,4));
}