![[OLD SEMESTER] 15-104 • Introduction to Computing for Creative Practice](wp-content/uploads/2023/09/stop-banner.png)
sketch
// 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);
}