{"id":71889,"date":"2022-09-16T11:47:17","date_gmt":"2022-09-16T15:47:17","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/?p=71889"},"modified":"2022-09-16T11:47:17","modified_gmt":"2022-09-16T15:47:17","slug":"project-02-variable-faces-7","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/09\/16\/project-02-variable-faces-7\/","title":{"rendered":"project 02: 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=\"500\" data-height=\"500\" href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/09\/sketch-265.js\">m&rsquo;s project 2<\/a><iframe src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/plugins\/p5-embedder\/p5_iframe.html\" class=\"p5_exampleFrame\" width=\"500\" height=\"500\"><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">\/* atayao\n    lab section E\n    project 2\n*\/\n\n\/\/ random reassignment (RR)\nvar eyeSize = 20;\nvar eyeDistance = 0.20;\nvar faceWidth = 115;\nvar faceHeight = 105;\n\n\/\/ pick a card, any card (PAC)\nvar mouth = 0;\nvar skin = 0;\n\n\/\/ variables from canvas dimensions\nvar x = 320;\nvar y = 240;\n\nfunction setup() {\n    createCanvas(640, 480);\n}\n\nfunction draw() {\n    background(255);\n    strokeWeight(2.5);\n    \/* if-else statements test for the current value of \n    PAC variables to fill in skin color, mouth, & any facial marks.*\/\n\n    \/\/ SKIN COLORS\n    if (skin == 0) {\n        \/\/ bright blue skin\n        fill(33, 118, 255);\n        ellipse(width\/2, height\/2, faceWidth, faceHeight);\n    } else if (skin == 1) {\n        \/\/ pink skin\n        fill(255, 79, 170);\n        ellipse(width\/2, height\/2, faceWidth, faceHeight);\n    } else if (skin == 2) {\n        \/\/ green skin\n        fill(136, 212, 38);\n        ellipse(width\/2, height\/2, faceWidth, faceHeight);\n    } else if (skin == 3) {\n        \/\/ orange skin\n        fill(255, 117, 43);\n        ellipse(width\/2, height\/2, faceWidth, faceHeight);\n    } else if (skin == 4) {\n        \/\/ turquoise skin\n        fill(2, 206, 217);\n        ellipse(width\/2, height\/2, faceWidth, faceHeight);\n    } else {\n        \/\/ yellow skin\n        fill(255, 228, 56);\n        ellipse(width\/2, height\/2, faceWidth, faceHeight);\n    }   \n\n    \/\/ MOUTH SHAPES\n    if (mouth == 0) {\n        \/\/ open mouth\n        fill(0);\n        circle(width\/2, (height\/2 + (faceHeight\/3)), faceWidth\/6); \n    } else if (mouth == 1) {\n    \/\/ neutral mouth\n        line((x - faceWidth\/5), (y + faceHeight\/4), (x + faceWidth\/5), (y + faceHeight\/4));\n    } else if (mouth == 2) {\n    \/\/ smiling mouth\n        fill(255);\n        triangle((x - faceWidth\/5), (y + faceHeight\/4), (x + faceWidth\/5), (y + faceHeight\/4), x, (y + faceHeight\/3));\n    } else {\n    \/\/ dot mouth\n        fill(0);\n        circle(width\/2, (height\/2 + (faceHeight\/3)), faceWidth\/25); \n    }\n\n    \/\/ EYES\n    var eyeLX = width \/ 2 - faceWidth * eyeDistance;    \/\/ x-coordinate for left eye\n    var eyeRX = width \/ 2 + faceWidth * eyeDistance;    \/\/ x-coordinate for right eye\n    fill(255);\n    ellipse(eyeLX, height \/ 2, eyeSize, eyeSize);    \/\/ left eye\n    ellipse(eyeRX, height \/ 2, eyeSize, eyeSize);    \/\/ right eye\n    fill(0);\n    ellipse(eyeLX, height\/2, eyeSize\/2, eyeSize\/2);    \/\/ left pupil\n    ellipse(eyeRX, height\/2, eyeSize\/2, eyeSize\/2);    \/\/ right pupil\n    fill(0);\n}\n\nfunction mousePressed() {\n    \/* when the mouse is clicked, variables are reassigned to random values within\n    specified ranges. *\/\n\n    \/\/ RR\n    eyeSize = random(18, 35);\n    eyeDistance = random(0.20, 0.28);\n    faceWidth = random(75, 150);\n    faceHeight = random(100, 200);\n\n    \/\/ PAC\n    skin = int(random(0, 6)); \n    mouth = int(random(0, 4));\n    cheeks = int(random(0, 6));\n}<\/code><\/pre><\/div>\n\n\n\n<p>The  most challenging and interesting part of this project for me was figuring out the maximum random variability possible to create interesting combinations while still making the overall images legible as faces.<\/p><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>m&rsquo;s project 2 \/* atayao lab section E project 2 *\/ \/\/ random reassignment (RR) var eyeSize = 20; var eyeDistance = 0.20; var faceWidth = 115; var faceHeight = 105; \/\/ pick a card, any card (PAC) var mouth = 0; var skin = 0; \/\/ variables from canvas dimensions var x = 320; &hellip; <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/09\/16\/project-02-variable-faces-7\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;project 02: variable faces&#8221;<\/span><\/a><\/p>\n","protected":false},"author":764,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[97,121],"tags":[],"_links":{"self":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/71889"}],"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\/764"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/comments?post=71889"}],"version-history":[{"count":3,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/71889\/revisions"}],"predecessor-version":[{"id":73469,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/71889\/revisions\/73469"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/media?parent=71889"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/categories?post=71889"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/tags?post=71889"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}