{"id":70784,"date":"2022-09-09T17:31:23","date_gmt":"2022-09-09T21:31:23","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/?p=70784"},"modified":"2022-09-09T17:31:23","modified_gmt":"2022-09-09T21:31:23","slug":"project-02-variable-faces","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/09\/09\/project-02-variable-faces\/","title":{"rendered":"Project &#8211; 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 class=\"wp-block-file\"><a id=\"wp-block-file--media-a07adbd4-5b4a-4f4f-9381-8ad6ee380345\" class=\"p5_sketch_link\" data-width=\"600\" data-height=\"480\" href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/09\/emily-variableface.js\">emily-variableface<\/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\">\/\/Emily Brunner, Section C\n \nvar eyeSize = 60;  \/\/size of eye\nvar faceWidth = 300;  \/\/face width\nvar faceHeight = 300;  \/\/face height\nvar faceColorR = 255; \/\/face color red space\nvar faceColorB = 155;  \/\/face color blue space\nvar pupilSize = 5;   \/\/pupil width and height\nvar mouth = 190;  \/\/mouth width\nvar mouthColorR = 255; \/\/mouth color red space\nvar mouthColorG = 25;  \/\/mouth color green space\nvar mouthOpen = 95;  \/\/mouth height\nvar nose = 20; \/\/nose width\n\n\nfunction setup() {\n    createCanvas(640, 480);\n    text(\"p5.js vers 0.9.0 test.\", 10, 15);\n}\n\nfunction draw() {\n    strokeWeight(0);\n    background(180);\n\n    fill(faceColorR, 150, faceColorB); \/\/head color\n    ellipse(width \/ 2, height \/ 2, faceWidth,  faceHeight); \/\/head\n    \n    var eyeLX = width \/ 2 - faceWidth * 0.2; \/\/left eye width\n    var eyeRX = width \/ 2 + faceWidth * 0.2; \/\/right eye width\n    fill(255, 255, 0); \/\/color of eyes\n    ellipse(eyeLX, height \/ 3, eyeSize, eyeSize); \/\/height of left eye\n    ellipse(eyeRX, height \/ 3, eyeSize, eyeSize); \/\/height of right eye\n    \n    var pupilLX = width \/ 2 - faceWidth * 0.2; \/\/width of left pupil\n    var pupilRX = width \/ 2 + faceWidth * 0.2  \/\/width of right pupil\n    fill(0, 0, 0); \/\/color of pupils\n    ellipse(pupilLX, height \/ 3, pupilSize, pupilSize);  \/\/height of left pupil\n    ellipse(pupilRX, height \/ 3, pupilSize, pupilSize);  \/\/height of right pupil\n    \n    fill (mouthColorR, mouthColorG, 156); \/\/color of mouth\n    ellipse(width \/ 2, height \/ 2 + faceHeight \/ 4, mouth, mouthOpen); \/\/position of mouth relative to head\n    \n    fill(255, 100, 97); \/\/color of nose\n    ellipse(width \/ 2, height \/ 2, nose, nose \/ 2) \/\/position of nose\n\n}\n\nfunction mousePressed() {\n    faceWidth = random(300, 650);\n    faceHeight = random (300, 600);\n    eyeSize = random(10, 30);\n    mouth = random(100, 200);\n    nose = random(20, 70);\n    mouthOpen = random (0, 100);\n    faceColorR = random (0, 255);\n    faceColorB = random (0,255);\n    mouthColorR = random (0, 255);\n    mouthColorG = random (0, 255);\n}\n<\/code><\/pre><\/div>\n\n\n\n<p>This project was interesting. I had a lot of fun getting the colors to change. I am struggling with how to get objects to be relative to each other in space and change relative to each other when the mouse is pressed, so there are fewer attributes\/physical features than I would like. If I were to do this again, I would probably spend more time on more facial features than the changes the face has. <\/p><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>emily-variableface \/\/Emily Brunner, Section C var eyeSize = 60; \/\/size of eye var faceWidth = 300; \/\/face width var faceHeight = 300; \/\/face height var faceColorR = 255; \/\/face color red space var faceColorB = 155; \/\/face color blue space var pupilSize = 5; \/\/pupil width and height var mouth = 190; \/\/mouth width var &hellip; <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/09\/09\/project-02-variable-faces\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Project &#8211; 02 Variable Faces&#8221;<\/span><\/a><\/p>\n","protected":false},"author":706,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[97,57],"tags":[],"_links":{"self":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/70784"}],"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\/706"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/comments?post=70784"}],"version-history":[{"count":6,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/70784\/revisions"}],"predecessor-version":[{"id":70795,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/70784\/revisions\/70795"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/media?parent=70784"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/categories?post=70784"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/tags?post=70784"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}