Variable-Face

 /*
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

}