{"id":66751,"date":"2021-09-11T17:45:17","date_gmt":"2021-09-11T21:45:17","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/?p=66751"},"modified":"2021-10-16T18:00:12","modified_gmt":"2021-10-16T22:00:12","slug":"project-02-variable-face-5","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/09\/11\/project-02-variable-face-5\/","title":{"rendered":"Project-02-Variable-Face"},"content":{"rendered":"\n

sketch<\/a><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">var faceWidth = 400;\nvar faceHeight = 270;\nvar awidth = 640; \/\/ width as a variable that can change\nvar aheight = 480; \/\/height as a variable that can change\nvar eyeposition = 20;\nvar eyepositionn = 10;\nvar mouthheight = 300; \/\/original position of \nvar mouthemotion = 1;\nvar sidefacewidth = 270;\nvar sidefaceheight = 400;\nvar definetheface = 1\nvar topfence = 0\n\nfunction setup() {\n createCanvas(640, 480);\n}\n \nfunction draw() {\n \n\n\/\/coding for first condition starts\n \n\n if (0<definetheface & definetheface<1){ \/\/first*condition\n background(242,85,0);\n fill(35, 89, 41);\n rect(50,50, 550, 380);\n fill(255,234,117);\/\/face color\n strokeWeight(1);\n ellipse(width \/ 2, height \/ 2, faceWidth, faceHeight);\n var eyeLX = width \/ 2 - faceWidth * 0.2;\n var eyeRX = width \/ 2 + faceWidth * 0.2;\n\n beginShape();\n noFill();\n strokeWeight(2); \n curveVertex(eyeLX - eyeposition, aheight\/2 - eyepositionn);\n curveVertex(eyeLX - eyepositionn , aheight \/ 2 - eyepositionn);\n curveVertex(eyeLX, aheight \/ 2);\n curveVertex(eyeLX - 2* eyepositionn , aheight \/2 - eyepositionn);\n curveVertex(eyeLX - 2* eyeposition, aheight \/2 - eyeposition);\n endShape();\n\n beginShape();\n noFill();\n strokeWeight(2); \n curveVertex(eyeRX - eyeposition, aheight\/2 - eyepositionn);\n curveVertex(eyeRX - eyepositionn , aheight \/ 2 - eyepositionn);\n curveVertex(eyeRX, aheight \/ 2);\n curveVertex(eyeRX - 2* eyepositionn , aheight \/2 - eyepositionn);\n curveVertex(eyeRX - 2* eyeposition, aheight \/2 - eyeposition);\n endShape();\n\n fill(0);\n strokeWeight(1);\n ellipse(width \/ 2, height \/ 2, eyeposition, eyepositionn);\n\n if(0 < mouthemotion & mouthemotion < 1){\n arc(width\/2, mouthheight, 100, 50, 1*Math.PI, 0*Math.PI, CHORD);\n } else if (1 < mouthemotion & mouthemotion < 2){\n arc(width\/2, mouthheight, 100, 50, 0*Math.PI, 1*Math.PI, CHORD); \n } else if (2 < mouthemotion & mouthemotion <3){\n arc(width\/2, mouthheight, 100, 50, 0*Math.PI, 0*Math.PI, CHORD);\n }\n \/\/heart\n fill(255,0,0);\n strokeWeight(1);\n arc(100, 100, 20, 20, PI, 0);\n arc(120, 100, 20, 20, PI, 0);\n triangle(90, 100, 130, 100, 110, 130);\n\n arc(500,200,20,20, PI, 0);\n arc(520,200, 20, 20, PI, 0);\n triangle(490, 200, 530, 200, 510, 230);\n\n strokeWeight(1);\n fill(255,0,0);\n rect(mouseX, mouseY, 50,50)\n fill(0,0,230);\n beginShape();\n vertex(mouseX,mouseY);\n vertex(mouseX+10,mouseY-30);\n vertex(mouseX+25,mouseY-0);\n vertex(mouseX+40,mouseY-40);\n vertex(mouseX+50,mouseY-0);\n endShape(CLOSE);\n \n \n\n\n \/\/coding for second condition starts\n\n }else if (1<definetheface & definetheface<2){ \/\/second*condition\n background(255,0,106);\/\/background color\n fill(0,255,0);\n ellipse(mouseX, mouseY, 40, 40);\n fill(0,0,255);\n strokeWeight(0);\n circle(0,0,50);\n circle(50,0,50);\n circle(100,0,50);\n circle(150,0,50);\n circle(200,0,50);\n circle(250,0,50);\n circle(300,0,50);\n circle(350,0,50);\n circle(400,0,50);\n circle(450,0,50);\n circle(500,0,50);\n circle(550,0,50);\n circle(600,0,50);\n circle(650,0,50);\n\n fill(255); \/\/color of the face\n strokeWeight(1);\n ellipse(width \/ 2, height \/ 2, sidefacewidth, sidefaceheight);\n strokeWeight(2); \/\/stoke of eye\n if(mouthemotion<1.5){\n line(250, 150, 280, 160);\n line(280, 160, 250, 170);\n }else{\n line(260, 150, 230, 160);\n line(230, 160, 260, 170);\n }\n fill(0); \/\/color of the nose\n ellipse(width\/2 - sidefacewidth*0.5, height\/2-sidefaceheight*0.1, sidefacewidth\/5, sidefaceheight\/7);\n if(0 < mouthemotion & mouthemotion < 1){\n arc((width\/2-sidefacewidth\/2)+10, mouthheight, 100, 50, 0*Math.PI, 0.5*Math.PI, CHORD);\n } else if (1 < mouthemotion & mouthemotion < 2){\n arc((width\/2-sidefacewidth\/2)+10, mouthheight, 100, 50, 1.2*Math.PI, 0.6*Math.PI, CHORD); \n } else if (2 < mouthemotion & mouthemotion <3){\n arc((width\/2-sidefacewidth\/2)+10, mouthheight, 70, 30, 0.5*Math.PI, 1.5*Math.PI, CHORD);\n arc((width\/2-sidefacewidth\/2)+10, mouthheight+20, 70, 30, 0.5*Math.PI, 1.5*Math.PI, CHORD);\n }\n fill(0,255,0);\n ellipse(mouseX, mouseY, 40, 40);\n\/\/ coding for third condition starts \n\n }else{ \/\/ third*condition\n background(180);\n strokeWeight(2);\n fill(0,255,0);\n \/\/clover\n circle(mouseX, mouseY, 30);\n circle(mouseX+30, mouseY, 30);\n circle(mouseX+15, mouseY-27,30)\n noFill();\n arc(mouseX-20, mouseY, 70,70, 0*Math.PI, 0.5*Math.PI);\n\n fill(255,77,0);\n strokeWeight(0);\n rect(0,0,30,480);\n rect(610,-30,30, 480);\n\n\n fill(187,240,252);\/\/color of face\n strokeWeight(1);\n ellipse(width\/2-sidefaceheight\/2, height\/2,50); \/\/ear left\n ellipse(640-(width\/2-sidefaceheight\/2),height\/2,50); \/\/ ear right\n ellipse(width\/2, height\/2, sidefaceheight, sidefaceheight);\n\n fill(0);\n ellipse (width\/2 - sidefaceheight*0.2, 100, 20, 10); \/\/left eye\n ellipse (width\/2 + sidefaceheight*0.2, 100, 20, 10); \/\/rught eye\n ellipse (width\/2, height\/2 - sidefaceheight*0.5, 10,10); \/\/nose\n \n\n fill(0);\n if(0 < mouthemotion & mouthemotion < 1){\n arc(width\/2, height\/2, sidefaceheight, sidefaceheight, 0*Math.PI, 1*Math.PI);\n } else if (1 < mouthemotion & mouthemotion < 2){\n arc(width\/2, height\/2, sidefaceheight, sidefaceheight, 0.25*Math.PI, 0.75*Math.PI);\n } else if (2 < mouthemotion & mouthemotion <3){\n arc(width\/2, height\/2, sidefaceheight, sidefaceheight, 1.75*Math.PI, 1.25*Math.PI);\n }\n \n strokeWeight(2);\n fill(0,255,0);\n circle(mouseX, mouseY, 30);\n circle(mouseX+30, mouseY, 30);\n circle(mouseX+15, mouseY-27,30)\n noFill();\n arc(mouseX-20, mouseY, 70,70, 0*Math.PI, 0.5*Math.PI);\n\n }\n}\n\nfunction mousePressed() {\n \/\/ when the user clicks, these variables are reassigned\n \/\/ to random values within specified ranges. For example,\n \/\/ 'faceWidth' gets a random value between 75 and 150.\n faceWidth = random(350, 450);\n faceHeight = random(250, 290);\n eyeposition = random (20,30);\n eyepositionn = random (10,15);\n aheight = random(300,500);\n mouthemotion = random (0,3);\n definetheface = random (0,3);\n sidefacewidth = random (250,300);\n sidefaceheight = random (380,470);\n}\n<\/code><\/pre><\/p><p>\n\n\n\n<\/p><p><\/p><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>sketch var faceWidth = 400; var faceHeight = 270; var awidth = 640; \/\/ width as a variable that can change var aheight = 480; \/\/height as a variable that can change var eyeposition = 20; var eyepositionn = 10; var mouthheight = 300; \/\/original position of var mouthemotion = 1; var sidefacewidth = 270; … <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/09\/11\/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":672,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[97,58],"tags":[],"_links":{"self":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/66751"}],"collection":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/users\/672"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/comments?post=66751"}],"version-history":[{"count":3,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/66751\/revisions"}],"predecessor-version":[{"id":67708,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/66751\/revisions\/67708"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/media?parent=66751"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/categories?post=66751"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/tags?post=66751"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}