{"id":65618,"date":"2021-09-11T20:23:41","date_gmt":"2021-09-12T00:23:41","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/?p=65618"},"modified":"2021-09-11T20:32:41","modified_gmt":"2021-09-12T00:32:41","slug":"project-2-variable-faces-9","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/09\/11\/project-2-variable-faces-9\/","title":{"rendered":"Project 2: Variable Faces"},"content":{"rendered":"<!DOCTYPE html PUBLIC \"-\/\/W3C\/\/DTD HTML 4.0 Transitional\/\/EN\" \"http:\/\/www.w3.org\/TR\/REC-html40\/loose.dtd\">\n<html><body><p><a class=\"p5_sketch_link\" data-width=\"480\" data-height=\"640\" href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/09\/generative-faces.js\">generative faces<\/a><iframe src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/plugins\/p5-embedder\/p5_iframe.html\" class=\"p5_exampleFrame\" width=\"480\" height=\"640\"><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">var faceWidth = 135;\nvar faceHeight = 150;\nvar eyeSize = 8;\nvar colG = 90\nvar colB = 40\nvar colR = 150\nvar earWidth = 19\nvar earHeight = 20\nvar hairColorR = 10\nvar hairColorG = 10\nvar hairColorB = 10\nvar hairHeight = 10\nvar hairCurve = 10\nvar hairWidth = 10\nvar noseWidth = 10\nvar noseHeight = 10\nvar noseColorR = 10\nvar noseColorG = 10\nvar noseColorB = 10\nvar mouthWidth = 10\nvar mouthHeight = 10\n \nfunction setup() {\n    createCanvas(480, 640);\n}\n \nfunction draw() {\n    background(241,255,250);\n    noStroke();\n\n    fill(hairColorR, hairColorG, hairColorB) \/\/ hair\n    ellipse(width \/ 2 , height \/ 2 - 40, hairWidth, hairHeight,)\n\n    fill (colR, colG, colB)\n    ellipse(width \/ 2 - 50, height \/ 2, earWidth, earHeight); \/\/ left ear\n\n    fill (colR, colG, colB)\n    ellipse(width \/ 2 + 50, height \/ 2, earWidth, earHeight); \/\/ left ear\n\n    fill(colR, colG, colB)\n    ellipse(width \/ 2, height \/ 2, faceWidth,  faceHeight); \/\/ face\n\n    fill(hairColorR, hairColorG, hairColorB) \/\/ hair and face connector\n    rect(200,255,75,25)\n\n    fill(noseColorR, noseColorG, noseColorB) \/\/ nose\n    ellipse(width \/ 2  , height \/ 2 + 10, noseWidth, noseHeight)\n\n    fill (0) \/\/ eyes\n    var eyeLeft = width \/ 2 - faceWidth * 0.25;\n    var eyeRight = width \/ 2 + faceWidth * 0.25;\n    ellipse(eyeLeft, height \/ 2, eyeSize, eyeSize);\n    ellipse(eyeRight, height \/ 2, eyeSize, eyeSize);\n\n    fill(0) \/\/mouth\n    ellipse(width \/ 2, height \/ 2 + 30, mouthWidth, mouthHeight)\n\n    fill(colR, colG, colB) \/\/mouth 2\n    rect(210,335,60,15)\n\n}\n\nfunction mousePressed() {\n    faceWidth = random(80,100);\n    faceHeight = random(90,120);\n    eyeSize = random(10, 20);\n    colG = random(0,256);\n    colR = random (0,256);\n    colB = random(0,256);\n    earWidth = random(28,30);\n    earHeight = random(20,35);\n    hairColorR = random(0,200);\n    hairColorG = random(0,166);\n    hairColorB = random(10,250);\n    hairHeight = random(80,100);\n    hairWidth = random(100,200);\n    noseColorR = random(4,256);\n    noseColorG = random(10,56);\n    noseColorB = random(0,200);\n    noseWidth = random(8,10);\n    noseHeight = random(2,8);\n    mouthWidth = random(20,30);\n    mouthHeight = random(10,18);\n}<\/code><\/pre><\/p>\n\n\n\n<p>It was quite a challenge trying to understand how to change certain features of the face while making everything connected at the same time and also thinking about how to randomize color was also challenging.<\/p><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>generative faces var faceWidth = 135; var faceHeight = 150; var eyeSize = 8; var colG = 90 var colB = 40 var colR = 150 var earWidth = 19 var earHeight = 20 var hairColorR = 10 var hairColorG = 10 var hairColorB = 10 var hairHeight = 10 var hairCurve = 10 var &hellip; <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/09\/11\/project-2-variable-faces-9\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Project 2: Variable Faces&#8221;<\/span><\/a><\/p>\n","protected":false},"author":653,"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\/65618"}],"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\/653"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/comments?post=65618"}],"version-history":[{"count":8,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/65618\/revisions"}],"predecessor-version":[{"id":65630,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/65618\/revisions\/65630"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/media?parent=65618"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/categories?post=65618"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/tags?post=65618"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}