{"id":65669,"date":"2021-09-11T22:55:56","date_gmt":"2021-09-12T02:55:56","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/?p=65669"},"modified":"2021-09-11T22:55:56","modified_gmt":"2021-09-12T02:55:56","slug":"project-02-face-variables","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/09\/11\/project-02-face-variables\/","title":{"rendered":"Project-02-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\" data-width=\"300\" data-height=\"300\" href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/09\/sketch-107.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=\"300\" height=\"300\"><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">\/\/Nami Numoto\n\/\/15104 1A\n\/\/ Simple beginning template for variable face.\nvar eyeSize = 20;\nvar faceWidth = 100;\nvar faceHeight = 150;\nvar noseWidth = 20;\nvar noseDirection = 0;\nvar noseHeight = 30;\nvar mouthPosition = 200;\nvar mouthHeight = 20;\n\nfunction setup() {\n    createCanvas(300, 300);\n}\n\nfunction draw() {\n    strokeWeight(2);\n    background(180);\n    fill(156, 132, 104);\n    ellipse(width \/ 2, height \/ 2, faceWidth,  faceHeight);\n    var eyeLX = width \/ 2 - faceWidth * 0.25;\n    var eyeRX = width \/ 2 + faceWidth * 0.25;\n    fill(255)\n    ellipse(eyeLX, height \/ 2, eyeSize, eyeSize); \/\/ eye 1\n    ellipse(eyeRX, height \/ 2, eyeSize, eyeSize); \/\/ eye 2\n    fill(0)\n    ellipse(eyeLX, height \/ 2, eyeSize \/ 2, eyeSize \/ 2); \/\/ iris 1\n    ellipse(eyeRX, height \/ 2, eyeSize \/ 2, eyeSize \/ 2); \/\/ iris 2\n    line(width \/ 2, height \/ 2, noseWidth + width \/ 2, noseHeight + height \/ 2); \/\/ directional nose line\n    line(width \/ 2, height \/ 2 + noseHeight, noseWidth + width \/ 2, height \/ 2 + noseHeight); \/\/ bottom nose line\n    noFill();\n    beginShape(); \/\/creative rendition of a mouth, testing out curveVertex()  :)\n    curveVertex(width \/ 2 - faceWidth \/ 3, mouthPosition + mouthHeight);\n    curveVertex(width \/ 2 - faceWidth \/ 3, mouthPosition + mouthHeight);\n    curveVertex(width \/ 2, mouthPosition);\n    curveVertex(width \/ 2 + faceWidth \/ 3, mouthPosition + mouthHeight);\n    curveVertex(width \/ 2 + faceWidth \/ 3, mouthPosition + mouthHeight);\n    endShape(); \/\/sometimes the mouth goes off the face. call it art\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, 30);\n    noseWidth = random(10, 30);\n    noseDirection = random(0, 2);\n    if (noseDirection &gt; 1) {\n        noseWidth = -1 * noseWidth;\n    }\n    mouthHeight = random(-10, 10);\n}<\/code><\/pre><\/div><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>sketch \/\/Nami Numoto \/\/15104 1A \/\/ Simple beginning template for variable face. var eyeSize = 20; var faceWidth = 100; var faceHeight = 150; var noseWidth = 20; var noseDirection = 0; var noseHeight = 30; var mouthPosition = 200; var mouthHeight = 20; function setup() { createCanvas(300, 300); } function draw() { strokeWeight(2); background(180); &hellip; <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/09\/11\/project-02-face-variables\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Project-02-Face-Variables&#8221;<\/span><\/a><\/p>\n","protected":false},"author":663,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[97,55,1],"tags":[],"_links":{"self":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/65669"}],"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\/663"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/comments?post=65669"}],"version-history":[{"count":2,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/65669\/revisions"}],"predecessor-version":[{"id":65684,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/65669\/revisions\/65684"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/media?parent=65669"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/categories?post=65669"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/tags?post=65669"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}