{"id":65469,"date":"2021-09-11T15:51:20","date_gmt":"2021-09-11T19:51:20","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/?p=65469"},"modified":"2021-09-11T15:51:20","modified_gmt":"2021-09-11T19:51:20","slug":"project-2-variable-faces-2","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/09\/11\/project-2-variable-faces-2\/","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><a class=\"p5_sketch_link\" data-width=\"640\" data-height=\"480\" href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/09\/sketch-85.js\">bob project 2<\/a><iframe src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/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\">var faceWidth = 250;\nvar faceHeight = 250;\nvar faceColorR = 30;\nvar faceColorG = 20;\nvar faceColorB = 80;\nvar randomEars = 0;\nvar randomEyes = 0;\nvar randomNose = 0;\nvar eyeWidth = 28;\nvar eyeHeight = 35;\nvar eyeColorR = 252;\nvar eyeColorG = 230;\nvar eyeColorB = 33;\n\n\nfunction setup() {\n    createCanvas(640, 480);\n}\n\nfunction draw() {\n    \/\/face\n    background(206, 219, 240); \/\/light blue for background\n    fill(faceColorR, faceColorG, faceColorB); \/\/color of face\n    ellipse(width \/ 2, height \/ 2, faceWidth, faceHeight); \/\/face\n\n    \/\/ears (randomly pick ears)\n    if (randomEars &lt;= 1){ \/\/round ears\n        circle(width\/3, height\/3, 60); \/\/left round ears\n        circle(width - (width\/3), height\/3, 60); \/\/right round ears\n\n    } else if (randomEars &lt;= 2) { \/\/triangle ears\n        triangle(190, 130, 260, 152 , 220, 200); \/\/left triangle ears\n        triangle(450, 130, 380, 152, 420, 200); \/\/right triangle ears\n\n    } else { \/\/curved down ears\n        beginShape(); \/\/left curved down ears\n        curveVertex(200, 210);\n        curveVertex(210, 230);\n        curveVertex(170, 180);\n        curveVertex(270, 137);\n        curveVertex(290, 240);\n        endShape();\n\n        beginShape(); \/\/right curved down ears\n        curveVertex(440, 210);\n        curveVertex(430, 230);\n        curveVertex(470, 180);\n        curveVertex(370, 137);\n        curveVertex(350, 240);\n        endShape();\n    }\n    \n\n    \/\/eyes (randomly pick eyes)\n    if (randomEyes &lt;= 1){ \/\/round eyes\n    fill(eyeColorR, eyeColorG, eyeColorB); \/\/changing eye color\n    ellipse(280, 230, eyeWidth, eyeHeight); \/\/left black part of round eyes \n    fill(255, 255, 255);\n    ellipse(280, 236, 15, 17); \/\/left white part of round eyes\n    fill(eyeColorR, eyeColorG, eyeColorB);\n    ellipse(360, 230, eyeWidth, eyeHeight); \/\/right black part of round eyes \n    fill(255, 255, 255);\n    ellipse(360, 236, 15, 17); \/\/right white part of round eyes\n    \n    } else if (randomEyes &lt;= 2){ \/\/line eyes\n    fill(0, 0, 0); \/\/black\n    rect(260, 230, 30, 5); \/\/left line eyes\n    rect(350, 230, 30, 5); \/\/right line eyes\n    \n    } else { \/\/reptile eyes\n    fill(0, 0, 0); \/\/black \n    circle(275, 230, 50); \/\/left black part of reptile eyes\n    fill(eyeColorR, eyeColorG, eyeColorB); \/\/changing eye color\n    ellipse(275, 230, 5, 50); \/\/left inside part of reptile eyes\n    fill(0, 0, 0); \/\/black \n    circle(365, 230, 50); \/\/right black part of reptile eyes\n    fill(eyeColorR, eyeColorG, eyeColorB); \/\/changing eye color\n    ellipse(365, 230, 5, 50); \/\/right inside part of reptile eyes\n    }\n    \n\n    \/\/nose (randomly pick nose)\n    fill(faceColorR + 50, faceColorG + 35, faceColorB + 10); \/\/nose color slightly darker than face color\n    \n    if (randomNose &lt;= 1) { \/\/pig snout\n    ellipse(width\/2, height\/2 + 30, 70, 40); \/\/pig snout outside\n    ellipse(width\/2 -10, height\/2 +30, 8, 15); \/\/pig snout left nostril\n    ellipse(width\/2 +10, height\/2 +30, 8, 15); \/\/pig snout right nostril\n    \n    } else if (randomNose &lt;= 2) { \/\/triangle nose\n    triangle(width\/2 - 10, height\/2 + 30, width\/2 + 10, height\/2 + 30, width\/2, height\/2 + 45); \/\/triangle nose\n    \n    } else { \/\/curvy mouth + whiskers\n    fill(faceColorR, faceColorG, faceColorB);\n    arc(width\/2 - 10, height\/2 + 50, 20, 20, 0, radians(200)); \/\/curvy mouth left\n    arc(width\/2 + 10, height\/2 + 50, 20, 20, radians(-20), PI); \/\/curvy mouth right\n    fill(0, 0, 0); \/\/black \n    line(240, 270, 180, 240); \/\/left top whisker\n    line(400, 270, 460, 240); \/\/right top whisker\n    line(240, 275, 175, 275); \/\/left middle whisker\n    line(400, 275, 465, 275); \/\/right middle whisker\n    line(240, 280, 180, 310); \/\/left bottom whisker\n    line(400, 280, 460, 310); \/\/right bottom whisker\n    }\n  \n}\n\nfunction mousePressed(){\n    faceWidth = random(200, 250);\n    faceHeight = random(200, 250);\n    faceColorR = random(80, 170);\n    faceColorG = random(50, 150);\n    faceColorB = random(60, 200);\n    randomEars = random(0, 3);\n    randomEyes = random(0, 3);\n    randomNose = random(0, 3);\n    eyeWidth = random(20, 35);\n    eyeHeight = random(30, 38);\n    eyeColorR = random(185, 220);\n    eyeColorG = random (190, 235);\n    eyeColorB = random (130, 250);\n}\n<\/code><\/pre><\/div>\n\n\n<p>The most interesting part of the project was testing out the code and seeing how the facial features change and create unique combinations. However, I did find it a bit challenging and time-consuming to design each of the variations. <\/p><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>bob project 2 var faceWidth = 250; var faceHeight = 250; var faceColorR = 30; var faceColorG = 20; var faceColorB = 80; var randomEars = 0; var randomEyes = 0; var randomNose = 0; var eyeWidth = 28; var eyeHeight = 35; var eyeColorR = 252; var eyeColorG = 230; var eyeColorB = 33; &hellip; <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/09\/11\/project-2-variable-faces-2\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Project 2: Variable Faces&#8221;<\/span><\/a><\/p>\n","protected":false},"author":671,"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\/65469"}],"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\/671"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/comments?post=65469"}],"version-history":[{"count":3,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/65469\/revisions"}],"predecessor-version":[{"id":65478,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/65469\/revisions\/65478"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/media?parent=65469"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/categories?post=65469"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/tags?post=65469"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}