{"id":71395,"date":"2022-09-10T23:24:08","date_gmt":"2022-09-11T03:24:08","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/?p=71395"},"modified":"2022-09-10T23:35:50","modified_gmt":"2022-09-11T03:35:50","slug":"project-2-variable-face-5","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/09\/10\/project-2-variable-face-5\/","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><a class=\"p5_sketch_link\" data-width=\"400\" data-height=\"400\" href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/09\/sketch-211.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=\"400\" height=\"400\"><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">\/\/ Ana Furtado \n\/\/ Section E\n\nvar noseSize = 20;\nvar r = 139;\nvar g = 69;\nvar b = 19;  \/\/ r g b is going to be randomlly \n            \/\/generating blues for corneas when mouse is pressed\nvar a = 105; \/\/ y of more hair left strand 1\nvar b = 105; \/\/ y of more hair left strand 2\nvar x = 405; \/\/y of more hair right strand 1\nvar y = 405; \/\/y of more hair right strand 2\nvar eyeLeft = 190;\nvar eyeRight = 290;\n\nfunction setup() {\n    createCanvas(480, 640);\n    background(255, 210, 223);     \/\/ pink\n}\n\nfunction draw() {\n    stroke(84, 18, 18);      \/\/ reddish brown\n    strokeWeight(30);\n    line(175, 160, 120, 620);      \/\/ back hair left\n    line(175, 160, 155, 620);\n    line(305, 160, 365, 620);     \/\/ back hair right\n    line(305, 160, 315, 620);\n    stroke(0, 0, 0);     \/\/ black\n    strokeWeight(1);\n    fill(0, 206, 209);     \/\/ light blue\n    ellipse(140, 330, 30, 30);     \/\/ earrings\n    ellipse(340, 330, 30, 30);\n    fill(255, 228, 196);     \/\/ skin\n    ellipse(240, 540, 75, 400);     \/\/ neck\n    fill(255, 228, 196);     \/\/ skin\n    ellipse(240, 320, 200, 400);     \/\/ face\n    fill(255, 255, 255);     \/\/ white\n    ellipse(190, 270, 50, 100);     \/\/ left eye\n    ellipse(290, 270, 50, 100);     \/\/ right eye\n    fill(r, g, b);    \/\/ brown\n    ellipse(190, 270, 25, 50);     \/\/ left cornea\n    ellipse(290, 270, 25, 50);     \/\/ right cornea\n    fill(0);\n    ellipse(eyeLeft, 270, 10, 20);     \/\/ left pupil \n    ellipse(eyeRight, 270, 10, 20);     \/\/ right pupil \n    fill(255, 228, 196);     \/\/ skin\n    circle(240, 320, noseSize, noseSize);     \/\/ nose\n    \/\/line(190, 200, 190, 125);\n    \/\/line(210, 200, 210, 125);\n    fill(220, 20, 60);     \/\/ red\n    ellipse(240, 420, 110, 50)     \/\/ mouth\n    line(185, 420, 295, 420);\n    stroke(84, 18, 18);      \/\/ reddish brown\n    strokeWeight(1);\n    fill(84, 18, 18);     \/\/ reddish brown\n    ellipse(240, 160, 150, 80);     \/\/ hair top\n    strokeWeight(10);\n    line(160, 160, 90, 620);      \/\/ hair left\n    line(160, 160, 115, 620);\n    line(160, 160, a, 620);\n    line(160, 160, b, 620);\n    line(310, 160, 415, 620);     \/\/ hair right\n    line(310, 160, 390, 620);\n    line(310, 160, x, 620);\n    line(310, 160, y, 620);\n    noStroke();\n    fill(r, g, b);     \/\/ bow\n    ellipse(305, 150, 20);\n    ellipse(325, 150, 20);\n}\n\nfunction mousePressed() { \n    \/\/ when the user clicks, these variables are reassigned\n    \/\/ to random values within specified ranges. For example,\n    \/\/ 'noseSize' gets a random value between 10 and 30.\n    \/\/ eye color changes as bow color changes to match\n    \/\/ more left and right hair \n    \/\/ left and right pupils move\n    noseSize = random(10, 30);\n    r = random(0, 100);\n    g = random(0, 250); \n    b = random(200, 250); \n    a = random(0, 175);\n    b = random(0, 175);\n    x = random(305,620);\n    y = random(305,620);\n    eyeLeft = random(177.5, 202.5);\n    eyeRight = random(277.5, 302.5);\n}<\/code><\/pre><\/div>\n\n\n<p>I started with the same proportions as the face for project 1. I modified it by changing the eye color, hair, and adding a bow. The pupils also move at the press of the mouse. The most challenging part was to get the pupils to move and understanding the difference between mouseIsPressed and mousePressed in practice.<\/p>\n\n\n\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" width=\"640\" height=\"447\" src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/09\/IMG_2851.jpg\" alt=\"\" class=\"wp-image-71450\" srcset=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/09\/IMG_2851.jpg 640w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/09\/IMG_2851-300x210.jpg 300w\" sizes=\"(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 984px) 61vw, (max-width: 1362px) 45vw, 600px\"><\/figure><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>sketch \/\/ Ana Furtado \/\/ Section E var noseSize = 20; var r = 139; var g = 69; var b = 19; \/\/ r g b is going to be randomlly \/\/generating blues for corneas when mouse is pressed var a = 105; \/\/ y of more hair left strand 1 var b = &hellip; <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/09\/10\/project-2-variable-face-5\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Project 2: Variable Face&#8221;<\/span><\/a><\/p>\n","protected":false},"author":749,"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\/71395"}],"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\/749"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/comments?post=71395"}],"version-history":[{"count":3,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/71395\/revisions"}],"predecessor-version":[{"id":71451,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/71395\/revisions\/71451"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/media?parent=71395"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/categories?post=71395"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/tags?post=71395"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}