Month: September 2022

// Emily Franco
// efranco
// Section C

//color only randomized when page is loaded
var x = 0;

//-----SLIDER VARS-----
//stores latest mouseX position for slider
var xPos;
//stores past x positions
var pastXPos=0;
//bar height
var barH = 20;
//bar height
var barWidth = 10;
//tracks if mouse has been pressed
var pressed = 0;

//-----DEFAULT FACE VARS----
var eyeWidth = 16;
var eyeHeight = 24;

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

function draw() {
	//reference for position of face elements
	var y_ref_pos = width/2.5;
	strokeWeight(0);
	background (138,176,162);	

	//header 
	fill(0);
	textSize (20);
	text ('Slide the arrow to pick a face for me.',10,barH+barWidth+20);

	//----EMOTION METER----
	//meter sliderer mark
	fill("black");
	triangle (((width/5)*2)+(width/10),barH-2,((width/5)*2)+(width/10)-3,barH-7,((width/5)*2)+(width/10)+3,barH-7);
	if (mouseIsPressed){
		//draw over 1st triangle background
		background (138,176,162);	
		triangle (xPos=mouseX,barH-2,mouseX-3,barH-7,mouseX+3,barH-7);
		pressed = 1;
	}else if (pressed==1){
		//draw over 1st triangle background
		background (138,176,162);	
		triangle (xPos,barH-2,xPos-3,barH-7,xPos+3,barH-7);
	}
	
	//meter
	fill (85,180,220); //blue
	//very happy
	rect(0,barH,(width/5),barWidth);
	//happy
	fill(193,230,90); //green
	rect(width/5,barH,(width/5),barWidth);
	//meh...
	fill(225,181,37); //yellow
	rect((width/5)*2,barH,(width/5),barWidth);
	//shock
	fill(252,65,18); //red
	rect((width/5)*3,barH,(width/5),barWidth);
	//angry
	fill(137,5,5); //dark red
	rect((width/5)*4,barH,(width/5),barWidth);

	//--------HAIR-------
	//back hair
	fill (104, 66, 17); //dark brown
	ellipse (width/2, y_ref_pos+28,260,400);

	//--------CLOTHES-------
	fill (220, 96, 46); //orange
	arc((width/2)-32+44,y_ref_pos+158,280,70,Math.PI,0);
	//shirt 
	rect((width/2)-87,y_ref_pos+140,181,180);

	//------DEFALUT FACE-----
	strokeWeight (.25);
	//base ears 
	fill (238, 217, 197); //beige
	ellipse ((width/2)-106,y_ref_pos,32,60);
	ellipse ((width/2)+106,y_ref_pos,32,60);
	//neck 
	fill (238, 217, 197);//beige
	ellipse((width/2)+1, y_ref_pos+130,90,60);
	strokeWeight (0);
	rect((width/2)-44, y_ref_pos+90,90,40);
	//base face
	stroke("black");
	strokeWeight (.5);
	ellipse (width/2,y_ref_pos,200,232);

	if (pressed == 1){
	//nose 
	strokeWeight (0);
	fill (229, 155, 99); //orange
	triangle (width/2,y_ref_pos-20,(width/2)-20,y_ref_pos+40, width/2,y_ref_pos+38);
	}

	//-----EXPRESSIONS----
	//mouse position over emotion meter changes face expression
	//VERY HAPPY
	if (xPos<width/5){
			//outter eye
			strokeWeight (0.25);
			fill (242,239,234); //white
			stroke (58,37,22); //dark brown
			circle ((width/2)-46,y_ref_pos-20,eyeWidth+40);
			circle ((width/2)+46,y_ref_pos-20,eyeWidth+40);
			//eye pupil
			fill (58,37,22);  //dark brown
			circle ((width/2)-46,y_ref_pos-20,eyeWidth+30);
			circle ((width/2)+46,y_ref_pos-20,eyeWidth+30); 
			//eye highlight
			fill (242,239,234); //white
			circle ((width/2)-46,y_ref_pos-20,eyeWidth);
			circle ((width/2)+46,y_ref_pos-20,eyeWidth);
			//eye small highlights
			fill (242,239,234); //white
			ellipse ((width/2)-56,y_ref_pos-30,eyeWidth-10);
			ellipse ((width/2)+56,y_ref_pos-30,eyeWidth-10); 
			//mouth 
			strokeWeight (1);
			stroke("black");
			fill (233, 161, 135); //pink
			arc((width/2)-2,y_ref_pos+55,80,50,0,3.15);
			line ((width/2)+38,y_ref_pos+55,(width/2)-42,y_ref_pos+55);
			//cheeks
			fill (233, 161, 135); //pink
			strokeWeight (0);
			circle((width/2)+54,y_ref_pos+30,40);
			circle((width/2)-60,y_ref_pos+30,40);
		} 
		//HAPPY
		else if (xPos<(width/5)*2 & xPos>=width/5){
			//eyes 
			fill (58,37,22); //dark brown
			ellipse ((width/2)-44,y_ref_pos-20,eyeWidth,eyeHeight);
			ellipse ((width/2)+44,y_ref_pos-20,eyeWidth,eyeHeight);
			//mouth
			strokeWeight (1);
			stroke("black");
			noFill();
			arc((width/2)-2,y_ref_pos+70,20,14,0,3);	
			//cheeks
			fill (233, 161, 135); //pink
			strokeWeight (0);
			circle((width/2)+44,y_ref_pos+30,40);
			circle((width/2)-50,y_ref_pos+30,40);
		} 
		//MEH
		else if (xPos<(width/5)*3 & xPos>=(width/5)*2){
			//mouth 
			strokeWeight (1);
			stroke("black");
			line ((width/2)+40,y_ref_pos+65,(width/2)-40,y_ref_pos+65);
			//cheeks
			fill (233, 161, 135); //pink
			strokeWeight (0);
			circle((width/2)+44,y_ref_pos+30,40);
			circle((width/2)-50,y_ref_pos+30,40);
			//outter eye
			fill (58,37,22); //dark brown
			circle ((width/2)-46,y_ref_pos-20,eyeWidth);
			circle ((width/2)+46,y_ref_pos-20,eyeWidth);
		}
		//SHOCK 
		else if (xPos<(width/5)*4 & xPos>=(width/5)*3){
			//eyes 
			fill (58,37,22); //dark brown
			ellipse ((width/2)-44,y_ref_pos-30,eyeWidth+6,eyeHeight*2);
			ellipse ((width/2)+44,y_ref_pos-30,eyeWidth+6,eyeHeight*2);
			//mouth 
			strokeWeight (1);
			stroke("black");
			fill (233, 161, 135); //pink
			arc((width/2)-2,y_ref_pos+95,40,90,3.15,0);
			line((width/2)+18,y_ref_pos+95,(width/2)-22,y_ref_pos+95);
			//cheeks
			fill (233, 161, 135); //pink
			strokeWeight (0);
			circle((width/2)+60,y_ref_pos+30,40);
			circle((width/2)-60,y_ref_pos+30,40);
		} 
		//ANGRY
		else if (xPos>(width/5)*4){
			//eyes 
			fill (58,37,22); //dark brown
			arc((width/2)-50,y_ref_pos-20,50,25,0,3.15);
			arc((width/2)+50,y_ref_pos-20,50,25,0,3.15);
			//eyebrows
			strokeWeight (3);
			stroke(58,37,22); //dark brown
			line ((width/2)-75,y_ref_pos-35,(width/2)-25,y_ref_pos-25);	
			line ((width/2)+75,y_ref_pos-35,(width/2)+25,y_ref_pos-25);	
			//mouth
			strokeWeight (2);
			stroke("black");
			noFill();
			arc((width/2)-2,y_ref_pos+80,30,40,3.1,0);
		
		}

	//------BODY-----
	//shoulders
	strokeWeight (0);
	fill (238, 217, 197); //beige
	circle((width/2)-120, y_ref_pos+182,80);
	circle((width/2)+126, y_ref_pos+180,80);
	//arms
	rect((width/2)-160,y_ref_pos+180,80,140);
	rect((width/2)+86,y_ref_pos+180,80,140);

	//-----DETAILS----
	//earings
	fill (111, 115, 210); //purple
	square ((width/2)-114,y_ref_pos+30,16); 
	square ((width/2)+100,y_ref_pos+30,16);
	//bangs
	push();
	strokeWeight(0);
	fill (104, 66, 17); //brown 
	rotate (-0.9);
	ellipse (width/2-230, y_ref_pos+140,40,150);
	rotate (1.7);
	ellipse (width/2-5, y_ref_pos-330,40,150);
	pop();
	//hairclip 
	//random color generated in first loop and only changes when page is reloaded
	x=x+30;
	if (x==30) {
		stroke(r=random(200),g=random (200),b=random(200));
	}else{
		stroke(r,g,b);
	}
	strokeWeight(4);
	line(width/2+50,y_ref_pos-60,(width/2)+80,y_ref_pos-80);
	//shirt details
	strokeWeight(8);
	stroke(r,g,b);
	point(width/2, y_ref_pos+200);
	

}