{"id":65581,"date":"2021-09-11T19:03:29","date_gmt":"2021-09-11T23:03:29","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/?p=65581"},"modified":"2021-09-11T19:06:33","modified_gmt":"2021-09-11T23:06:33","slug":"variable-face","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/09\/11\/variable-face\/","title":{"rendered":"Variable Face"},"content":{"rendered":"\n

I thought it would be interesting to make a face that would display a range of emotions principally through the eyebrows and mouth. I also included variability in the size of and distance between the eyes as a kind of variable cuteness metric.<\/p>\n\n\n\n

proj-02<\/a><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">\n\nvar eyeSize = 20; \/\/ determines the size of the eyes\nvar faceWidth = 100; \/\/ determines the height of the face\nvar faceHeight = 150; \/\/ determines the width of the face\nvar eyeWidth = 0.25; \/\/ determines spacing between eyes\nvar browRaise = 20; \/\/ determines eyebrow height above eyes\nvar mood = 10; \/\/ determines eyebrow slant as well as mouth curvature\nvar moodMod = 3; \/\/ determines the intensity of the mouth curvature\n\nfunction setup() {\n createCanvas(300, 300);\n}\n\nfunction draw() {\n background(180);\n strokeWeight(2 * eyeSize);\n stroke(255);\n ellipse(width \/ 2, height \/ 2, faceWidth, faceHeight); \/\/ draws head\n strokeWeight(1);\n stroke(0);\n var eyeLX = width \/ 2 - faceWidth * eyeWidth - eyeSize \/ 2;\n var eyeRX = width \/ 2 + faceWidth * eyeWidth + eyeSize \/ 2;\n fill(0);\n arc(eyeLX, height \/ 2, eyeSize, eyeSize \/ 2, 0, 3); \/\/left eye\n arc(eyeRX, height \/ 2, eyeSize, eyeSize \/ 2, 0, 3); \/\/right eye\n fill(255);\n arc(eyeLX, height \/ 2, eyeSize, eyeSize \/ 2, .5, 1); \/\/left eye highlight\n arc(eyeRX, height \/ 2, eyeSize, eyeSize \/ 2, .5, 1); \/\/right eye highlight\n var browAngle = browRaise + mood;\n line(eyeLX - (eyeSize \/ 2), height \/ 2 - browRaise, eyeLX + (eyeSize \/ 2), height \/ 2 - browAngle); \/\/ Draws left eyebrow\n line(eyeRX + (eyeSize \/ 2), height \/ 2 - browRaise, eyeRX - (eyeSize \/ 2), height \/ 2 - browAngle); \/\/ Draws left eyebrow\n var mouthY = (height \/ 2) + (faceHeight \/ 4);\n var mouthShape = mouthY + moodMod * mood;\n curve(50, mouthShape, eyeLX, mouthY, eyeRX, mouthY, width - 50, mouthShape); \/\/ draws mouth\n \n\n\n\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(75, 150);\n faceHeight = random(100, 200);\n eyeSize = random(10, 50);\n eyeWidth = random(.1, .4);\n browRaise = random(10, 30);\n mood = random(-browRaise, browRaise);\n moodMod = random(1, 4);\n\n}<\/code><\/pre><\/p><p><\/p><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>I thought it would be interesting to make a face that would display a range of emotions principally through the eyebrows and mouth. I also included variability in the size of and distance between the eyes as a kind of variable cuteness metric. proj-02 var eyeSize = 20; \/\/ determines the size of the eyes … <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/09\/11\/variable-face\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> “Variable Face”<\/span><\/a><\/p>\n","protected":false},"author":662,"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\/65581"}],"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\/662"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/comments?post=65581"}],"version-history":[{"count":4,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/65581\/revisions"}],"predecessor-version":[{"id":65592,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/65581\/revisions\/65592"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/media?parent=65581"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/categories?post=65581"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/tags?post=65581"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}