{"id":65671,"date":"2021-09-11T22:50:19","date_gmt":"2021-09-12T02:50:19","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/?p=65671"},"modified":"2021-09-11T22:55:44","modified_gmt":"2021-09-12T02:55:44","slug":"project-2-variable-faces-face-variables-3","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/09\/11\/project-2-variable-faces-face-variables-3\/","title":{"rendered":"Project 2: 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><div class=\"wp-block-file\"><a class=\"p5_sketch_link\" data-width=\"640\" data-height=\"480\" data-fontsize=\"9\" href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/09\/sketch-106.js\">sketch-beans<\/a><a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/09\/sketch-106.js\" class=\"wp-block-file__button\" download=\"\">Download<\/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\" style=\"font-size:9px !important; line-height:13.05px !important\"><code class=\"p5_editor language-javascript\" style=\"font-size:9px !important;\">\/\/Yeon Lee, Section C\n\/\/Project-02: Variable Faces; Face Variables\n\nvar backgroundR = 180;\nvar backgroundG = 200;\nvar backgroundB = 255;\nvar head = 190;\nvar hoodieColorR = 253;\nvar hoodieColorG = 253;\nvar hoodieColorB = 150;\nvar headWidth = 150;\nvar headHeight = 150;\nvar eyeSize = 24;\nvar blushSize = 25;\nvar mouth =  1\n \nfunction setup() {\n    createCanvas(640, 480);\n}\n \nfunction draw() {\n    background(backgroundR, backgroundG, backgroundB);\n\n    \/\/ears + head (back)\n    var w = 330;\n    var h = 250;\n    var earSize = 80;\n    var earY = h - 0.5 * head;\n    var leftEarX = w + 0.45 * head; \/\/hoodie size changes every time you click\n    var rightEarX = w - 0.45 * head;\n\n    fill(hoodieColorR, hoodieColorG, hoodieColorB); \/\/hoodie color changes every time you click\n    noStroke();\n    ellipse(leftEarX, earY, earSize, earSize); \/\/head with hoodie\n    ellipse(rightEarX, earY, earSize, earSize);\n    ellipse(w, 220, head, 1 * head); \/\/cheek shape on the bottom\n    ellipse(w, 280, 35 - head, head \/ 2);\n\n    \/\/head (front)\n    fill(255, 255, 255);\n    ellipse(w, h - 10, head \/ 1.2, head \/ 1.2); \/\/face\n    ellipse(w, h + 30, 45 - head, head \/ 2); \/\/cheek shape on the bottom\n\n    \/\/eyebrows + eyes\n    var leftEyeX = w - headWidth * 0.3; \/\/eye size changes every time you click\n    var rightEyeX = w + headWidth * 0.3;\n\n    fill(45, 34, 25); \n    arc(leftEyeX, h - 40, 10, 5, PI, 0); \/\/eyebrows\n    arc(rightEyeX, h - 40, 10, 5, PI, 0);\n    ellipse(leftEyeX, h, eyeSize, eyeSize); \/\/eyes\n    ellipse(rightEyeX, h, eyeSize, eyeSize);\n\n    fill(255, 255, 255); \/\/white part of eyes\n    ellipse(leftEyeX + 6, h - 7, eyeSize \/ 5, eyeSize \/ 5);\n    ellipse(rightEyeX + 6, h - 7, eyeSize \/ 5, eyeSize \/ 5); \n    ellipse(leftEyeX, h + 15, eyeSize, eyeSize \/ 4); \/\/smiling eyes\n    ellipse(rightEyeX, h + 15, eyeSize, eyeSize \/ 4);\n\n    \/\/nose\n    var noseX = w;\n    var noseY = head * 0.05 + 245; \/\/nose size changes every time you click\n    var noseSize = head \/ 45;\n    fill(255, 182, 193);\n    ellipse(noseX, noseY, noseSize, noseSize - 2);\n\n    \/\/blush\n    var mouthSize = head \/ 35;\n    var mouthW = noseSize * 3;\n    var leftBlushX = w - mouthW * 5;\n    var rightBlushX = w + mouthW * 5;\n\n    fill(255, 139, 139, 50);\n    ellipse(leftBlushX, h + 40, blushSize * 2, blushSize * 2);\n    ellipse(rightBlushX, h + 40, blushSize * 2, blushSize * 2);\n\n    \/\/mouth\n    var mouthX = w;\n    var mouthY = head * 0.05 + 253;\n\n    if (mouth &lt; 2){ \/\/mouth changes to either a smile or surprised every time you click \n\n        \/\/smile\n        fill(255, 106, 106);\n        arc(mouthX, mouthY, 12, 20, 0, PI, CHORD);\n\n    } else if (mouth &lt; 3) {\n        \/\/surprise\n        fill(255, 106, 106);\n        ellipse(mouthX, mouthY + 10, 15, 20);\n    }\n\n}\n \nfunction mousePressed() {\n    \/\/ when you click, these variables are reassigned\n    \/\/ to random values within specified ranges\n    backgroundR = random(100, 150);\n    backgroundG = random(100, 150);\n    backgroundB = random(200, 250);    \n    head = random(180, 300);\n    hoodieColorR = random(220, 255);\n    hoodieColorG = random(220, 255);\n    hoodieColorB = random(130, 180);\n    headWidth = random(100, 200);\n    headHeight = random(100, 250);\n    eyeSize = random(24, 34);\n    blushSize = random(25, 30);\n    mouth = random(1, 3);\n}\n<\/code><\/pre><\/div>\n\n\n\n<p>At first, it was challenging to work with positioning locations,  but I got used to arithmetic solutions and enjoyed assigning names to variables. I had a lot of fun experimenting with reassigning the random values when you click for mousePressed() function.<\/p><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>sketch-beansDownload \/\/Yeon Lee, Section C \/\/Project-02: Variable Faces; Face Variables var backgroundR = 180; var backgroundG = 200; var backgroundB = 255; var head = 190; var hoodieColorR = 253; var hoodieColorG = 253; var hoodieColorB = 150; var headWidth = 150; var headHeight = 150; var eyeSize = 24; var blushSize = 25; var &hellip; <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/09\/11\/project-2-variable-faces-face-variables-3\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Project 2: Variable Faces&#8221;<\/span><\/a><\/p>\n","protected":false},"author":630,"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\/65671"}],"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\/630"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/comments?post=65671"}],"version-history":[{"count":4,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/65671\/revisions"}],"predecessor-version":[{"id":65685,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/65671\/revisions\/65685"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/media?parent=65671"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/categories?post=65671"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/tags?post=65671"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}