{"id":71661,"date":"2022-09-11T22:21:56","date_gmt":"2022-09-12T02:21:56","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/?p=71661"},"modified":"2022-09-11T22:21:56","modified_gmt":"2022-09-12T02:21:56","slug":"project-02-faces-and-variables","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/09\/11\/project-02-faces-and-variables\/","title":{"rendered":"Project 02: Faces and Variables"},"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>Within my project, what I wanted to do was to examine what we call faces. What exactly are the processes by which we determine what is a face or not? In such, I attempted to use the most chaotic combinations by randomizing virtually every color combination on screen possible. <\/p>\n<div><a class=\"p5_sketch_link\" href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/09\/sketch-239.js\" data-width=\"300\" data-height=\"300\">sketch<\/a><iframe src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/plugins\/p5-embedder\/p5_iframe.html\" class=\"p5_exampleFrame\" width=\"300\" height=\"300\"><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">var eyeSize = 20;\nvar faceWidth = 100;\nvar faceHeight = 150;\nvar x = 1;\nvar y = 255;\nvar z = 2;\nvar mouth = 1\nvar hair = 1\n\n\n\n \nfunction setup() {\n    createCanvas(300, 300);\n}\n \nfunction draw() {\n    strokeWeight(3);\n    stroke(y,x,z);\n    fill(x,y,z);\n    background(y - 100, x + 30, z + 5);\n    ellipse(width \/ 2, height \/ 2, faceWidth,  faceHeight);\n    var eyeLX = width \/ 2 - faceWidth * 0.25;\n    var eyeRX = width \/ 2 + faceWidth * 0.25;\n    fill(x - 80, y - 80, z - 80);\n    ellipse(eyeLX, height \/ 2, eyeSize, eyeSize);\n    ellipse(eyeRX, height \/ 2, eyeSize, eyeSize);\n    if (mouth == 1) {\n        \/\/happy mouth\n        arc(width \/ 2, (height \/ 2) + 25, faceWidth - 40, faceHeight \/ 2, 0, radians(180));\n    }\n    if (mouth == 2) {\n        \/\/sad face\n        noFill();\n        arc(width \/ 2, (height \/ 2) + 50, faceWidth - 40, faceHeight \/ 2, radians(180), 0);\n    }\n   if (mouth == 3) {\n        \/\/shocked mouth\n        fill(255,102,102);\n        ellipse(width \/ 2, (height \/ 2) + 50, faceHeight \/ 2, faceWidth \/ 2);\n    }\n    if (hair == 1) {\n        \/\/party hat\n        fill(z,x,y);\n        triangle((width \/ 2) - (faceWidth \/ 2), (height \/ 2) - (faceHeight \/ 2), width \/ 2, (height \/ 4) - 70, (width \/ 2) + (faceWidth \/ 2), (height \/ 2) - (faceHeight \/ 2));\n    }\n    if (hair == 2) {\n        \/\/beret\n        fill(0);\n        ellipse(width \/ 2, (height \/ 2) - 70, faceWidth + 20, faceHeight \/ 2);\n    }\n   if (hair == 3) {\n        \/\/bowl cut\n        fill(z,y,x + 10);\n        arc(width \/ 2, (height \/ 2) - (faceHeight \/ 2) + 30, faceHeight - 15,(faceWidth \/ 2) + 30, radians(180), 0);\n        rect((width \/ 2) - (faceWidth \/ 1.5), (height \/ 2) - (faceHeight \/ 2) + 30, faceWidth \/ 3, faceHeight \/ 2);\n        rect((width \/ 2) + (faceWidth \/ 3), (height \/ 2) - (faceHeight \/ 2) + 30, faceWidth \/ 3, faceHeight \/ 2);\n    }\n\n}\n \nfunction mousePressed() {\n    if (mouseIsPressed == true) {\n        x = random(0,255);\n        y = random(0,255);\n        z = random(0,255);\n        fill(x,y,z);\n        }\n    faceWidth = random(75, 150);\n    faceHeight = random(100, 200);\n    eyeSize = random(10, 30);\n    faceColor = random(0,255);\n    hair += 1;\n    if (hair &gt; 3) {\n        hair = 1;\n    }\n    mouth += 1;\n    if (mouth &gt; 3) {\n        mouth = 1;\n    }\n}<\/code><\/pre><\/div><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>Within my project, what I wanted to do was to examine what we call faces. What exactly are the processes by which we determine what is a face or not? In such, I attempted to use the most chaotic combinations by randomizing virtually every color combination on screen possible. sketch var eyeSize = 20; var &hellip; <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/09\/11\/project-02-faces-and-variables\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Project 02: Faces and Variables&#8221;<\/span><\/a><\/p>\n","protected":false},"author":730,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[1],"tags":[82,81],"_links":{"self":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/71661"}],"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\/730"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/comments?post=71661"}],"version-history":[{"count":2,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/71661\/revisions"}],"predecessor-version":[{"id":71668,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/71661\/revisions\/71668"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/media?parent=71661"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/categories?post=71661"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/tags?post=71661"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}