{"id":65301,"date":"2021-09-09T19:23:09","date_gmt":"2021-09-09T23:23:09","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/?p=65301"},"modified":"2021-09-11T17:16:04","modified_gmt":"2021-09-11T21:16:04","slug":"project-2-variable-face","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/09\/09\/project-2-variable-face\/","title":{"rendered":"Project 2: 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-height=\"300\" data-width=\"300\" href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/09\/sketch-92.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\">\/\/Anthony Pan\n\/\/Section C\n\/\/Simple beginning template for variable face.\nvar eyeSize = 20;\nvar faceWidth = 100;\nvar faceHeight = 150;\nvar nose1 = 140;\nvar nose2 = 180;\nvar nose3 = 150;\nvar nose4 = 165;\nvar nose5 = 155;\nvar nose6 = 170;\nvar mouth = 1;\nvar hair = 1;\nvar color = 1;\n\nfunction setup() {\n    createCanvas(300, 300);\n}\n\nfunction draw() {\n    background(180);\n    if (hair &lt; 0.33){\n        \/\/hair middle\n        line(width\/2, height\/2, width\/2, height\/2 - 2\/3*faceHeight);\n    }if (hair &lt; 0.66){\n        \/\/hair right\n        curve(width\/2, height\/2, width\/2 + 25, height\/2 - 1\/3*faceHeight,\n         width\/2 + 50, height\/2 - 1\/2*faceHeight, width\/2 + 75, height\/2 - 3\/4*faceHeight);\n    }if (hair &lt; 1){\n        \/\/hair left\n        curve(width\/2, height\/2, width\/2 - 25, height\/2 - 1\/3*faceHeight, \n        width\/2 - 50, height\/2 - 1\/2*faceHeight, width\/2 - 75, height\/2 - 3\/4*faceHeight);\n    }\n    if (color &lt; 0.25){\n        \/\/pastel red face\n        fill(235,136,129);\n    }else if(color &lt; 0.5){\n        \/\/pastel blue face\n        fill(129, 219, 235);\n    }else if (color &lt; 0.75){\n        \/\/pastel green face\n        fill(181, 245, 176);\n    }else{\n        \/\/white face\n        fill(255,255,255);\n    }\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,255,255); \/\/keeps features white\n    ellipse(eyeLX, height \/ 2, eyeSize, eyeSize);\n    ellipse(eyeRX, height \/ 2, eyeSize, eyeSize);\n    if (mouth &lt; 0.33){ \n        \/\/happy mouth\n        arc(150, 180, 20, 20, 0, PI + QUARTER_PI, CHORD);\n    }else if (mouth &lt; 0.66) {\n        \/\/sad mouth\n        noFill(); \/\/keeps mouth white\n        curve(130, 200, 145, 185, 160, 185, 175, 200);\n    }else {\n        \/\/neutral mouth\n        line(140, 190, 170, 190);\n    }\n    fill(255,255,255); \/\/ keeps nose white\n    triangle(nose1, nose2, nose3, nose4, nose5, nose6); \/\/triangular nose with random coordinates\n\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(75, 150);\n    faceHeight = random(100, 200);\n    eyeSize = random(10, 30);\n    nose1 = random(145, 150);\n    nose2 = random(180, 190);\n    nose3 = random(150, 155);\n    nose4 = random(165, 170);\n    nose5 = random(155, 160);\n    nose6 = random(170, 180);\n    mouth = random(0,1);\n    hair = random(0,1);\n    color = random(0,1);\n    console.log(mouth);\n\n\n\n\n}<\/code><\/pre><\/div>\n\n\n\n<p><\/p><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>sketch \/\/Anthony Pan \/\/Section C \/\/Simple beginning template for variable face. var eyeSize = 20; var faceWidth = 100; var faceHeight = 150; var nose1 = 140; var nose2 = 180; var nose3 = 150; var nose4 = 165; var nose5 = 155; var nose6 = 170; var mouth = 1; var hair = 1; &hellip; <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/09\/09\/project-2-variable-face\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Project 2: Variable Face&#8221;<\/span><\/a><\/p>\n","protected":false},"author":635,"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\/65301"}],"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\/635"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/comments?post=65301"}],"version-history":[{"count":3,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/65301\/revisions"}],"predecessor-version":[{"id":65548,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/65301\/revisions\/65548"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/media?parent=65301"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/categories?post=65301"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/tags?post=65301"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}