{"id":71188,"date":"2022-09-10T18:44:03","date_gmt":"2022-09-10T22:44:03","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/?p=71188"},"modified":"2022-09-10T18:44:03","modified_gmt":"2022-09-10T22:44:03","slug":"project-2-variable-face","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/09\/10\/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 id=\"wp-block-file--media-a50093ad-3510-4aee-a049-5bc27c878014\" href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/09\/sketch-173.js\">sketch<\/a><\/div>\n\n\n<div><a class=\"p5_sketch_link\" data-width=\"500\" data-height=\"400\" href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/09\/sketch-173.js\">sketch<\/a><iframe src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/plugins\/p5-embedder\/p5_iframe.html\" class=\"p5_exampleFrame\" width=\"500\" height=\"400\"><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">var eyeSize = 20;\nvar faceWidth = 100;\nvar faceHeight = 150;\nvar R = 0;\nvar G = 0;\nvar B = 0;\nvar FR = 252;\nvar FG = 224;\nvar FB = 203;\nvar nose = 10\nvar HR = 100;\nvar HG = 100;\nvar HB = 100;\nvar CR = 140;\nvar CG = 140;\nvar CB = 140;\n\n\n\n \nfunction setup() {\n    createCanvas(300, 300);\n}\n \nfunction draw() {\n    background(R,G,B);\n    noStroke();\n    \/\/back hair\n    fill(HR,HG,HB);\n    ellipse(width \/ 2, height \/ 2, faceWidth+10,  faceHeight+10);\n    strokeWeight(2);\n    stroke(0);\n    rect(width \/ 2 - faceWidth\/2-5, height \/ 2 -20, faceWidth + 10, faceHeight\/2+25);\n    noStroke();\n    \/\/clothes\n    if(mouseX &lt; width\/2){\n        fill(CR,CG,CB);\n        ellipse(width\/2,height,faceWidth+50,height\/2 +faceHeight\/2-10);\n        fill(CR+40,CG+40,CB+40);\n        ellipse(width\/2,height\/2 + faceHeight\/2 +faceWidth\/4+20, 10);\n        ellipse(width\/2,height\/2 + faceHeight\/2 +faceWidth\/4+30, 10);\n        ellipse(width\/2,height\/2 + faceHeight\/2 +faceWidth\/4+10, 10);\n    }else{\n        fill(255-CR,255-CG,255-CB);\n        ellipse(width\/2,height,faceWidth+50,height\/2 +faceHeight\/2-10);\n        fill(CR+40,CG+40,CB+40);\n        ellipse(width\/2,height\/2 + faceHeight\/2 +faceWidth\/4+20, 10);\n        ellipse(width\/2,height\/2 + faceHeight\/2 +faceWidth\/4+30, 10);\n        ellipse(width\/2,height\/2 + faceHeight\/2 +faceWidth\/4+10, 10);\n\n    }\n    \/\/neck\n    fill(FR-20,FG-20,FB-20);\n    rect(width\/2- faceWidth\/8, height\/2 + faceHeight\/2 -10, faceWidth\/4,20);\n    ellipse(width\/2, height\/2 + faceHeight\/2 +10, faceWidth\/4,faceWidth\/4);\n    \/\/face outline\n    fill(FR,FG,FB);\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    \/\/eye\n    fill(255);\n    strokeWeight(1);\n    stroke(0);\n    ellipse(eyeLX, height \/ 2, eyeSize, eyeSize);\n    ellipse(eyeRX, height \/ 2, eyeSize, eyeSize);\n    noStroke();\n    fill(0);\n    ellipse(eyeLX,height \/ 2,eyeSize \/ 2);\n    ellipse(eyeRX, height \/ 2, eyeSize \/ 2);\n    fill(255);\n    ellipse(eyeLX + 2,height \/ 2 -2,eyeSize \/ 6);\n    ellipse(eyeRX + 2,height \/ 2 -2,eyeSize \/ 6);\n\n    \/\/mouth\n    fill(240,90,85);\n    arc(150,180,20,20,0,PI, open);\n    \/\/teeth\n    fill(255);\n    rect(145,180,10,2);\n    \/\/nose\n    strokeWeight(2);\n    stroke(0);\n    line(150,150,150,150 + nose);\n    \/\/front hair\n    fill(HR,HG,HB);\n    arc(width \/ 2, height \/ 2-15, faceWidth+10,  faceHeight-10, PI,2*PI, PI);\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    R = random(50,250);\n    G = random(0,256);\n    B = random(0,256);\n    FR = R + 50;\n    FG = FR - 25;\n    FB = FG - 25;\n    HR = 255-R;\n    HG = 255-G;\n    HB = 255-B\n    faceWidth = random(75, 150);\n    faceHeight = random(100, 150);\n    eyeSize = random(20, 30);\n    nose = random(10,20);\n    CR = random(100,200);\n    CG =random(100,200);\n    CB =random(100,200);\n}<\/code><\/pre><\/div>\n\n\n<p><\/p><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>sketch var eyeSize = 20; var faceWidth = 100; var faceHeight = 150; var R = 0; var G = 0; var B = 0; var FR = 252; var FG = 224; var FB = 203; var nose = 10 var HR = 100; var HG = 100; var HB = 100; var CR &hellip; <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/09\/10\/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":770,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[97,121],"tags":[],"_links":{"self":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/71188"}],"collection":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/users\/770"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/comments?post=71188"}],"version-history":[{"count":1,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/71188\/revisions"}],"predecessor-version":[{"id":71191,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/71188\/revisions\/71191"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/media?parent=71188"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/categories?post=71188"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/tags?post=71188"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}