{"id":71127,"date":"2022-09-10T22:45:10","date_gmt":"2022-09-11T02:45:10","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/?p=71127"},"modified":"2022-09-10T22:48:25","modified_gmt":"2022-09-11T02:48:25","slug":"project-2-variable-face-2","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/09\/10\/project-2-variable-face-2\/","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><p>Hi here are my faces! The hardest part of the project is to create all these different options for hair, eyes, mouth etc. Then linking those to the random function. <\/p>\n<div><a class=\"p5_sketch_link\" href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/09\/sketch-200.js\" data-width=\"&ldquo;600&rdquo;\" data-height=\"&ldquo;480&rdquo;\">sketch<\/a><iframe src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/plugins\/p5-embedder\/p5_iframe.html\" class=\"p5_exampleFrame\" width=\"&ldquo;600&rdquo;\" height=\"&ldquo;480&rdquo;\"><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">\/\/Tracy Meng\n\/\/Section B\n\n\/\/ GLOBAL VARIABLES\nvar eyeSize = 20;\nvar mouthSize = 50;\nvar earringSize = 30;\nvar faceWidth = 100;\nvar faceHeight = 150;\nvar earSize = 20;\nvar noseSize = 30;\nvar pupSize = 10;\nvar noseType = 1;\nvar hairType = 1;\nvar eyeType = 1;\nvar earringType = 1;\nvar mouthType = 1;\nvar backgroundType = 1;\n\n\nfunction setup() {\n    createCanvas(600, 480);\n}\n\nfunction draw() {\n\/\/BACKGROUND\n    \/\/background types\n    if (backgroundType == 1) {\n        background(225,246,255); \/\/light blue background\n    }\n\n    else if (backgroundType == 2) {\n        background(255,164,216); \/\/light pink background\n    }\n\n    else {\n        background(247,255,165); \/\/light yellow background\n    }\n\n\n\/\/HAIR\n    \/\/ hair types    \n    if (hairType == 1) {\n        strokeWeight(15);\n        stroke(127,82,0); \/\/brownhair\n        fill(127,82,0);\n        arc(width \/ 2, height \/ 2, faceWidth, faceHeight, PI, 0); \/\/straight long hair\n        rect(width\/2 - faceWidth\/2, height\/2, faceWidth, height);\n    }\n\n    else if (hairType == 2) {\n        strokeWeight(45);\n        stroke(209,209,20); \/\/blondehair\n        fill(209,209,20);\n        arc(width \/ 2, height \/ 2, faceWidth, faceHeight, PI-PI\/4, PI\/4); \/\/pom-poms\n        ellipse(width\/2 - faceWidth\/2, height\/2 + faceHeight\/4, faceHeight\/2); \/\/pom-pom left\n        ellipse(width\/2 + faceWidth\/2, height\/2 + faceHeight\/4, faceHeight\/2); \/\/pom-pom right\n    }\n\n    else {\n        strokeWeight(80);\n        stroke(27,6,0); \/\/blackhair\n        arc(width \/ 2, height \/ 2, faceWidth, faceHeight, PI-PI\/8, PI\/8); \/\/short hair\n    }\n\n\n\/\/EARS\n    \/\/local variable of EARS\nvar earLX = width \/ 2 - (faceWidth\/2); \/\/ earLX = horizontal coordinate of LEFT ear\nvar earRX = width \/ 2 + (faceWidth\/2); \/\/ earLX = horizontal coordinate of LEFT ear\n\n    \/\/left ear\n    noStroke();\n    fill(255,220,177); \/\/nude color\n    ellipse(earLX, height\/2, earSize\/2, earSize);\n\n    \/\/right ear\n    ellipse(earRX, height \/2, earSize\/2, earSize); \n\n    \/\/left ear hole\n    strokeWeight(2);\n    stroke(230,145,20); \/\/dark nude stroke\n    arc(earLX, height\/2, earSize\/4, earSize\/2, -PI\/2, -PI+PI\/2); \n    \n    \/\/right ear hole\n    arc(earRX, height \/2, earSize\/4, earSize\/2, PI\/2, -PI-PI\/2);\n\n\n\/\/FACE \/ HEAD\n\/\/strokeWeight(1);  \n    strokeWeight(0);\n    fill(255,220,177); \/\/nude color  \n    ellipse(width \/ 2, height \/ 2, faceWidth,  faceHeight);\n\n\n\/\/EARRINGS\n    \/\/earring types\n    if (earringType == 1) {\n        strokeWeight(5);\n        stroke(167,0,239); \/\/purple\n        noFill();\n        ellipse(earLX, height\/2 + earSize\/2, earringSize\/6, earringSize); \/\/left ear\n        ellipse(earRX, height\/2 + earSize\/2, earringSize\/6, earringSize); \/\/ right ear\n    }\n\n    else if (earringType == 2) {\n        noStroke();\n        fill(27,255,255); \/\/teal\n        ellipse(earLX, height\/2 + earSize\/2, earringSize\/2, earringSize); \/\/left ear\n        ellipse(earRX, height\/2 + earSize\/2, earringSize\/2, earringSize); \/\/ right ear\n\n\n        fill(0,159,11); \/\/green - smaller circle\n        ellipse(earLX, height\/2 + earSize\/2, earringSize\/3, earringSize\/1.5); \/\/smaller cirlcle left\n        ellipse(earRX, height\/2 + earSize\/2, earringSize\/3, earringSize\/1.5); \/\/smaller circle right\n    }\n\n    else {\n        fill(255,277,80); \/\/orange\n        rect(earLX-earringSize\/4, height\/2 + earSize\/2, earringSize\/2, earringSize,5); \/\/left ear\n        rect(earRX-earringSize\/4, height\/2 + earSize\/2, earringSize\/2, earringSize,5); \/\/ right ear\n    }\n\n\n\/\/NOSE\n    \/\/local variables of NOSE\nvar noseX = width \/2; \/\/ horizontal coordinates for NOSE\nvar noseY = height \/2 + (faceHeight\/8); \/\/ vertical coordinates for NOSE\n\nnoStroke();\nfill(255,198,122); \/\/nose color darker nude\n    \/\/nose types\n    if (noseType == 1) {\n        ellipse(noseX, noseY, noseSize, noseSize); \/\/ nose circle\n    }\n\n    else if (noseType == 2) {\n        rect(noseX - (noseSize\/4), noseY - (noseSize\/2), noseSize\/2, noseSize, 30); \/\/ nose rectangle\n    }\n\n    else {\n        triangle(noseX, noseY - (noseSize\/2), noseX - (noseSize\/2), noseY + (noseSize\/4), noseX + (noseSize\/2), noseY + (noseSize\/4)); \/\/ nose triangle\n    }\n\n\n\/\/EYES    \n    \/\/local variable of EYES\nvar eyeLX = width \/2 - (faceWidth * 0.25); \/\/eyeLX = horizontal coordinate of LEFT eye\nvar eyeRX = width \/2 + (faceWidth * 0.25); \/\/eyeRX = horizontal coordinate of RIGHT eye\n\n\n\/\/eye type 1 - eye open  \n    if (eyeType == 1) {\n\n    \/\/overall eyeball\n        fill(255); \/\/white eyeballs\n        ellipse(eyeLX, height \/2, eyeSize + eyeSize\/4, eyeSize); \/\/left eye\n        ellipse(eyeRX, height \/2, eyeSize + eyeSize\/4, eyeSize); \/\/right eye\n\n    \/\/eye color\n        fill(0,176,203); \/\/eye color - blue\n        ellipse(eyeLX, height \/2, eyeSize\/2, eyeSize\/2); \/\/ left eye color\n        ellipse(eyeRX, height \/2, eyeSize\/2, eyeSize\/2); \/\/ right eye color\n\n    \/\/eye pupils\n        fill(0); \/\/black pupils\n        ellipse(eyeLX, height \/2, pupSize, pupSize); \/\/ left eye pupil\n        ellipse(eyeRX, height \/2, pupSize, pupSize); \/\/ right eye pupil\n    }\n\n\/\/eye type 2 - shut\n    else if (eyeType == 2) {\n        strokeWeight(2);\n        stroke(230,145,20); \/\/dark nude outline\n        noFill();\n\n    \/\/LEFT EYE\n        arc(eyeLX, height \/2, eyeSize\/2, eyeSize, 0, PI);\n\n    \/\/RIGHT EYE\n        arc(eyeRX, height \/2, eyeSize\/2, eyeSize, 0, PI);\n    }\n\n\/\/eye type 3 - sunglasses\n    else {\n        strokeWeight(4);\n        stroke(250,145,164); \/\/rim color hot pink\n        fill(0); \/\/glass of sunglasses is black\n\n    \/\/LEFT EYE SUNGLASSES\n        rect(eyeLX - eyeSize\/2, height \/2 - eyeSize\/2, eyeSize, eyeSize, 1);\n\n    \/\/RIGHT EYE SUNGLASSES\n        rect(eyeRX - eyeSize\/2, height \/2 - eyeSize\/2, eyeSize, eyeSize, 1);\n\n    \/\/LINE CONNECTION\n        line(eyeLX + eyeSize\/2, height \/2 - eyeSize\/4, eyeRX - eyeSize\/2, height \/2 - eyeSize\/4);\n\n    \/\/GLARE\n        strokeWeight(8);\n        stroke(255);\n        point(eyeLX + eyeSize \/8, height \/2 + eyeSize\/4); \/\/left eye\n        point(eyeRX + eyeSize \/8, height \/2 + eyeSize\/4); \/\/right eye\n\n    }\n\n\/\/MOUTH\n\n    \/\/local variable of MOUTH\nvar mouthX = width \/2; \/\/mouthX = horizontal coordinate of MOUTH\nvar mouthY = height \/2 + (faceHeight\/3); \/\/mouthY = vertical coordinate of MOUTH\n\n\/\/mouth type 1 - surprised with tongue\n    if (mouthType == 1) { \n        strokeWeight(2);\n        stroke(225,0,37); \/\/lip liner color - red\n        fill(255);\n        ellipse(mouthX, mouthY, mouthSize, mouthSize\/2); \/\/surprised\n\n        \/\/tongue\n        noStroke();\n        fill(255,144,159); \/\/tongue color - pink\n        ellipse(mouthX, mouthY + mouthSize\/8, mouthSize\/1.5, mouthSize\/4); \/\/tongue\n    }\n\n\/\/mouth type 2 - smile\n    else if (mouthType == 2) {\n        noFill();\n        strokeWeight(3);\n        stroke(201,0,40); \/\/lip liner color - red\n        arc(mouthX, mouthY, mouthSize, mouthSize\/2, 0, PI); \/\/happy\n    }\n\n\/\/mouth type 3 - frown\n    else {\n        stroke(94,53,0); \/\/sad mouth color - dark brown\n        strokeWeight(3);\n        noFill();\n        arc(mouthX, mouthY, mouthSize, mouthSize\/2, PI, 0); \/\/sad   \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\n\/\/CREATE RANDOM DIMENSIONS\n    faceWidth = random(100, 400);\n    faceHeight = random(100, 400);\n    earSize = random(10, 80);\n    eyeSize = random(10, 65);\n    noseSize = random(10,50);\n    pupSize = random(8,15);\n    earringSize = random(20,60);\n\n\/\/CREATE RANDOM TYPES & OPTIONS\n    noseType = random (1,3);\n    noseType = round(noseType);\n\n    hairType = random (1,3);\n    hairType = round(hairType);\n\n    eyeType = random (1,3);\n    eyeType = round(eyeType);\n\n    earringType = random (1,3);\n    earringType = round(earringType);\n\n    mouthType = random(1,3);\n    mouthType = round(mouthType);\n\n    backgroundType = random(1,3);\n    backgroundType = round(backgroundType);\n\n\n}<\/code><\/pre><\/div><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>Hi here are my faces! The hardest part of the project is to create all these different options for hair, eyes, mouth etc. Then linking those to the random function. sketch \/\/Tracy Meng \/\/Section B \/\/ GLOBAL VARIABLES var eyeSize = 20; var mouthSize = 50; var earringSize = 30; var faceWidth = 100; var &hellip; <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/09\/10\/project-2-variable-face-2\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Project 2: Variable Face&#8221;<\/span><\/a><\/p>\n","protected":false},"author":745,"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\/f2022\/wp-json\/wp\/v2\/posts\/71127"}],"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\/745"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/comments?post=71127"}],"version-history":[{"count":22,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/71127\/revisions"}],"predecessor-version":[{"id":71370,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/71127\/revisions\/71370"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/media?parent=71127"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/categories?post=71127"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/tags?post=71127"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}