{"id":65306,"date":"2021-09-10T11:52:56","date_gmt":"2021-09-10T15:52:56","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/?p=65306"},"modified":"2021-09-10T11:52:56","modified_gmt":"2021-09-10T15:52:56","slug":"project-02-variable-face","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/09\/10\/project-02-variable-face\/","title":{"rendered":"Project 02: Variable Face"},"content":{"rendered":"\n

With each click, the eyes are changed randomly. If the mouse is pressed, the facial expression changes, the arms move up and down, and the character switches between wearing different hats. When the pink button, blue button, or yellow sun button are clicked, either blushing circles, tear tracks, or yellow polka dots will appear.<\/p>\n\n\n\n

sketch<\/a><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">\/\/Alana Wu\n\/\/Section C\n\n\n var faceWidth = 120;\n var eyeLength = 20;\n var x = 200;\n var y = 250;\n var eyeThickness = 5; \/\/for changing eye thickness\n var randomEars = 1; \/\/for changing hat\/ears\n var randomSun = 10; \/\/for changing yellow polka dot locations\n\nfunction setup() {\n createCanvas(640, 480);\n}\n \nfunction draw()\n{\n background (51, 0, 102);\n\n\/\/if mouse is pressed on yellow sun, yellow polka dots appear\n if (mouseIsPressed & mouseX > .7 * width && mouseX < .9 * width\n && mouseY > .1*height && mouseY < .3*height) \n {\n fill (255, 255, 0)\n strokeWeight(0);\n ellipse (randomSun, randomSun*10, faceWidth\/2, faceWidth\/2);\n ellipse (x + randomSun*4, randomSun*2, faceWidth\/4, faceWidth\/4);\n ellipse (randomSun*20, randomSun*6, faceWidth\/5, faceWidth\/5);\n ellipse (randomSun*7, y + randomSun*4, faceWidth\/3, faceWidth\/3);\n ellipse (randomSun*12, y +randomSun*6, faceWidth\/4, faceWidth\/4);\n ellipse (x + randomSun*3, randomSun*2.7, faceWidth\/6, faceWidth\/6);\n ellipse (randomSun*2.2, y +randomSun*5.7, faceWidth\/7, faceWidth\/7);\n ellipse (randomSun*6, y +randomSun*10, faceWidth\/2, faceWidth\/2);\n ellipse (randomSun*12, y +randomSun*12, faceWidth\/3, faceWidth\/3);\n ellipse (randomSun*20, y - randomSun*8, faceWidth\/4, faceWidth\/4);\n ellipse (randomSun*32, y +randomSun*11, faceWidth\/4, faceWidth\/4);\n ellipse (randomSun*28, y -randomSun*6, faceWidth\/3, faceWidth\/3);\n ellipse (randomSun*38, y +randomSun*5, faceWidth\/2, faceWidth\/2);\n ellipse (randomSun*35, y -randomSun*3, faceWidth\/4, faceWidth\/4);\n }\n\n\/\/blush button\n strokeWeight (0);\n fill (255, 0, 127);\n rect (15, 15, 70, 40);\n\n\/\/draws blue tear shape button\n fill (0, 0, 255);\n beginShape();\n curveVertex(50, 100);\n curveVertex(50, 100);\n curveVertex(25, 150);\n curveVertex(50, 175);\n curveVertex(75, 150);\n curveVertex(50, 100);\n curveVertex(75, 150);\n curveVertex(50, 100);\n endShape();\n\n\/\/draws sun\n fill (255, 255, 0);\n ellipse (.8*width, .2*height, width\/5, width\/5);\n strokeWeight(8);\n stroke(255, 255, 0);\n line ( .8*width, .2*height, .8*width + width\/6, .2*height);\n line ( .8*width, .2*height, .8*width, .2*height + width\/6);\n line ( .8*width, .2*height, .8*width, .2*height - width\/6);\n line ( .8*width, .2*height, .8*width - width\/6, .2*height);\n line ( .8*width, .2*height, .8*width + width\/8, .2*height - width\/8);\n line ( .8*width, .2*height, .8*width - width\/8, .2*height - width\/8);\n line ( .8*width, .2*height, .8*width + width\/8, .2*height + width\/8);\n line ( .8*width, .2*height, .8*width - width\/8, .2*height + width\/8);\n fill (255);\n strokeWeight (0);\n ellipse (x, y, faceWidth, faceWidth); \/\/draws head shape\n\n strokeWeight (eyeThickness); \/\/thickness of eye line\n stroke(0);\n line (x - faceWidth\/5, y - faceWidth\/5,\n x - faceWidth\/5, y - faceWidth\/4 + eyeLength); \/\/draws left eye line\n line (x + faceWidth\/5, y - faceWidth\/5,\n x + faceWidth\/5, y - faceWidth\/4 + eyeLength); \/\/draws right eye line\n\n\n\/\/draws body\n strokeWeight(5);\n stroke(255);\n fill (255);\n line (x - faceWidth\/5, y + faceWidth\/2, x - faceWidth\/3, y + faceWidth);\n line (x + faceWidth\/5, y + faceWidth\/2, x + faceWidth\/3, y + faceWidth);\n line (x - faceWidth\/3, y + faceWidth, x + faceWidth\/3, y + faceWidth);\n\/\/draw legs \n line (x - faceWidth\/5, y + faceWidth, x - faceWidth\/5, y + 1.3*faceWidth);\n line (x + faceWidth\/5, y + faceWidth, x + faceWidth\/5, y + 1.3*faceWidth);\n\/\/draw feet \n line (x - faceWidth\/5, y + 1.3*faceWidth, x - faceWidth\/3, y + 1.3*faceWidth);\n line (x + faceWidth\/5, y + 1.3*faceWidth, x + faceWidth\/3, y + 1.3*faceWidth);\n\n\/\/when mouseispressed, arms are lowered\n if (mouseIsPressed)\n {\n line (x - faceWidth\/4, y + .6*faceWidth, x - faceWidth\/2, y + faceWidth);\n line (x + faceWidth\/4, y + .6*faceWidth, x + faceWidth\/2, y + faceWidth);\n stroke(0);\n ellipse (x, y + faceWidth\/7, faceWidth\/4, faceWidth\/4);\n }\n\/\/when mouse isn't pressed, arms are raised \n else\n {\n line (x - faceWidth\/4, y + .6*faceWidth, x - faceWidth, y - faceWidth\/4);\n line (x + faceWidth\/4, y + .6*faceWidth, x + faceWidth, y - faceWidth\/4);\n stroke (0);\n line (x + faceWidth\/5, y + faceWidth\/7, x - faceWidth\/5, y + faceWidth\/7);\n }\n\n\n\/\/blush spots appear when you click \"blush\" button\n if (mouseIsPressed & mouseX > 15 && mouseX < 85 && mouseY > 15 && mouseY < 55)\n {\n strokeWeight (0);\n fill (255, 0, 127);\n ellipse (x + faceWidth\/3, y + faceWidth\/10, faceWidth\/6, faceWidth\/6);\n ellipse (x - faceWidth\/3, y + faceWidth\/10, faceWidth\/6, faceWidth\/6);\n }\n\n\/\/ draws blue tear lines under eyes when blue teardrop is clicked\n if (mouseIsPressed & mouseX > 25 && mouseX < 75 && mouseY > 100 && mouseY < 175)\n {\n stroke (0, 0, 255);\n strokeWeight(8);\n line (x - faceWidth\/5, 1.02*y, x - faceWidth\/5, y + faceWidth\/2);\n line (x + faceWidth\/5, 1.02*y, x + faceWidth\/5, y + faceWidth\/2);\n strokeWeight (0);\n\n }\n\n\/\/depending on random number generated, either panda ears, a cone hat, or a top hat appears\n if (randomEars <= 1) \/\/draws panda ears\n {\n fill (0);\n ellipse (x - faceWidth\/2, y - faceWidth\/2, faceWidth\/2, faceWidth\/2);\n ellipse (x + faceWidth\/2, y - faceWidth\/2, faceWidth\/2, faceWidth\/2);\n fill (255);\n ellipse (x - faceWidth\/2, y - faceWidth\/2, faceWidth\/4, faceWidth\/4);\n ellipse (x + faceWidth\/2, y - faceWidth\/2, faceWidth\/4, faceWidth\/4);\n }\n else if (randomEars <= 2) \/\/draws red top hat w\/ black and white buckle\n {\n strokeWeight (0);\n fill (255, 0, 0);\n rect (x - faceWidth\/2, y - .6*faceWidth, faceWidth, faceWidth\/4);\n rect (x - faceWidth\/4, y - faceWidth, faceWidth\/2, faceWidth\/2);\n fill (0);\n rect (x - faceWidth\/5, y - .58*faceWidth, faceWidth\/2.5, faceWidth\/5.5);\n fill (255);\n rect (x - faceWidth\/9.5, y - .55*faceWidth, faceWidth\/5, faceWidth\/8);\n }\n else if (randomEars <= 3) \/\/draws pink cone hat\n {\n strokeWeight(0);\n fill (255, 0, 127);\n triangle (x, y - 1.2*faceWidth, x - faceWidth\/2.5, y - faceWidth\/3, x + faceWidth\/2.5, y - faceWidth\/3);\n fill (255);\n ellipse (x, y - 1.2*faceWidth, faceWidth\/4, faceWidth\/4);\n } \n}\n\n\nfunction mousePressed ()\n{\n \/\/when user clicks, these variables are reassigned to random values w\/n specific ranges\n eyeLength = random (8, 25);\n eyeThickness = random (5, 12);\n randomEars = random (0, 3);\n randomSun = random (5, width\/10);\n\n}\n\n\n<\/code><\/pre><\/p>\n\n\n\n<p><\/p><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>With each click, the eyes are changed randomly. If the mouse is pressed, the facial expression changes, the arms move up and down, and the character switches between wearing different hats. When the pink button, blue button, or yellow sun button are clicked, either blushing circles, tear tracks, or yellow polka dots will appear. sketch … <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/09\/10\/project-02-variable-face\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> “Project 02: Variable Face”<\/span><\/a><\/p>\n","protected":false},"author":677,"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\/f2021\/wp-json\/wp\/v2\/posts\/65306"}],"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\/677"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/comments?post=65306"}],"version-history":[{"count":7,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/65306\/revisions"}],"predecessor-version":[{"id":66328,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/65306\/revisions\/66328"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/media?parent=65306"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/categories?post=65306"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/tags?post=65306"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}