{"id":65352,"date":"2021-09-10T15:31:41","date_gmt":"2021-09-10T19:31:41","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/?p=65352"},"modified":"2021-09-10T15:35:20","modified_gmt":"2021-09-10T19:35:20","slug":"variable-faces","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/09\/10\/variable-faces\/","title":{"rendered":"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=\"900\" href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/09\/sketch-70.js\">sketch<\/a><a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/09\/sketch-70.js\">file<\/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=\"900\"><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">var eyeSize = 20;\nvar pupilSize = 10;\nvar faceWidth = 100;\nvar faceHeight = 150;\nvar earSize = 30;\nvar eyeColor = 0;\nvar hairHeight = 300;\nvar hairWidth = 200;\nvar mouth = 1;\n\nfunction setup() {\n    createCanvas(480, 640);\n    background(0,200,0);\n    text(\"p5.js vers 0.9.0 test.\", 10, 15);\n}\n\nfunction draw() {\n    background(150,50,25);\n    fill(100);\n    ellipse (width \/ 2, height \/ 2, hairWidth, hairHeight);\n    fill(255,200,162);\n    var earRX = (width \/ 2.1) + (faceWidth * .625);\n    var earLX = (width \/ 1.9) - (faceWidth * .625);\n    ellipse(earRX, height\/2, earSize, earSize);\n    ellipse(earLX, height \/2, earSize, earSize);\n    ellipse(width \/ 2, height \/ 2, faceWidth, faceHeight);\n    fill(100)\n    arc(width \/ 2, height \/ 2.1, hairWidth, hairHeight, PI, 0); \/\/bangs\n    fill(eyeColor);\n    var eyeLX = width \/ 2 - faceWidth * 0.25;\n    var eyeRX = width \/ 2 + faceWidth * 0.25;\n    noFill();\n    strokeWeight(2);\n    arc(width \/ 2, height \/ 1.9, faceWidth \/ 4, faceHeight \/ 4, 0, PI); \/\/nose\n    if (faceHeight &lt;= 150){ \/\/ mouth 1\n        arc(width \/ 2, height \/ 1.8 , faceWidth \/3.5 * 2, faceHeight \/ 5 , 0, PI);\n    } else if (faceHeight &lt;= 170){ \/\/mouth 2\n        arc(width \/ 2, height \/ 1.7, faceWidth \/3.5 * 2.2, faceHeight \/ 5 , PI, 0);\n    } else { \/\/mouth 3\n        line(220, height \/ 1.7, 240, height \/ 1.7);\n     }\n    fill(eyeColor);\n    ellipse(eyeLX, height \/ 2, eyeSize, eyeSize);\n    ellipse(eyeRX, height \/ 2, eyeSize, eyeSize);\n    fill(0);\n    ellipse(eyeLX, height \/ 2, pupilSize, pupilSize);\n    ellipse(eyeRX, height \/ 2, pupilSize, pupilSize);\n     if(hairHeight &lt;faceHeight){ \/\/for no bald head\n    hairHeight = 250};\n}\n\nfunction mousePressed() {\n    faceWidth = random(75, 150);\n    faceHeight = random(100, 200);\n    eyeSize = random(10, 30);\n    pupilSize = random(5, 15);\n    earSize = random(20, 30);\n    eyeColor = random(0, 255, 0, 255, 0, 255);\n    hairWidth = random(150, 225);\n    hairHeight = random(125, 225);\n    mouth = random(0.1);\n}\n <\/code><\/pre><\/p>\n\n\n\n<p>This project was a lot easier for me than the last. I however, spent a lot of time stuck on my if else statements due to a }. Regardless, I made a changing face with eyes that turn different shades of grey and has different smiles. My person kinda looks like an old lady to me.<\/p><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>sketchfile var eyeSize = 20; var pupilSize = 10; var faceWidth = 100; var faceHeight = 150; var earSize = 30; var eyeColor = 0; var hairHeight = 300; var hairWidth = 200; var mouth = 1; function setup() { createCanvas(480, 640); background(0,200,0); text(&#8220;p5.js vers 0.9.0 test.&#8221;, 10, 15); } function draw() { background(150,50,25); fill(100); &hellip; <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/09\/10\/variable-faces\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Variable Faces&#8221;<\/span><\/a><\/p>\n","protected":false},"author":660,"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\/65352"}],"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\/660"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/comments?post=65352"}],"version-history":[{"count":4,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/65352\/revisions"}],"predecessor-version":[{"id":65359,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/65352\/revisions\/65359"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/media?parent=65352"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/categories?post=65352"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/tags?post=65352"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}