{"id":71044,"date":"2022-09-10T16:24:17","date_gmt":"2022-09-10T20:24:17","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/?p=71044"},"modified":"2022-09-10T16:35:50","modified_gmt":"2022-09-10T20:35:50","slug":"project-02-variable-face-4","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/09\/10\/project-02-variable-face-4\/","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><p>In my process, I wanted to figure out how to play with color and how that could change through pressing the mouse. I also was interested in and had a lot of fun figuring out how simple shape changes could affect expression.<\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"756\" height=\"1024\" src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/09\/IMG_5621-756x1024.jpg\" alt=\"\" class=\"wp-image-71045\" srcset=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/09\/IMG_5621-756x1024.jpg 756w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/09\/IMG_5621-222x300.jpg 222w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/09\/IMG_5621-768x1040.jpg 768w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/09\/IMG_5621-1134x1536.jpg 1134w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/09\/IMG_5621-1512x2048.jpg 1512w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/09\/IMG_5621-1200x1625.jpg 1200w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/09\/IMG_5621-scaled.jpg 1890w\" sizes=\"(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 984px) 61vw, (max-width: 1362px) 45vw, 600px\"><\/figure><div><a class=\"p5_sketch_link\" href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/09\/sketch-152.js\" data-width=\"640\" data-height=\"480\">project2<\/a><iframe src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/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\">\/\/Rachel Legg Class Section C\n\nvar eyeSize = 50;\nvar eyeHeight = 25;\nvar faceWidth = 300;\nvar bodyWidth = 400;\nvar faceHeight = 300;\nvar eyebrowHeight = 200;\n\nvar r;         \/\/ making rgb variable\nvar g;\nvar b;\nvar on = false;\n\nvar x = 0;\nvar y = 0;\n\nfunction setup() {\n    createCanvas(640, 480);\n    background(220);\n}\n \nfunction draw() {\n    noStroke();\n    if(on){                                  \/\/alternate background color on click\n        background(252, 169, 133);    \/\/orange\n    }else{\n        background(204, 236, 239);    \/\/blue\n    }\n\n    \/\/shirt\n    fill(r, g, b);                                    \n    ellipse(width \/ 2, height, bodyWidth, height);             \n    fill(r + 10, g + 10, b +10);  \n    ellipse(width \/ 4, height, bodyWidth \/ 4, height \/ 2);         \n    ellipse(width * 3\/4, height, bodyWidth \/ 4, height \/ 2); \n\n    \/\/head\n    if(on){                                \/\/alternate head color on click\n        fill(253, 222, 238);  \/\/pink\n    }else{\n        fill(224, 243, 176);  \/\/green\n    }\n    ellipse(width \/ 2, height \/ 2, faceWidth,  faceHeight);  \n\n    \/\/eyes\n    fill(r, g, b, 200);                                          \n    var eyeLX = width \/ 2 - faceWidth * 0.25;                   \n    var eyeRX = width \/ 2 + faceWidth * 0.25; \n    if(mouseX &lt; width \/ 2){\n        ellipse(eyeLX, height \/ 2, eyeSize, eyeHeight);               \n        ellipse(eyeRX, height \/ 2, eyeSize, eyeHeight);\n        fill(0);                                                                \/\/pupils\n        ellipse(eyeLX, height \/ 2, 1\/2 * eyeSize, 3\/4 * eyeHeight);\n        ellipse(eyeRX, height \/ 2, 1\/2 * eyeSize, 3\/4 * eyeHeight);\n        fill(255, 255, 255, 200);\n        ellipse(eyeLX + 4, (height \/ 2) - 4, 1\/8 * eyeSize, 1\/8 * eyeHeight);    \/\/glare\n        ellipse(eyeRX + 4, (height \/ 2) - 4, 1\/8 * eyeSize, 1\/8 * eyeHeight);\n    }else{\n        if(on){                                \/\/alternate nose color on click\n            stroke(251, 182, 209);    \/\/darker pink\n        }else{\n            stroke(145, 210, 144);    \/\/darker green\n    }\n        strokeWeight(2);\n        line(eyeLX - 10, height \/ 2, eyeLX + 10, height \/ 2);         \/\/closing eyes when mouse is on right side\n        line(eyeRX + 10, height \/ 2, eyeRX - 10, height \/ 2);\n    }               \n\n    \/\/mouth\n    if(mouseY &gt; height \/ 2){\n        fill(0);\n        noStroke();\n        circle(width \/ 2, 2\/3 * height, 20, 20);                     \/\/open mouth when below half\n    }else{\n        if(on){                       \/\/alternate nose color on click\n            stroke(251, 182, 209);    \/\/darker pink\n        }else{\n            stroke(145, 210, 144);    \/\/darker green\n    }\n        strokeWeight(2);\n        line(2\/5 * width, 2\/3 * height, 3\/5 * width, 2\/3 * height);  \n    }\n\n    \/\/nose\n    noStroke();\n    if(on){                           \/\/alternate nose color on click\n        fill(251, 182, 209);          \/\/darker pink\n    }else{\n        fill(145, 210, 144);          \/\/darker green\n    }\n    beginShape();\n    curveVertex(1\/5 * width, 4\/5 * height); \n    curveVertex(1\/2 * width, 5\/9 * height);\n    curveVertex(1\/2 * width, 5\/9 * height);\n    curveVertex(4\/5 * width, 4\/5 * height);\n    endShape();\n\n    \/\/eyebrow\n    if(on){                       \/\/alternate eyebrow color on click\n        stroke(251, 182, 209);    \/\/darker pink\n    }else{\n        stroke(145, 210, 144);    \/\/darker green\n    }\n    strokeWeight(3);\n    if(mouseX &lt; width\/ 2){\n        line(eyeLX - 10, eyebrowHeight - 10, eyeLX + 15, eyebrowHeight - 15);               \n        line(eyeRX + 10, eyebrowHeight - 5, eyeRX - 15, eyebrowHeight - 15);\n    }else{\n        line(eyeLX - 10, eyebrowHeight - 30, eyeLX + 15, eyebrowHeight - 20);               \n        line(eyeRX + 10, eyebrowHeight - 30, eyeRX - 15, eyebrowHeight - 20);\n    }\n\n}\n \nfunction mousePressed() {\n    if(on){                               \/\/change background on click\n        on = false;\n    }else{\n        on =true;\n    }\n    faceWidth = random(300, 500);         \/\/with click, face width changes\n    bodyWidth = random(375, 415);         \/\/with click, shirt width changes along with arms\n    faceHeight = random(200, 400);        \/\/face height changes\n    eyeSize = random(20, 80);             \/\/eye size changes\n    eyeHeight = random (20, 60);\n    r = random(0, 255);                   \/\/eye and shirt color change\n    g = random (0, 255);\n    b = random (0, 255);\n    eyebrowHeight = random(180, 200);     \/\/eyebrow position changes\n}\n<\/code><\/pre><\/div><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>In my process, I wanted to figure out how to play with color and how that could change through pressing the mouse. I also was interested in and had a lot of fun figuring out how simple shape changes could affect expression. project2 \/\/Rachel Legg Class Section C var eyeSize = 50; var eyeHeight = &hellip; <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/09\/10\/project-02-variable-face-4\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Project 02 Variable Face&#8221;<\/span><\/a><\/p>\n","protected":false},"author":737,"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\/f2022\/wp-json\/wp\/v2\/posts\/71044"}],"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\/737"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/comments?post=71044"}],"version-history":[{"count":6,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/71044\/revisions"}],"predecessor-version":[{"id":71052,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/71044\/revisions\/71052"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/media?parent=71044"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/categories?post=71044"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/tags?post=71044"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}