{"id":72243,"date":"2022-09-18T02:36:04","date_gmt":"2022-09-18T06:36:04","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/?p=72243"},"modified":"2022-10-01T16:00:50","modified_gmt":"2022-10-01T20:00:50","slug":"project-02-variable-face-12","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/09\/18\/project-02-variable-face-12\/","title":{"rendered":"Project &#8211; 02-Variable Face"},"content":{"rendered":"<!DOCTYPE html PUBLIC \"-\/\/W3C\/\/DTD HTML 4.0 Transitional\/\/EN\" \"http:\/\/www.w3.org\/TR\/REC-html40\/loose.dtd\">\n<html><body><div><a class=\"p5_sketch_link\" href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/09\/sketch-301.js\" data-width=\"640\" data-height=\"480\">sketch<\/a><iframe src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/plugins\/p5-embedder\/p5_iframe.html\" class=\"p5_exampleFrame\" width=\"640\" height=\"480\"><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">\/\/ Emily Franco\n\/\/ efranco\n\/\/ Section C\n\n\/\/color only randomized when page is loaded\nvar x = 0;\n\n\/\/-----SLIDER VARS-----\n\/\/stores latest mouseX position for slider\nvar xPos;\n\/\/stores past x positions\nvar pastXPos=0;\n\/\/bar height\nvar barH = 20;\n\/\/bar height\nvar barWidth = 10;\n\/\/tracks if mouse has been pressed\nvar pressed = 0;\n\n\/\/-----DEFAULT FACE VARS----\nvar eyeWidth = 16;\nvar eyeHeight = 24;\n\nfunction setup() {\n    createCanvas(640, 480);\n    background(220);\n    text(\"p5.js vers 0.9.0 test.\", 10, 15);\n}\n\nfunction draw() {\n\t\/\/reference for position of face elements\n\tvar y_ref_pos = width\/2.5;\n\tstrokeWeight(0);\n\tbackground (138,176,162);\t\n\n\t\/\/header \n\tfill(0);\n\ttextSize (20);\n\ttext ('Slide the arrow to pick a face for me.',10,barH+barWidth+20);\n\n\t\/\/----EMOTION METER----\n\t\/\/meter sliderer mark\n\tfill(\"black\");\n\ttriangle (((width\/5)*2)+(width\/10),barH-2,((width\/5)*2)+(width\/10)-3,barH-7,((width\/5)*2)+(width\/10)+3,barH-7);\n\tif (mouseIsPressed){\n\t\t\/\/draw over 1st triangle background\n\t\tbackground (138,176,162);\t\n\t\ttriangle (xPos=mouseX,barH-2,mouseX-3,barH-7,mouseX+3,barH-7);\n\t\tpressed = 1;\n\t}else if (pressed==1){\n\t\t\/\/draw over 1st triangle background\n\t\tbackground (138,176,162);\t\n\t\ttriangle (xPos,barH-2,xPos-3,barH-7,xPos+3,barH-7);\n\t}\n\t\n\t\/\/meter\n\tfill (85,180,220); \/\/blue\n\t\/\/very happy\n\trect(0,barH,(width\/5),barWidth);\n\t\/\/happy\n\tfill(193,230,90); \/\/green\n\trect(width\/5,barH,(width\/5),barWidth);\n\t\/\/meh...\n\tfill(225,181,37); \/\/yellow\n\trect((width\/5)*2,barH,(width\/5),barWidth);\n\t\/\/shock\n\tfill(252,65,18); \/\/red\n\trect((width\/5)*3,barH,(width\/5),barWidth);\n\t\/\/angry\n\tfill(137,5,5); \/\/dark red\n\trect((width\/5)*4,barH,(width\/5),barWidth);\n\n\t\/\/--------HAIR-------\n\t\/\/back hair\n\tfill (104, 66, 17); \/\/dark brown\n\tellipse (width\/2, y_ref_pos+28,260,400);\n\n\t\/\/--------CLOTHES-------\n\tfill (220, 96, 46); \/\/orange\n\tarc((width\/2)-32+44,y_ref_pos+158,280,70,Math.PI,0);\n\t\/\/shirt \n\trect((width\/2)-87,y_ref_pos+140,181,180);\n\n\t\/\/------DEFALUT FACE-----\n\tstrokeWeight (.25);\n\t\/\/base ears \n\tfill (238, 217, 197); \/\/beige\n\tellipse ((width\/2)-106,y_ref_pos,32,60);\n\tellipse ((width\/2)+106,y_ref_pos,32,60);\n\t\/\/neck \n\tfill (238, 217, 197);\/\/beige\n\tellipse((width\/2)+1, y_ref_pos+130,90,60);\n\tstrokeWeight (0);\n\trect((width\/2)-44, y_ref_pos+90,90,40);\n\t\/\/base face\n\tstroke(\"black\");\n\tstrokeWeight (.5);\n\tellipse (width\/2,y_ref_pos,200,232);\n\n\tif (pressed == 1){\n\t\/\/nose \n\tstrokeWeight (0);\n\tfill (229, 155, 99); \/\/orange\n\ttriangle (width\/2,y_ref_pos-20,(width\/2)-20,y_ref_pos+40, width\/2,y_ref_pos+38);\n\t}\n\n\t\/\/-----EXPRESSIONS----\n\t\/\/mouse position over emotion meter changes face expression\n\t\/\/VERY HAPPY\n\tif (xPos&lt;width\/5){\n\t\t\t\/\/outter eye\n\t\t\tstrokeWeight (0.25);\n\t\t\tfill (242,239,234); \/\/white\n\t\t\tstroke (58,37,22); \/\/dark brown\n\t\t\tcircle ((width\/2)-46,y_ref_pos-20,eyeWidth+40);\n\t\t\tcircle ((width\/2)+46,y_ref_pos-20,eyeWidth+40);\n\t\t\t\/\/eye pupil\n\t\t\tfill (58,37,22);  \/\/dark brown\n\t\t\tcircle ((width\/2)-46,y_ref_pos-20,eyeWidth+30);\n\t\t\tcircle ((width\/2)+46,y_ref_pos-20,eyeWidth+30); \n\t\t\t\/\/eye highlight\n\t\t\tfill (242,239,234); \/\/white\n\t\t\tcircle ((width\/2)-46,y_ref_pos-20,eyeWidth);\n\t\t\tcircle ((width\/2)+46,y_ref_pos-20,eyeWidth);\n\t\t\t\/\/eye small highlights\n\t\t\tfill (242,239,234); \/\/white\n\t\t\tellipse ((width\/2)-56,y_ref_pos-30,eyeWidth-10);\n\t\t\tellipse ((width\/2)+56,y_ref_pos-30,eyeWidth-10); \n\t\t\t\/\/mouth \n\t\t\tstrokeWeight (1);\n\t\t\tstroke(\"black\");\n\t\t\tfill (233, 161, 135); \/\/pink\n\t\t\tarc((width\/2)-2,y_ref_pos+55,80,50,0,3.15);\n\t\t\tline ((width\/2)+38,y_ref_pos+55,(width\/2)-42,y_ref_pos+55);\n\t\t\t\/\/cheeks\n\t\t\tfill (233, 161, 135); \/\/pink\n\t\t\tstrokeWeight (0);\n\t\t\tcircle((width\/2)+54,y_ref_pos+30,40);\n\t\t\tcircle((width\/2)-60,y_ref_pos+30,40);\n\t\t} \n\t\t\/\/HAPPY\n\t\telse if (xPos&lt;(width\/5)*2 & xPos>=width\/5){\n\t\t\t\/\/eyes \n\t\t\tfill (58,37,22); \/\/dark brown\n\t\t\tellipse ((width\/2)-44,y_ref_pos-20,eyeWidth,eyeHeight);\n\t\t\tellipse ((width\/2)+44,y_ref_pos-20,eyeWidth,eyeHeight);\n\t\t\t\/\/mouth\n\t\t\tstrokeWeight (1);\n\t\t\tstroke(\"black\");\n\t\t\tnoFill();\n\t\t\tarc((width\/2)-2,y_ref_pos+70,20,14,0,3);\t\n\t\t\t\/\/cheeks\n\t\t\tfill (233, 161, 135); \/\/pink\n\t\t\tstrokeWeight (0);\n\t\t\tcircle((width\/2)+44,y_ref_pos+30,40);\n\t\t\tcircle((width\/2)-50,y_ref_pos+30,40);\n\t\t} \n\t\t\/\/MEH\n\t\telse if (xPos&lt;(width\/5)*3 & xPos>=(width\/5)*2){\n\t\t\t\/\/mouth \n\t\t\tstrokeWeight (1);\n\t\t\tstroke(\"black\");\n\t\t\tline ((width\/2)+40,y_ref_pos+65,(width\/2)-40,y_ref_pos+65);\n\t\t\t\/\/cheeks\n\t\t\tfill (233, 161, 135); \/\/pink\n\t\t\tstrokeWeight (0);\n\t\t\tcircle((width\/2)+44,y_ref_pos+30,40);\n\t\t\tcircle((width\/2)-50,y_ref_pos+30,40);\n\t\t\t\/\/outter eye\n\t\t\tfill (58,37,22); \/\/dark brown\n\t\t\tcircle ((width\/2)-46,y_ref_pos-20,eyeWidth);\n\t\t\tcircle ((width\/2)+46,y_ref_pos-20,eyeWidth);\n\t\t}\n\t\t\/\/SHOCK \n\t\telse if (xPos&lt;(width\/5)*4 & xPos>=(width\/5)*3){\n\t\t\t\/\/eyes \n\t\t\tfill (58,37,22); \/\/dark brown\n\t\t\tellipse ((width\/2)-44,y_ref_pos-30,eyeWidth+6,eyeHeight*2);\n\t\t\tellipse ((width\/2)+44,y_ref_pos-30,eyeWidth+6,eyeHeight*2);\n\t\t\t\/\/mouth \n\t\t\tstrokeWeight (1);\n\t\t\tstroke(\"black\");\n\t\t\tfill (233, 161, 135); \/\/pink\n\t\t\tarc((width\/2)-2,y_ref_pos+95,40,90,3.15,0);\n\t\t\tline((width\/2)+18,y_ref_pos+95,(width\/2)-22,y_ref_pos+95);\n\t\t\t\/\/cheeks\n\t\t\tfill (233, 161, 135); \/\/pink\n\t\t\tstrokeWeight (0);\n\t\t\tcircle((width\/2)+60,y_ref_pos+30,40);\n\t\t\tcircle((width\/2)-60,y_ref_pos+30,40);\n\t\t} \n\t\t\/\/ANGRY\n\t\telse if (xPos&gt;(width\/5)*4){\n\t\t\t\/\/eyes \n\t\t\tfill (58,37,22); \/\/dark brown\n\t\t\tarc((width\/2)-50,y_ref_pos-20,50,25,0,3.15);\n\t\t\tarc((width\/2)+50,y_ref_pos-20,50,25,0,3.15);\n\t\t\t\/\/eyebrows\n\t\t\tstrokeWeight (3);\n\t\t\tstroke(58,37,22); \/\/dark brown\n\t\t\tline ((width\/2)-75,y_ref_pos-35,(width\/2)-25,y_ref_pos-25);\t\n\t\t\tline ((width\/2)+75,y_ref_pos-35,(width\/2)+25,y_ref_pos-25);\t\n\t\t\t\/\/mouth\n\t\t\tstrokeWeight (2);\n\t\t\tstroke(\"black\");\n\t\t\tnoFill();\n\t\t\tarc((width\/2)-2,y_ref_pos+80,30,40,3.1,0);\n\t\t\n\t\t}\n\n\t\/\/------BODY-----\n\t\/\/shoulders\n\tstrokeWeight (0);\n\tfill (238, 217, 197); \/\/beige\n\tcircle((width\/2)-120, y_ref_pos+182,80);\n\tcircle((width\/2)+126, y_ref_pos+180,80);\n\t\/\/arms\n\trect((width\/2)-160,y_ref_pos+180,80,140);\n\trect((width\/2)+86,y_ref_pos+180,80,140);\n\n\t\/\/-----DETAILS----\n\t\/\/earings\n\tfill (111, 115, 210); \/\/purple\n\tsquare ((width\/2)-114,y_ref_pos+30,16); \n\tsquare ((width\/2)+100,y_ref_pos+30,16);\n\t\/\/bangs\n\tpush();\n\tstrokeWeight(0);\n\tfill (104, 66, 17); \/\/brown \n\trotate (-0.9);\n\tellipse (width\/2-230, y_ref_pos+140,40,150);\n\trotate (1.7);\n\tellipse (width\/2-5, y_ref_pos-330,40,150);\n\tpop();\n\t\/\/hairclip \n\t\/\/random color generated in first loop and only changes when page is reloaded\n\tx=x+30;\n\tif (x==30) {\n\t\tstroke(r=random(200),g=random (200),b=random(200));\n\t}else{\n\t\tstroke(r,g,b);\n\t}\n\tstrokeWeight(4);\n\tline(width\/2+50,y_ref_pos-60,(width\/2)+80,y_ref_pos-80);\n\t\/\/shirt details\n\tstrokeWeight(8);\n\tstroke(r,g,b);\n\tpoint(width\/2, y_ref_pos+200);\n\t\n\n}\n<\/code><\/pre><\/div><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>sketch \/\/ Emily Franco \/\/ efranco \/\/ Section C \/\/color only randomized when page is loaded var x = 0; \/\/&#8212;&#8211;SLIDER VARS&#8212;&#8211; \/\/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 &hellip; <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/09\/18\/project-02-variable-face-12\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Project &#8211; 02-Variable Face&#8221;<\/span><\/a><\/p>\n","protected":false},"author":719,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[97,57],"tags":[],"_links":{"self":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/72243"}],"collection":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/users\/719"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/comments?post=72243"}],"version-history":[{"count":5,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/72243\/revisions"}],"predecessor-version":[{"id":73427,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/72243\/revisions\/73427"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/media?parent=72243"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/categories?post=72243"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/tags?post=72243"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}