{"id":65495,"date":"2021-09-11T16:33:14","date_gmt":"2021-09-11T20:33:14","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/?p=65495"},"modified":"2021-09-11T16:35:52","modified_gmt":"2021-09-11T20:35:52","slug":"project-2-variable-faces-3","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/09\/11\/project-2-variable-faces-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=\"480\" data-height=\"600\" href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/09\/wpf-variable-face.js\">wpf-variable-face<\/a><iframe src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/plugins\/p5-embedder\/p5_iframe.html\" class=\"p5_exampleFrame\" width=\"480\" height=\"600\"><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">\/\/Patrick Fisher, section B\n\nvar eyeSize = 20;\nvar faceWidth = 100;\nvar faceHeight = 150;\nvar eyeColor = 2;\nvar mouthType = 1;\nvar noseType = 1;\nvar browLength = (1.15 * eyeSize);\nvar r = 0; \/\/color value for eyebrows\nvar m = 1; \/\/coefficent for for size of mouth and nose\nvar skinColor = 1;\n\nfunction setup() {\n    createCanvas(480, 640);\n}\n\nfunction draw() {\n    var midX = width \/ 2; \/\/intermediate varriable for half the canvas length\n    background(180);\n    \n    if(skinColor == 1){ \/\/chooses a variety of skin colors from paper white to dark brown\n        strokeWeight(1);\n        fill(255);\n        ellipse(midX, height \/ 2, faceWidth,  faceHeight); \n    \n    } else if(skinColor == 2){\n        strokeWeight(1);\n        fill(254, 219, 117); \n        ellipse(midX, height \/ 2, faceWidth,  faceHeight); \n    \n    } else if(skinColor == 3){ \n        strokeWeight(1);\n        fill(241, 194, 125);\n        ellipse(midX, height \/ 2, faceWidth,  faceHeight); \n    \n    } else if(skinColor == 4){ \n        strokeWeight(1);\n        fill(224, 172, 105); \n        ellipse(midX, height \/ 2, faceWidth,  faceHeight); \n    \n    } else if(skinColor == 5){ \n        strokeWeight(1);\n        fill(198, 134, 66); \n        ellipse(midX, height \/ 2, faceWidth,  faceHeight); \n    \n    } else if(skinColor == 6){\n        strokeWeight(1);\n        fill(140, 85, 36); \n        ellipse(midX, height \/ 2, faceWidth,  faceHeight); \n    \n    } else if(skinColor == 7){\n        strokeWeight(1);\n        fill(54, 30, 2);        \n        ellipse(midX, height \/ 2, faceWidth,  faceHeight); \n    \n    }\n\n    var eyeLX = midX - faceWidth * 0.25; \/\/variable for x position of left eye\n    var eyeRX = midX + faceWidth * 0.25; \/\/wariable for x position of left eye\n    var eyeBrowL = (eyeLX - (.65 * eyeSize)); \/\/variable for left eyebrow x position based off of left eye position\n    var eyeBrowR = (eyeRX - (.5 * eyeSize)); \/\/wariable for right eyebrow x position based off of the right eye position\n    strokeWeight(1);\n    fill(r);\n    rect(eyeBrowL, ((height \/ 2) - eyeSize), browLength, (0.25 * eyeSize)); \/\/left eyebrow\n    \n    strokeWeight(1);\n    fill(r);\n    rect(eyeBrowR, ((height \/ 2) - eyeSize), browLength, (0.25 * eyeSize)); \/\/right eyebrow\n    \n    strokeWeight(1);\n    fill(255);\n    ellipse(eyeLX, height \/ 2, eyeSize, eyeSize); \/\/creates left eye\n    \n    strokeWeight(1);\n    fill(255);\n    ellipse(eyeRX, height \/ 2, eyeSize, eyeSize); \/\/creates right eye\n\n    if(eyeColor == 1){ \/\/makes brown irises       \n            strokeWeight(1);\n            fill(100,63,33);\n            ellipse(eyeLX, height \/ 2, eyeSize * (2\/3), eyeSize * (2\/3));\n\n            strokeWeight(1);\n            fill(100,63,33);\n            ellipse(eyeRX, height \/ 2, eyeSize * (2\/3), eyeSize * (2\/3));\n    \n    }    else if(eyeColor == 2){   \/\/makes green irises     \n            strokeWeight(1);\n            fill(0,125,75);\n            ellipse(eyeLX, height \/ 2, eyeSize * (2\/3), eyeSize * (2\/3));\n\n            strokeWeight(1);\n            fill(0,125,75);\n            ellipse(eyeRX, height \/ 2, eyeSize * (2\/3), eyeSize * (2\/3));    \n    \n    }    else if(eyeColor == 3){   \/\/makes blue irises     \n            strokeWeight(1);\n            fill(35,164,242);\n            ellipse(eyeLX, height \/ 2, eyeSize * (2\/3), eyeSize * (2\/3));\n\n            strokeWeight(1);\n            fill(35,164,242);\n            ellipse(eyeRX, height \/ 2, eyeSize * (2\/3), eyeSize * (2\/3));    \n    \n    }    else if(eyeColor == 4){   \/\/makes heterochromia, brown right blue left     \n            strokeWeight(1);\n            fill(100,63,33);\n            ellipse(eyeLX, height \/ 2, eyeSize * (2\/3), eyeSize * (2\/3));\n\n            strokeWeight(1);\n            fill(35,164,242);\n            ellipse(eyeRX, height \/ 2, eyeSize * (2\/3), eyeSize * (2\/3));    \n    \n    }    else if(eyeColor == 5){   \/\/makes heterochromia, blue right brown left     \n            strokeWeight(1);\n            fill(35,164,242);\n            ellipse(eyeLX, height \/ 2, eyeSize * (2\/3), eyeSize * (2\/3));\n\n            strokeWeight(1);\n            fill(100,63,33);\n            ellipse(eyeRX, height \/ 2, eyeSize * (2\/3), eyeSize * (2\/3));    \n    \n    }    else if(eyeColor == 6){   \/\/makes heterochromia, blue right green left     \n            strokeWeight(1);\n            fill(0,125,75);\n            ellipse(eyeLX, height \/ 2, eyeSize * (2\/3), eyeSize * (2\/3));\n\n            strokeWeight(1);\n            fill(35,164,242);\n            ellipse(eyeRX, height \/ 2, eyeSize * (2\/3), eyeSize * (2\/3));    \n    \n    }   else if(eyeColor == 7){   \/\/makes heterochromia, green right blue left     \n            strokeWeight(1);\n            fill(35,164,242);\n            ellipse(eyeLX, height \/ 2, eyeSize * (2\/3), eyeSize * (2\/3));\n\n            strokeWeight(1);\n            fill(0,125,75);\n            ellipse(eyeRX, height \/ 2, eyeSize * (2\/3), eyeSize * (2\/3));    \n    \n    }    else if(eyeColor == 8){   \/\/makes heterochromia, brown right green left     \n            strokeWeight(1);\n            fill(0,125,75);\n            ellipse(eyeLX, height \/ 2, eyeSize * (2\/3), eyeSize * (2\/3));\n\n            strokeWeight(1);\n            fill(100,63,33);\n            ellipse(eyeRX, height \/ 2, eyeSize * (2\/3), eyeSize * (2\/3));    \n    \n    }    else if(eyeColor == 9){   \/\/makes heterochromia, green right brown left     \n            strokeWeight(1);\n            fill(100,63,33);\n            ellipse(eyeLX, height \/ 2, eyeSize * (2\/3), eyeSize * (2\/3));\n\n            strokeWeight(1);\n            fill(0,125,75);\n            ellipse(eyeRX, height \/ 2, eyeSize * (2\/3), eyeSize * (2\/3));    \n    \n    }\n    \/\/variables for positioning and drawing the mouth\n    var mouthWidth = (faceWidth * (1\/3));\n    var mouthHeight = (faceHeight * .25);\n   \/\/intermediate variables for the x,y coordiantes for the tirangle nose type\n    var tx1 = midX;\n    var ty1 = ((height \/ 2) - (faceHeight \/ 16));\n    var tx2 = (midX - (faceWidth \/ 8));\n    var ty2 = ((height \/ 2) + (faceHeight \/ 6))\n    var tx3 = (midX + (faceWidth \/ 8));\n    var ty3 = ((height \/ 2) + (faceHeight \/ 6));\n\n    if(mouthType == 1){\n        strokeWeight(1);\n        fill(0);\n        arc(midX , ((height \/ 2) + (faceHeight * .25)), mouthWidth, mouthHeight, m * TWO_PI, m * PI); \/\/creates a smiling mouth\n\n    } else if(mouthType == 2){ \/\/creates a frowning mouth\n        strokeWeight(1);\n        fill(0);\n        arc(midX , ((height \/ 2) + (faceHeight * .375)), mouthWidth, mouthHeight, m * PI, m * TWO_PI,);\n\n    } else if(mouthType == 3) { \/\/creates a neutral line mouth\n        \n        strokeWeight(3);\n        line(m * (midX - (mouthWidth \/ 2)), ((height \/ 2) + (faceHeight * .25)), m * (midX + (mouthWidth \/ 2)), ((height \/ 2) + (faceHeight * .25)));\n    }\n    \n    if(noseType == 1){ \/\/creates a half circle nose\n        strokeWeight(1);\n        fill(255);\n        arc(((width * (51\/100))), (height * (51\/100)), (faceWidth \/ 4), (faceHeight \/ 6), m * HALF_PI, m * PI + HALF_PI);\n    }\n\n    else if(noseType == 2){ \/\/creates a triangle nose\n        strokeWeight(1);\n        fill(255);\n        triangle(tx1, ty1, m * tx2, ty2, m * tx3, ty3);\n    }\n\n    else if(noseType == 3){ \/\/creates a line nose\n        \n        strokeWeight(3);\n        line(midX, m * ((height \/ 2) + (faceHeight \/ 8)),midX, ((height \/ 2) - (faceHeight \/ 8)));\n    }\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 75 and 150.\n    faceWidth = random(75, 150);\n    faceHeight = random(100, 200);\n    eyeSize = random(10, 30);\n    browLength = random((eyeSize * .95), (eyeSize * 1.35));\n    eyeColor = floor(random(1,10)); \/\/chooses one of the eye color combinations\n    mouthType = floor(random(1,4)); \/\/choose the mouth type\n    noseType = floor(random(1,4));  \/\/chooses the nose type\n    r = random(255); \/\/changes eyebrow color\n    m = (random(.95,1.05));\n    skinColor = floor(random(1,8)); \/\/changes the skin color\n\n}<\/code><\/pre><\/div>\n\n\n<p>I had a lot of fun with this project. It was interesting trying to come up with more and more ways to make the face different. One of my early troubles was a problem with my eye colors. I was using &ldquo;if(eyeColor == x)&hellip;&rdquo; and eyeColor = &ldquo;random(1,10)&rdquo; but most clicks would end with no irises at all. I then realized the problem was that random() gives a floating point number and I was asking for a specific integer, so the odds of getting one were super low, so I changed the line to &ldquo;floor(random(1,10))&rdquo; which thankfully fixed it.<\/p><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>wpf-variable-face \/\/Patrick Fisher, section B var eyeSize = 20; var faceWidth = 100; var faceHeight = 150; var eyeColor = 2; var mouthType = 1; var noseType = 1; var browLength = (1.15 * eyeSize); var r = 0; \/\/color value for eyebrows var m = 1; \/\/coefficent for for size of mouth and nose &hellip; <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/09\/11\/project-2-variable-faces-3\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Project 2: Variable Faces&#8221;<\/span><\/a><\/p>\n","protected":false},"author":648,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[97,56],"tags":[],"_links":{"self":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/65495"}],"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\/648"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/comments?post=65495"}],"version-history":[{"count":5,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/65495\/revisions"}],"predecessor-version":[{"id":66040,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/65495\/revisions\/66040"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/media?parent=65495"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/categories?post=65495"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/tags?post=65495"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}