{"id":70857,"date":"2022-09-10T13:03:28","date_gmt":"2022-09-10T17:03:28","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/?p=70857"},"modified":"2022-09-10T13:03:28","modified_gmt":"2022-09-10T17:03:28","slug":"project-02-variable-face-2","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/09\/10\/project-02-variable-face-2\/","title":{"rendered":"Project 02: Variable Face"},"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=\"480\" data-height=\"640\" id=\"wp-block-file--media-b104e018-d0bf-4afa-a832-a699df01d3a2\" href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/09\/Variable-Face.js\">Variable Face<\/a><iframe src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/plugins\/p5-embedder\/p5_iframe.html\" class=\"p5_exampleFrame\" width=\"480\" height=\"640\"><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">var faceWidth = 200\nvar faceHeight = 300\nvar faceColor = 255\nvar eyeSize = 40\nvar eyeL = 20\nvar eyeR = 20\nvar r = 0\nvar g = 0\nvar b = 0\nvar mouth = 1\n\nfunction setup() {\n    createCanvas(480,640);\n}\n\nfunction draw() {\n    background(180);\n\n    \/\/head\n    fill(r,g,b);\n    ellipse(width\/2,height\/2,faceWidth, faceHeight);  \n\n    \/\/eyeballs\n    fill(255);\n    ellipse(eyeL,height\/2,50,30);     \/\/left\n    ellipse(eyeR,height\/2,50,30);     \/\/right\n\n    \/\/pupil ellipse\n    fill(111, 78, 55);\n    ellipse(eyeL,height\/2,20,20);     \/\/left\n    ellipse(eyeR,height\/2,20,20);     \/\/right\n\n    \/\/nose\n    fill(255);\n    stroke(0,0,0);\n    strokeWeight(1);\n    if(eyeL&lt;=width\/2-faceWidth\/4 & eyeR<=width\/2+faceWidth\/4){\n        triangle(width\/2, height\/2, width\/2, height\/2+faceHeight\/5, width\/2-faceWidth\/4, height\/2+faceHeight\/8); \/\/left\n    }else if(eyeL&gt;=width\/2-faceWidth\/4 & eyeR>=width\/2+faceWidth\/4){\n        triangle(width\/2, height\/2, width\/2, height\/2+faceHeight\/5, width\/2+faceWidth\/4, height\/2+faceHeight\/8); \/\/right\n    }else{\n        triangle(width\/2, height\/2, width\/2+faceWidth\/8, height\/2+faceHeight\/5, width\/2-faceWidth\/8, height\/2+faceHeight\/5); \/\/mid\n    }\n\n    \/\/mouth\n    if(mouth == 1){\n        fill(0);\n        arc(width\/2,height\/2+faceHeight\/4,70,50,0,PI,CHORD);    \/\/happy\n        noFill();\n        strokeWeight(3);\n        arc(eyeL,height\/2-30,70,40,PI,2*PI);\n        arc(eyeR,height\/2-30,70,40,PI,2*PI);\n        strokeWeight(1);\n    }else if(mouth == 2){\n        fill(225,0,0);\n        arc(width\/2,height\/2+faceHeight\/3,70,50,PI,2*PI,CHORD); \/\/mad\n        stroke(255,0,0);\n        strokeWeight(5);\n        line(eyeL-25,height\/2-40,eyeL+25,height\/2-20);\n        line(eyeR+25,height\/2-40,eyeR-25,height\/2-20);\n        stroke(0);\n        strokeWeight(1);                                        \/\/resets stroke\n    }else if(mouth==3){\n        fill(0);\n        ellipse(width\/2,height\/2+faceHeight\/3,30,30);           \/\/scared\n        strokeWeight(3);\n        line(eyeL-25,height\/2-20,eyeL+25,height\/2-40);\n        line(eyeR+25,height\/2-20,eyeR-25,height\/2-40);\n        strokeWeight(1);\n    }\n}\n\nfunction mousePressed(){\n    faceWidth = random(180,300);\n    faceHeight = random(200,340);\n    faceColor = random(0,255);\n    eyeL = random(width\/2-faceWidth\/2+25,width\/2-25);\n    eyeR = random(width\/2+25,width\/2+faceWidth\/2-25);\n    r = random(0,255);\n    g = random(0,255);\n    b = random(0,255);\n    mouth = int(random(1,4));\n}\n\n\n\n\/\/don't mind the stuff down here \n\n    \/\/mouth\n    \/\/line(200,290,280,290);\n\n    \/\/pupil with points      \n    \/\/stroke(111, 78, 55);        \n    \/\/strokeWeight(20);\n    \/\/point(190,190);             \n    \/\/point(280,190);\n\n    \/\/sunglasses and frame\n\/\/    stroke(255,0,0);\n\/\/    strokeWeight(3);\n\/\/    line(320,220,350,190);      \n\/\/    fill(180,240,0);\n\/\/    rect(130,200,90,50);        \n\/\/    fill(50,158,200);\n\/\/    rect(230,200,90,50); \n\n\n\n    \/\/background ellipses\n    \/\/fill(255,230,0);\n    \/\/ellipse(250,200,500,600);\n    \/\/fill(196,80,71);\n    \/\/ellipse(250,200,400,500);\n    \/\/fill(147,248,234);\n    \/\/ellipse(250,200,330,430);\n    \/\/fill(135,73,146);\n    \/\/ellipse(250,200,270,370);\n    \/\/fill(0,0,0);\n    \/\/ellipse(250,200,230,330); \n<\/code><\/pre><\/div><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>Variable Face var faceWidth = 200 var faceHeight = 300 var faceColor = 255 var eyeSize = 40 var eyeL = 20 var eyeR = 20 var r = 0 var g = 0 var b = 0 var mouth = 1 function setup() { createCanvas(480,640); } function draw() { background(180); \/\/head fill(r,g,b); ellipse(width\/2,height\/2,faceWidth, faceHeight); &hellip; <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/09\/10\/project-02-variable-face-2\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Project 02: Variable Face&#8221;<\/span><\/a><\/p>\n","protected":false},"author":722,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[97,58],"tags":[],"_links":{"self":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/70857"}],"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\/722"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/comments?post=70857"}],"version-history":[{"count":3,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/70857\/revisions"}],"predecessor-version":[{"id":70926,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/70857\/revisions\/70926"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/media?parent=70857"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/categories?post=70857"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/tags?post=70857"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}