{"id":71246,"date":"2022-09-10T20:35:32","date_gmt":"2022-09-11T00:35:32","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/?p=71246"},"modified":"2022-09-10T20:42:47","modified_gmt":"2022-09-11T00:42:47","slug":"project-02-variable-faces-5","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/09\/10\/project-02-variable-faces-5\/","title":{"rendered":"Project-02: 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><p>I enjoyed figuring out different relationships between each variable and being able to write them as expressions to create drawings. In creating two figures on one canvas, I realized the importance of organizing my code and adding necessary comments for particular lines to remind myself about key information.<\/p>\n<div><a class=\"p5_sketch_link\" href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/09\/sketch-186.js\" data-width=\"640\" data-height=\"480\">sketch<\/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\">\/\/ Angela Yang \n\/\/ Section C - Project 02\n\n\/\/ Variables are set for each facial element. \nvar eyeSizeW = 100;\nvar eyeSizeH = 100;\nvar eyeSizeW2 = 70;\nvar eyeSizeH2 = 70;\nvar pupilSizeW = 50;\nvar pupilSizeH = 50;\nvar pupilSizeW2 = 30;\nvar pupilSizeH2 = 30;\nvar faceWidth = 200;\nvar faceHeight = 200;\nvar faceWidthB = 350;\nvar faceHeightB = 250;  \nvar mouthType = 2;\nvar noseType = 1;\nvar r = 200; \nvar g = 100;\nvar b = 150;\nvar on = false; \n\n\nfunction setup() {\n    createCanvas(640, 480);\n}\n\nfunction draw() {\n  if(on) {\n    background(243, 200, 174);\n  } else {\n    \/\/background changes from yellowish-green to a pink tone with 30% transparency. \n    background(219, 226, 175, 30);\n  }\n  \n\n   \n\/\/LEFT FIGURE\n    \/\/Body\n    fill(r, g, b);\n    stroke(\"white\");\n    ellipse(width\/4, height\/2 + 200, width\/1.5, height\/1.5);\n  \n    \/\/ Face base\n    noStroke();\n    fill(r, g, b);\n    ellipse(width \/ 4, height \/ 2, faceWidth,  faceHeight);\n  \n    \/\/ Eyes\n    stroke(r, g, 50);\n    strokeWeight(1);\n    fill(255);\n    var eyeLX = width \/ 4 - faceWidth * 0.25;\n    var eyeRX = width \/ 4 + faceWidth * 0.25;\n    ellipse(eyeLX, height \/ 2, eyeSizeW, eyeSizeH);\n    ellipse(eyeRX, height \/ 2, eyeSizeW, eyeSizeH);\n    fill(r-100, g+50, b+50);\n    var pupilLX = width \/ 4 - faceWidth * 0.25;\n    var pupilRX = width \/ 4 + faceWidth * 0.25;\n    ellipse(pupilLX, height\/2, pupilSizeW, pupilSizeH);\n    ellipse(pupilRX, height\/2, pupilSizeW, pupilSizeH);\n\n  \n    \/\/Nose Variations\n    fill(\"white\");\n  \n    if (noseType &gt;= 0 & noseType <= 1.5){\n       noStroke();\n       rect(width\/4 - faceWidth*0.03, height\/2 + faceHeight*0.1, 10, 20);\n       \/\/When the value of nose type is &gt;= to 0 and &lt;= 1.5, a rectangular nose is drawn. \n      \n    } else if(noseType &gt; 1.5 & noseType <= 3){\n        noStroke();\n        ellipse(width\/4, height\/2 + faceHeight*0.1, faceWidth\/5, faceHeight\/10);\n        \/\/When the value of nose type is greater than 1.5 and smaller+equal to 3, \n        \/\/a circular nose is drawn. \n      \n    } else if(noseType &gt; 3 & noseType <= 4.5){\n        stroke(\"white\");\n        strokeWeight(4);\n        line(width\/4, height\/2, width\/4+15, height-230);\n        \/\/When the value of nose type is greater then 3 and smaller+equal to 4.5, \n        \/\/a linear nose is drawn. \n      \n    } else{\n        noStroke();\n        triangle(width\/4, height\/2, width\/4+15, height-230, width\/4-15, height-230);      \n      \/\/When the value of nose type is equal to all other numbers in the range of 0~6, \n      \/\/a triangular nose is drawn. \n    }\n\n  \n   \/\/ Mouth Variations   \n    if (mouthType &gt;= 0 & noseType <= 1.5){\n       stroke(\"white\");\n       fill(r-60, g, b);\n       rect(width\/4 - faceWidth*0.05, height\/2 + faceHeight*0.35, 20, 5);\n       \/\/ A confusing mouth is drawn. \n      \n    } else if(mouthType &gt; 1.5 & mouthType <= 3){\n        stroke(\"white\");\n        strokeWeight(1);\n        fill(r, g, b+80);\n        ellipse(width\/4, height\/2 + faceHeight*0.35, faceWidth\/6, faceHeight\/10);\n        \/\/A shocking mouth is drawn. \n      \n    } else if(mouthType &gt; 3 & mouthType <= 4.5){\n        noStroke();\n        triangle(width\/4 - faceWidth*0.05, height\/2 + faceHeight*0.35, width\/4+15, height-190, width\/4-15, height-190); \n        \/\/A happy mouth is drawn. \n      \n    } else{\n        stroke(\"white\");\n        strokeWeight(1);\n        fill(r, g+60, b);\n        ellipse(width\/4, height\/2 + faceHeight*0.35, faceWidth\/2, faceHeight\/8);\n        \/\/A shocking mouth is drawn. \n\n    }\n  \n  \n  \n\/\/ RIGHT FIGURE \n    \/\/Body\n    fill(0, g, b+50);\n    stroke(\"white\");\n    ellipse(width\/1.4, height\/2 + 200, width\/1.5, height\/1.5);\n  \n    \/\/ Face base\n    noStroke();\n    fill(0, g, b+50);\n    ellipse(width\/1.4, height\/2, faceWidthB, faceHeightB);\n  \n    \/\/ Eyes\n    stroke(r, g, 100);\n    strokeWeight(1);\n    fill(255);\n    var eyeLX2 = width \/ 1.4 - faceWidthB * 0.25;\n    var eyeRX2 = width \/ 1.4 + faceWidthB * 0.25;\n    ellipse(eyeLX2, height \/ 2, eyeSizeW2, eyeSizeH2);\n    ellipse(eyeRX2, height \/ 2, eyeSizeW2, eyeSizeH2);\n    fill(r-100, g+50, b+50);\n  \n    var pupilLX2 = width \/ 1.4 - faceWidthB * 0.25;\n    var pupilRX2 = width \/ 1.4 + faceWidthB * 0.25;\n    ellipse(pupilLX2, height\/2, pupilSizeW2, pupilSizeH2);\n    ellipse(pupilRX2, height\/2, pupilSizeW2, pupilSizeH2);\n\n  \n    \/\/Nose Variations\n    fill(\"white\");\n  \n    if (noseType &gt;= 0 & noseType <= 1){\n       noStroke();\n       ellipse(width\/1.4, height\/2 + faceHeightB*0.1, faceWidthB\/5, faceHeightB\/10);\n      \n    } else if(noseType &gt; 2 & noseType <= 4){\n       noStroke();\n       fill(\"white\");\n       rect(width\/1.4 - faceWidthB*0.03, height\/2 + faceHeightB*0.1, 30, 10);\n      \n    } else if(noseType &gt; 4 & noseType <= 5.5){\n        stroke(\"white\");\n        strokeWeight(5);\n        line(width\/1.4, height\/2, width\/1.4+15, height-230);\n      \n    } else{\n        noStroke();\n        triangle(width\/1.4, height\/2, width\/1.4+50, height-220, width\/1.4+50, height-220);      \n    }\n  \n  \n     \/\/ Mouth Variations   \n    if (mouthType &gt;= 0 & noseType <= 1.5){\n       stroke(\"white\");\n       fill(r-60, g, b);\n       rect(width\/1.4 - faceWidthB*0.05, height\/2 + faceHeightB*0.35, 20, 5);\n      \n    } else if(mouthType &gt; 1.5 & mouthType <= 3){\n        stroke(\"white\");\n        strokeWeight(1);\n        fill(\"black\");\n        ellipse(width\/1.4, height\/2 + faceHeightB*0.35, faceWidthB\/6, faceHeightB\/10);\n      \n    } else if(mouthType &gt; 3 & mouthType <= 4.5){\n        noStroke();\n        triangle(width\/1.4 - faceWidthB*0.05, height\/2 + faceHeightB*0.35, width\/1.4+15, height-190, width\/1.4-15, height-190); \n      \n    } else{\n        stroke(\"white\");\n        strokeWeight(1);\n        fill(r, g+60, b);\n        ellipse(width\/1.4, height\/2 + faceHeightB*0.35, faceWidthB\/10, faceHeightB\/8);\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 100 and 300.\n    faceWidth = random(100, 300);\n    faceHeight = random(100, 400);\n    faceWidthB = random (100, 300);\n    faceHeightB = random (200, 450);\n    noseType = random(0, 6);\n    mouthType = random(0, 8);\n    eyeSizeW = random(10, 80);\n    eyeSizeH = random(10, 80);\n    eyeSizeW2 = random(30, 70);\n    eyeSizeH2 = random(30, 70);\n    pupilSizeW = random(5,30);\n    pupilSizeH = random(5,20);\n    pupilSizeW2 = random(10, 30);\n    pupilSizeH2 = random (5, 30);\n    r = random(0, 255);\n    g = random(0, 255);\n    b = random(0, 255);\n    if(mouseX &gt; 250 & mouseX < 350 && mouseX);\n    on = !on;\n\n}\n\n<\/code><\/pre><\/div><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>I enjoyed figuring out different relationships between each variable and being able to write them as expressions to create drawings. In creating two figures on one canvas, I realized the importance of organizing my code and adding necessary comments for particular lines to remind myself about key information. sketch \/\/ Angela Yang \/\/ Section C &hellip; <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/09\/10\/project-02-variable-faces-5\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Project-02: Variable Faces&#8221;<\/span><\/a><\/p>\n","protected":false},"author":774,"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\/71246"}],"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\/774"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/comments?post=71246"}],"version-history":[{"count":3,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/71246\/revisions"}],"predecessor-version":[{"id":71256,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/71246\/revisions\/71256"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/media?parent=71246"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/categories?post=71246"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/tags?post=71246"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}