{"id":65427,"date":"2021-09-11T12:48:21","date_gmt":"2021-09-11T16:48:21","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/?p=65427"},"modified":"2021-09-11T12:48:21","modified_gmt":"2021-09-11T16:48:21","slug":"project-02-variable-face-2","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/09\/11\/project-02-variable-face-2\/","title":{"rendered":"Project-02-Variable-Face"},"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\" data-width=\"640\" data-height=\"480\" href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/09\/sketch-77.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=\"640\" height=\"480\"><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">\nvar faceWidth =  150;\nvar faceHeight = 200;\nvar eyeWidth = 45;\nvar eyeHeight = 45;\nvar noseWidth = 7;\nvar red = random(1,255);\nvar green = random(1,255);\nvar blue = random(1,255);\nvar eyebrowWidth= 15;\nvar eyebrowHeight= 15;\nvar mouthHeight=30;\n\n\n\n\n\nfunction setup() {\n    createCanvas(640, 480);\n    \n    text(\"p5.js vers 0.9.0 test.\", 10, 15);\n}\n\nfunction draw() {\n  background(220);\n  \/\/face size and skin color\n  fill(red, green, blue);\n  ellipse(width\/2, height\/2, faceWidth, faceHeight);\n  \n  \n  \/\/eye size\n  \n  \/\/outer eye\n  fill(255,255,255);\n  ellipse(width\/2 + eyeWidth, height\/2 - eyeHeight, faceWidth\/6, faceHeight\/8);\n  ellipse(width\/2 - eyeWidth, height\/2 - eyeHeight, faceWidth\/6, faceHeight\/8);\n  \/\/cornea\n  fill(0,0,0);\n  ellipse(width\/2 + eyeWidth, height\/2 - eyeHeight, faceWidth\/15);\n  ellipse(width\/2 - eyeWidth, height\/2 - eyeHeight, faceWidth\/15);\n  fill(255,255,255);\n  rect(width\/2 + eyeWidth, height\/2 - eyeHeight,4,4);\n  rect(width\/2 - eyeWidth, height\/2 - eyeHeight,4,4);\n  \n  \/\/mouth and eyebrow\n  line(width\/2-mouthHeight, height\/2+mouthHeight, width\/2+mouthHeight, height\/2+mouthHeight);\n  line(width\/2+eyeWidth+eyebrowWidth,height\/2-eyeHeight-eyebrowHeight,width\/2-eyeWidth-eyebrowWidth,height\/2-eyeHeight-eyebrowHeight);\n  \n  \n  \/\/nose\n  fill(red, green, blue);\n  ellipse(width\/2, height\/2,faceWidth\/5, faceHeight\/7);\n  fill(0,0,0);\n  ellipse(width\/2+noseWidth, height\/2, faceWidth\/20);\n  ellipse(width\/2-noseWidth, height\/2, faceWidth\/20);\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(150, 250);\n    faceHeight = random(150, 250);\n    eyeHeight = random (30,40);\n    eyeWidth = random(30,40);\n    noseWidth= random(6,8);\n    red = random(141,241);\n    green = random(125,155);\n    blue = random (36,125);\n    eyebrowWidth= random(10,20);\n    eyebrowHeight= random(20,30);\n    mouthHeight = random(30,40);\n}\n\n\n<\/code><\/pre><\/div>\n\n\n\n<p>Doing this project was a lot of fun, but it was a little tedious trying to figure out all the measurements. Little sad it came out looking like a pig more than a human but it still looks cute to me!<\/p>\n\n\n\n<p><\/p><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>sketch var faceWidth = 150; var faceHeight = 200; var eyeWidth = 45; var eyeHeight = 45; var noseWidth = 7; var red = random(1,255); var green = random(1,255); var blue = random(1,255); var eyebrowWidth= 15; var eyebrowHeight= 15; var mouthHeight=30; function setup() { createCanvas(640, 480); text(&#8220;p5.js vers 0.9.0 test.&#8221;, 10, 15); } function draw() &hellip; <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/09\/11\/project-02-variable-face-2\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Project-02-Variable-Face&#8221;<\/span><\/a><\/p>\n","protected":false},"author":638,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[97,55],"tags":[],"_links":{"self":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/65427"}],"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\/638"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/comments?post=65427"}],"version-history":[{"count":3,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/65427\/revisions"}],"predecessor-version":[{"id":65431,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/65427\/revisions\/65431"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/media?parent=65427"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/categories?post=65427"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/tags?post=65427"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}