{"id":71076,"date":"2022-09-10T16:53:20","date_gmt":"2022-09-10T20:53:20","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/?p=71076"},"modified":"2022-09-10T16:53:20","modified_gmt":"2022-09-10T20:53:20","slug":"project-02-variable-face-5","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/09\/10\/project-02-variable-face-5\/","title":{"rendered":"Project 02 Variable Face"},"content":{"rendered":"\n

Variables:<\/strong><\/p>\n\n\n\n

The face changes color as u move your mouse.<\/li>
Eyes and arms follows the mouse.<\/li>
When mouse is pressed, the hands will grow fingers.<\/li><\/ol>
<\/a><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">var mouse = false;\n\nfunction setup() {\n createCanvas(480, 640);\n background(220);\n}\n\nfunction draw() {\n background(220);\n drawFace();\n noFill();\n drawMouth();\n drawTeeth();\n drawLip();\n eyeBallOne();\n eyeBallTwo();\n handOne();\n handTwo();\n}\n\nfunction drawMouth() {\n strokeWeight(4);\n fill(255,0,0,255);\n curve(145, 250, 145, 200, 335, 200, 335, 250);\n curve(145, -400, 145, 200, 335, 200, 335, -400);\n}\n\nfunction drawLip() {\n strokeWeight(4);\n stroke(0);\n noFill();\n curve(145, 250, 145, 200, 335, 200, 335, 250);\n curve(145, -400, 145, 200, 335, 200, 335, -400);\n}\n\nfunction drawTeeth() {\n strokeWeight(3);\n stroke(255);\n line(145, 200, 175, 248);\n line(335, 200, 305, 248);\n line(175, 248, 205, 195);\n line(305, 248, 275, 195);\n line (205, 195, 240, 275);\n line (275, 195, 240, 275);\n}\n\nfunction drawFace() {\n strokeWeight(5);\n let xValue = mouseX\/width*255;\n let yValue = mouseY\/width*255;\n let zValue = (xValue+yValue)\/4;\n fill(xValue,yValue,zValue+120);\n rect (100,100,280,320);\n}\n\nfunction eyeBallOne() {\n strokeWeight(4);\n fill(255,255,255);\n ellipse (150,150,50);\n let angle = atan2(mouseY - 150, mouseX - 150); \/\/ calculate arctangent \/\/\n let x = 150 + 20*0.75*cos(angle);\n let y = 150 + 20*0.75*sin(angle);\n fill(255,0,255);\n circle (x,y,15);\n}\n\nfunction eyeBallTwo() {\n strokeWeight(4);\n fill(255,255,255);\n ellipse (330,150,50);\n let angle = atan2(mouseY - 150, mouseX - 250); \/\/ calculate arctangent \/\/\n let x = 330 + 20*0.75*cos(angle);\n let y = 150 + 20*0.75*sin(angle);\n fill(150,150,0);\n circle (x,y,15);\n}\n\n\nfunction handOne() {\n var x = 100;\n var y = 420;\n var tan = atan2(mouseX-x,mouseY-y);\n if (dist (mouseX,mouseY,x,y) < 200)\n \/\/if arm mouse is within arm distance\/\/\n { var dis = dist (mouseX,mouseY,x,y) \/2;\n \/\/ mid point of distance between mouse and arm\/\/\n var num = (10000)-(dis*dis);\n var sid = sqrt(num);\n \/\/pathegoriam therom\/\/\n stroke (10);\n line (x,y, (mouseX-x)\/2+x+cos(tan)*sid, (mouseY-y)\/2+y-sin(tan)*sid);\n line ((mouseX-x)\/2+x+cos(tan)*sid, (mouseY-y)\/2+y-sin(tan)*sid, mouseX, mouseY);\n fill(255,255,255);\n ellipse ((mouseX-x)\/2+x+cos(tan)*sid, (mouseY-y)\/2+y-sin(tan)*sid, 25,25);\n if (mouse)\n {\n strokeWeight(5);\n line (mouseX, mouseY, mouseX+30, mouseY-30);\n line (mouseX, mouseY, mouseX-30, mouseY-30);\n line (mouseX, mouseY, mouseX, mouseY-60);\n ellipse (mouseX,mouseY,50,50);\n }\n else {\n ellipse (mouseX,mouseY,50,50);\n }\n }\n\n else\n {\n stroke(10);\n line (x,y, x+sin(tan)*200, y+cos(tan)*200);\n fill(255,255,255);\n ellipse (x+sin(tan)*100, y+cos(tan)*100, 25,25);\n if (mouse)\n {\n \/\/hand\/\/\n strokeWeight(5);\n line (x+sin(tan)*200, y+cos(tan)*200, x+sin(tan)*200+30, y+cos(tan)*200-30);\n line (x+sin(tan)*200, y+cos(tan)*200, x+sin(tan)*200-30, y+cos(tan)*200-30);\n line (x+sin(tan)*200, y+cos(tan)*200, x+sin(tan)*200, y+cos(tan)*200-60);\n \/\/fingers\/\/\n ellipse (x+sin(tan)*200, y+cos(tan)*200,50,50);\n }\n else {\n ellipse (x+sin(tan)*200, y+cos(tan)*200,50,50);\n }\n }\n}\n\nfunction handTwo() {\n var x = 380;\n var y = 420;\n var tan = atan2(mouseX-x,mouseY-y);\n if (dist (mouseX,mouseY,x,y) < 200)\n \/\/if arm mouse is within arm distance\/\/\n { var dis = dist (mouseX,mouseY,x,y) \/2;\n \/\/ mid point of distance between mouse and arm\/\/\n var num = (10000)-(dis*dis);\n var sid = sqrt(num);\n \/\/pathegoriam therom\/\/\n stroke (10);\n line (x,y, (mouseX-x)\/2+x-cos(tan)*sid, (mouseY-y)\/2+y+sin(tan)*sid); \n \/\/origin point to the medien of the triangle (isosceles)\/\/\n line ((mouseX-x)\/2+x-cos(tan)*sid, (mouseY-y)\/2+y+sin(tan)*sid, mouseX, mouseY);\n fill(255,255,255);\n ellipse ((mouseX-x)\/2+x-cos(tan)*sid, (mouseY-y)\/2+y+sin(tan)*sid, 25,25);\n if (mouse)\n {\n strokeWeight(5);\n line (mouseX, mouseY, mouseX+30, mouseY-30);\n line (mouseX, mouseY, mouseX-30, mouseY-30);\n line (mouseX, mouseY, mouseX, mouseY-60);\n ellipse (mouseX,mouseY,50,50);\n }\n else {\n ellipse (mouseX,mouseY,50,50);\n }\n }\n\n else\n {\n stroke(10);\n line (x,y, x+sin(tan)*200, y+cos(tan)*200);\n fill(255,255,255);\n ellipse (x+sin(tan)*100, y+cos(tan)*100, 25,25);\n if (mouse)\n {\n strokeWeight(5);\n line (x+sin(tan)*200, y+cos(tan)*200, x+sin(tan)*200+30, y+cos(tan)*200-30);\n line (x+sin(tan)*200, y+cos(tan)*200, x+sin(tan)*200-30, y+cos(tan)*200-30);\n line (x+sin(tan)*200, y+cos(tan)*200, x+sin(tan)*200, y+cos(tan)*200-60);\n ellipse (x+sin(tan)*200, y+cos(tan)*200,50,50);\n }\n else {\n ellipse (x+sin(tan)*200, y+cos(tan)*200,50,50);\n }\n }\n}\n\n\nfunction mousePressed() {\n mouse =!mouse;\n \/\/ when pressed show fingers\/\/\n}<\/code><\/pre><\/p><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>Variables: The face changes color as u move your mouse. Eyes and arms follows the mouse. When mouse is pressed, the hands will grow fingers. var mouse = false; function setup() { createCanvas(480, 640); background(220); } function draw() { background(220); drawFace(); noFill(); drawMouth(); drawTeeth(); drawLip(); eyeBallOne(); eyeBallTwo(); handOne(); handTwo(); } function drawMouth() { strokeWeight(4); fill(255,0,0,255); … <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/09\/10\/project-02-variable-face-5\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> “Project 02 Variable Face”<\/span><\/a><\/p>\n","protected":false},"author":768,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[1],"tags":[82,79],"_links":{"self":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/71076"}],"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\/768"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/comments?post=71076"}],"version-history":[{"count":4,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/71076\/revisions"}],"predecessor-version":[{"id":72062,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/71076\/revisions\/72062"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/media?parent=71076"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/categories?post=71076"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/tags?post=71076"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}