{"id":65390,"date":"2021-09-10T19:12:01","date_gmt":"2021-09-10T23:12:01","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/?p=65390"},"modified":"2021-09-10T19:12:01","modified_gmt":"2021-09-10T23:12:01","slug":"project-02-variable-faces-face-variables-2","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/09\/10\/project-02-variable-faces-face-variables-2\/","title":{"rendered":"Project-02: Variable Faces; Face Variables."},"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 class=\"wp-block-file\"><a class=\"p5_sketch_link\" href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/09\/sketch-75.js\">sketch<\/a><iframe src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/plugins\/p5-embedder\/p5_iframe.html\" class=\"p5_exampleFrame\" width=\"\" height=\"\"><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">\/\/ Simple beginning template for variable face.\nvar eyeSize = 20;\nvar faceWidth = 100;\nvar faceHeight = 150;\nvar noseWidth = 20\nvar noseHeight = 50;\nvar earSize = 20;\nvar hairStyle = 2;\nvar hairSize = 20;\nvar browSize = 10;\n\n\/\/colors\nvar faceR = 100;\nvar faceG = 150;\nvar faceB = 200;\nvar noseR = 100;\nvar noseG = 100;\nvar noseB = 100;\n\n\/\/\n\nfunction setup() {\n    createCanvas(300, 300);\n}\n\nfunction draw() {\n    \/\/face\n    background(180);\n    noStroke();\n    fill(faceR, faceG, faceB);\n    ellipse(width \/ 2, height \/ 2, faceWidth,  faceHeight); \n\n    \/\/ears\n    ellipse(((width \/ 2) - (faceWidth \/ 2)), (height \/ 2), earSize, earSize + 10);\n    ellipse(((width \/ 2) + (faceWidth \/ 2)), (height \/ 2), earSize, earSize + 10);\n\n\n    \/\/eyes\n    fill(0);\n    var eyeLX = width \/ 2 - faceWidth * 0.25; \n    var eyeRX = width \/ 2 + faceWidth * 0.25;\n    ellipse(eyeLX, height \/ 2, eyeSize, eyeSize);\n    ellipse(eyeRX, height \/ 2, eyeSize, eyeSize);\n\n    \/\/nose\n    fill(noseR, noseG, noseB);\n    triangle((width \/ 2), (height \/ 2), (width \/ 2 - 10) , (height \/ 2 + 10), (width \/ 2 + 10), (height \/ 2 + 10));\n\n    \/\/hair\n    ellipse(width \/ 2, ((height \/ 2) - (faceHeight \/ 2) + 10), 60, 30);\n    if (hairStyle &gt; 1){\n         ellipse((width \/ 2), ((height \/ 2) - (faceHeight \/ 2)), hairSize, hairSize);\n       \n    } else {\n        ellipse((width \/ 2 - 30), ((height \/ 2) - (faceHeight \/ 2)), hairSize, hairSize);\n        ellipse((width \/ 2 + 30), ((height \/ 2) - (faceHeight \/ 2)), hairSize, hairSize);\n    }\n\n    \/\/brow\n    rect(eyeLX - 15, height \/ 2 - 30, 30, browSize);\n    rect(eyeRX - 15, height \/ 2 - 30, 30, browSize);\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    \/\/color\n    faceR = random(0, 256);\n    faceG = random(0, 256);\n    faceB = random(0, 256);\n\n    noseR = random(0, 256);\n    noseG = random(0, 256);\n    noseB = random(0, 256);\n\n    faceWidth = random(75, 150);\n    faceHeight = random(100, 200);\n    eyeSize = random(10, 20);\n    earSize = random(20, 40);\n    noseWidth = random(10, 20);\n    noseHeight = random(40, 60);\n    hairSize = random(30, 70);\n    hairStyle = random(0, 2);\n    console.log(hairStyle);\n    browSize = random(10, 20);\n\n\n}<\/code><\/pre><\/div>\n\n\n\n<p><\/p><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>sketch \/\/ Simple beginning template for variable face. var eyeSize = 20; var faceWidth = 100; var faceHeight = 150; var noseWidth = 20 var noseHeight = 50; var earSize = 20; var hairStyle = 2; var hairSize = 20; var browSize = 10; \/\/colors var faceR = 100; var faceG = 150; var faceB &hellip; <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/09\/10\/project-02-variable-faces-face-variables-2\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Project-02: Variable Faces; Face Variables.&#8221;<\/span><\/a><\/p>\n","protected":false},"author":682,"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\/65390"}],"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\/682"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/comments?post=65390"}],"version-history":[{"count":1,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/65390\/revisions"}],"predecessor-version":[{"id":65393,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/65390\/revisions\/65393"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/media?parent=65390"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/categories?post=65390"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/tags?post=65390"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}