{"id":71207,"date":"2022-09-10T19:00:32","date_gmt":"2022-09-10T23:00:32","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/?p=71207"},"modified":"2022-09-10T19:00:32","modified_gmt":"2022-09-10T23:00:32","slug":"project-02-variable-faces-3","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/09\/10\/project-02-variable-faces-3\/","title":{"rendered":"Project 02 &#8211; 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>My Goal was to create a simple interactive face which resulted different types with each click. Click to see different faces.<\/p>\n<div><a class=\"p5_sketch_link\" href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/09\/sketch-176.js\" data-width=\"600\" 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=\"600\" height=\"480\"><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">\/\/Favour Adesina Section B\n\nvar faceWidth = 300;\nvar lipHeight = 20;\nvar lipWidth = 60;\nvar BlipWidth = 100;\nvar eyeWidth = 70;\nvar eyeHeight = 100;\nvar pupSize = 60;\nvar faceHeight = 400;\n\n\nfunction setup() {\n    createCanvas(600, 480);\n    background(220);\n    text(\"p5.js vers 0.9.0 test.\", 10, 15);\n}\n\nfunction draw() {\n    noStroke()\n    background(247, 195, 218);\n\n    \/\/SHOULDER\n    fill(255, 67, 89);\n    ellipse(width\/2, height\/2 + faceHeight\/2, 2*faceWidth, faceHeight);\n\n    \/\/EARS\n    fill(141, 75, 36);\n    ellipse(width\/2 - faceWidth\/2, height\/2, faceWidth\/4, faceHeight\/4); \/\/right ear outer\n    ellipse(width\/2 + faceWidth\/2, height\/2, faceWidth\/4, faceHeight\/4);  \/\/left ear outer\n    fill(34, 20, 13);\n    ellipse(width\/2 - faceWidth\/2, height\/2, faceWidth\/8, faceHeight\/8);    \/\/right ear inner\n    ellipse(width\/2 + faceWidth\/2, height\/2, faceWidth\/8, faceHeight\/8);    \/\/left ear inner\n    \/\/FACE\n    fill(141, 75, 36);\n    ellipse(width\/2, height\/2, faceWidth, faceHeight);    \/\/ face\n\n    \/\/EARRINGS\n    fill(255, 255, 0);\n    triangle((width\/2 - (faceWidth\/2 + faceWidth\/50)), height\/2 + faceHeight\/4, width\/2 - faceWidth\/2, height\/2 + faceHeight\/16, width\/2 - faceWidth\/1.5, height\/2 + faceHeight\/4);\n    triangle((width\/2 + (faceWidth\/2 - faceWidth\/100)), height\/2 + faceHeight\/4, width\/2 + faceWidth\/2, height\/2 + faceHeight\/16, width\/2 + faceWidth\/1.55, height\/2 + faceHeight\/4);\n\n\n    \/\/EYES\n    var LXeye = width\/2 - faceWidth * 0.26;          \n    var RXeye = width\/2 + faceWidth * 0.26;\n    fill(255, 255, 255);\n    ellipse(LXeye, height\/2, eyeWidth, eyeHeight);    \/\/Eye Whites \n    ellipse(RXeye, height\/2, eyeWidth, eyeHeight);    \/\/Eye Whites\n    fill(104, 54, 37);\n    ellipse(LXeye, height\/2, pupSize, pupSize);    \/\/Pupils \n    ellipse(RXeye, height\/2, pupSize, pupSize);     \/\/pupils \n    fill(0);\n    ellipse(LXeye, height\/2, 20, 20);                \/\/inner pupils \n    ellipse(RXeye, height\/2, 20, 20);                \/\/inner pupils\n       \n    \/\/NOSE\n    stroke(35, 31, 32);\n    strokeWeight(7);\n    line(width\/2, height\/2, width\/2, (height\/2)+ eyeHeight\/3);                         \/\/Nose bridge\n    ellipse((width\/2)-5, (height\/2)+ eyeHeight\/3, faceWidth\/25, faceWidth\/25);            \/\/ nose \n    ellipse((width\/2)+5, (height\/2)+ eyeHeight\/3, faceWidth\/25, faceWidth\/25);            \/\/ nose\n\n    \/\/LIPS\n    strokeWeight(2);\n    var BlipY = height\/2 + faceHeight * 0.27 + lipHeight\/2;\n    fill(122, 22, 25);\n    ellipse(width\/2, BlipY, BlipWidth, lipHeight);\n    noStroke();\n    fill(173, 69, 87);                                   \/\/light pink \n    ellipse(width\/2, BlipY, lipWidth\/2, lipHeight\/2);  \/\/inner mouth\n\n    \n\n\n    \/\/HAIR\n    fill(34, 20, 13);\n    ellipse(width\/2, height\/2 - faceHeight\/2, width\/7, height\/6);\n    ellipse(width\/2 - 55, height\/2 - faceHeight\/2, width\/8, height\/7);\n    ellipse(width\/2 + 55, height\/2 - faceHeight\/2, width\/8, height\/7);\n \n\n        }\n\nfunction mousePressed() {\n\n    faceWidth = random(300, 500);\n    faceHeight = random(260, 400);\n    lipHeight = random(10, 50);\n    pupSize = random(20, 70);\n    lipWidth = random(10, 60);\n    BlipWidth = random(30, 100);\n    eyeWidth = random(20, 150);\n    eyeHeight = random(80, 170);\n\n}\n\n<\/code><\/pre><\/div><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>My Goal was to create a simple interactive face which resulted different types with each click. Click to see different faces. sketch \/\/Favour Adesina Section B var faceWidth = 300; var lipHeight = 20; var lipWidth = 60; var BlipWidth = 100; var eyeWidth = 70; var eyeHeight = 100; var pupSize = 60; var &hellip; <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/09\/10\/project-02-variable-faces-3\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Project 02 &#8211; Variable Faces&#8221;<\/span><\/a><\/p>\n","protected":false},"author":701,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[97,56],"tags":[82,81],"_links":{"self":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/71207"}],"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\/701"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/comments?post=71207"}],"version-history":[{"count":1,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/71207\/revisions"}],"predecessor-version":[{"id":71209,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/71207\/revisions\/71209"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/media?parent=71207"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/categories?post=71207"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/tags?post=71207"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}