{"id":71286,"date":"2022-09-10T21:46:30","date_gmt":"2022-09-11T01:46:30","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/?p=71286"},"modified":"2022-09-10T21:46:30","modified_gmt":"2022-09-11T01:46:30","slug":"project-02-6","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/09\/10\/project-02-6\/","title":{"rendered":"Project 02"},"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>Left Side = :|, Right Side = :), Middle = : , Click the Shirt to Change Colors\/Scale, Click and Hold on Face = ??? <\/p> <div><a class=\"p5_sketch_link\" href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/09\/sketch-191.js\" data-width=\"400\" data-height=\"600\">sketch<\/a><iframe src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/plugins\/p5-embedder\/p5_iframe.html\" class=\"p5_exampleFrame\" width=\"400\" height=\"600\"><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">\/\/Brody Ploeger\n\/\/Section C\n\n\nvar faceWidth = 175;\nvar faceHeight = 200;\nvar backcolor1 = 2;\nvar backcolor2 = 10;\nvar backcolor3 = 20;\nvar backrectcolor1 = 215;\nvar backrectcolor2 = 210;\nvar backrectcolor3 = 240;\nvar backrectcolor2 = 200\nvar circlecolor1 = 110;\nvar circlecolor2 = 150;\nvar circlecolor3 = 190;\nvar shirtcolor1 = 250;\nvar shirtcolor2 = 200;\nvar shirtcolor3 = 215;\n\n\n\nfunction setup() {\n    createCanvas(640, 480);\n    background(0);\n}\n\nfunction draw() {\n    background(backcolor1, backcolor2, backcolor3)\n\n    strokeWeight()\n\n    \/\/background rect\n    fill(backrectcolor1, backrectcolor2, backrectcolor3, 75)\n    rect(640\/2,0,640\/2,480)\n\n    \n    \/\/shirt\n    fill(shirtcolor1,shirtcolor2,shirtcolor3);\n    circle(640\/2, 480\/2+faceHeight, faceHeight*1.5)\n   \n\n    \/\/right side of face\n    fill(circlecolor1, circlecolor2, circlecolor3)\n    ellipse(640\/2, 480\/2, faceWidth, faceHeight)\n    \n    \/\/left side of face\n    fill(200, 75)\n    beginShape();\n    vertex(640\/2-faceWidth\/2, 480\/2-faceHeight\/2);\n    vertex(640\/2,480\/2-faceHeight\/2);\n    vertex(640\/2,480\/2-faceHeight\/10);\n    vertex(640\/2-faceWidth\/10,480\/2+faceHeight\/6);\n    vertex(640\/2,480\/2+faceHeight\/2);\n    vertex(640\/2-faceWidth\/2,480\/2+faceHeight\/2);\n    endShape();\n\n    \/\/right eye\n    fill(backcolor1, backcolor2, backcolor3);\n    rect(640\/2+faceWidth\/8,480\/2-faceHeight\/10, faceWidth\/5, faceHeight\/5);\n\n    \/\/right pupil\n    fill(backrectcolor1, backrectcolor2, backrectcolor3)\n    ellipse(640\/2+faceWidth\/4.5,480\/2, faceWidth\/10, faceHeight\/10)\n\n    \/\/left eye\n    fill(backrectcolor1, backrectcolor2, backrectcolor3);\n    ellipse(640\/2-faceWidth\/4,480\/2, faceWidth\/4, faceHeight\/4);\n\n    \/\/left pupil\n    stroke(backcolor1, backcolor2, backcolor3) ;  \n    strokeWeight(faceWidth\/40+faceHeight\/40);\n    line(640\/2-faceWidth\/3.25, 480\/2, 640\/2-faceWidth\/5, 480\/2);\n\nif (mouseX&lt;640\/4){\n\n    \/\/straight mouth\n    stroke(backcolor1, backcolor2, backcolor3);   \n    strokeWeight(faceWidth\/50+faceHeight\/50);\n    line(640\/2-faceWidth\/5, 480\/2+faceHeight\/3.5, 640\/2+faceWidth\/5, 480\/2+faceHeight\/3.5);  \n\n    \/\/left straight eyebrow 1\n    stroke(backcolor1, backcolor2, backcolor3);   \n    strokeWeight(faceWidth\/50+faceHeight\/50);\n    line(640\/2-faceWidth\/2.8, 480\/2-faceHeight\/5, 640\/2-faceWidth\/7, 480\/2-faceHeight\/5);\n\n    \/\/right straight eyebrow 2\n    stroke(backcolor1, backcolor2, backcolor3);  \n    strokeWeight(faceWidth\/50+faceHeight\/50);\n    line(640\/2+faceWidth\/2.8, 480\/2-faceHeight\/5, 640\/2+faceWidth\/7, 480\/2-faceHeight\/5);\n} else if(mouseX&gt;640*3\/4){\n    \n    \/\/mouth smile\n    fill(backrectcolor1, backrectcolor2, backrectcolor3);\n    strokeWeight(faceWidth\/50+faceHeight\/50);\n    arc(640\/2, 480\/2+faceHeight\/4, faceWidth\/2, faceHeight\/4,0,PI,PIE);\n    \n \/\/ left tilt eyebrow 1\n    stroke(backcolor1, backcolor2, backcolor3);   \n    strokeWeight(faceWidth\/50+faceHeight\/50);\n    line(640\/2-faceWidth\/2.8, 480\/2-faceHeight\/5, 640\/2-faceWidth\/7, 480\/2-faceHeight\/4);\n\n    \/\/right tilt eyebrow 2\n    stroke(backcolor1, backcolor2, backcolor3);  \n    strokeWeight(faceWidth\/50+faceHeight\/50);\n    line(640\/2+faceWidth\/2.8, 480\/2-faceHeight\/5, 640\/2+faceWidth\/7, 480\/2-faceHeight\/4);\n}\n\n    if(mouseIsPressed){\n    if (dist(mouseX, mouseY, 640\/2,480\/2)&lt;faceHeight\/3+faceWidth\/5){\n   \n    faceWidth = random(100, 250);\n    faceHeight = random(150,400); \n    backcolor = random(0,75);\n    backcolor2 = random(0,75);\n    backcolor3 = random(0,75);\n    backrectcolor1 = random(210,255);\n    backrectcolor2 = random(210,255);\n    backrectcolor3 = random(210,255);\n    circlecolor = random(100,200);\n    circlecolor2 = random(100,200);\n    circlecolor3 = random(100,200);\n    shirtcolor1 = random (200,255);\n    shirtcolor2 = random (200,255);\n    shirtcolor3 = random (200,255);\n    \n\n\n    strokeWeight(faceWidth\/50+faceHeight\/50)\n    noFill();\n    beginShape();\n    vertex(640\/2-faceWidth\/5, 480\/2+faceHeight\/4);\n    vertex(640\/2-faceWidth\/5.5, 480\/2+faceHeight\/3.5)\n    vertex(640\/2-faceWidth\/10, 480\/2+faceHeight\/4)\n    vertex(640\/2-faceWidth\/15, 480\/2+faceHeight\/3.5)\n    vertex(640\/2+faceWidth\/15, 480\/2+faceHeight\/4)\n    vertex(640\/2+faceWidth\/10, 480\/2+faceHeight\/3.5)\n    vertex(640\/2+faceWidth\/5.5, 480\/2+faceHeight\/4)\n    vertex(640\/2+faceWidth\/5, 480\/2+faceHeight\/3.5);\n    endShape();\n\n    \/\/ other left tilt eyebrow 1\n    stroke(backcolor1, backcolor2, backcolor3);   \n    strokeWeight(faceWidth\/50+faceHeight\/50);\n    line(640\/2-faceWidth\/2.8, 480\/2-faceHeight\/4, 640\/2-faceWidth\/7, 480\/2-faceHeight\/5);\n\n    \/\/other right tilt eyebrow 2\n    stroke(backcolor1, backcolor2, backcolor3);  \n    strokeWeight(faceWidth\/50+faceHeight\/50);\n    line(640\/2+faceWidth\/2.8, 480\/2-faceHeight\/4, 640\/2+faceWidth\/7, 480\/2-faceHeight\/5);\n\n    faceWidth += 10;\n    faceHeight += 10;\n\n}\n}\n\nprint(faceHeight)\n\n\n}\n\n\nfunction mousePressed() {\n\n\/\/if circle clicked, shape of head changes\nif (dist(mouseX, mouseY, 640\/2, 480\/2+faceHeight)&lt;faceHeight\/2+faceWidth\/2){\n    faceWidth = random(100, 250);\n    faceHeight = random(150,400); \n    backcolor = random(0,75);\n    backcolor2 = random(0,75);\n    backcolor3 = random(0,75);\n    backrectcolor1 = random(210,255);\n    backrectcolor2 = random(210,255);\n    backrectcolor3 = random(210,255);\n    circlecolor = random(100,200);\n    circlecolor2 = random(100,200);\n    circlecolor3 = random(100,200);\n    shirtcolor1 = random (200,255);\n    shirtcolor2 = random (200,255);\n    shirtcolor3 = random (200,255);\n\n \n}\n \n}\n\n<\/code><\/pre><\/div><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>Left Side = :|, Right Side = :), Middle = : , Click the Shirt to Change Colors\/Scale, Click and Hold on Face = ??? sketch \/\/Brody Ploeger \/\/Section C var faceWidth = 175; var faceHeight = 200; var backcolor1 = 2; var backcolor2 = 10; var backcolor3 = 20; var backrectcolor1 = 215; var &hellip; <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/09\/10\/project-02-6\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Project 02&#8221;<\/span><\/a><\/p>\n","protected":false},"author":752,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[97,57,1],"tags":[],"_links":{"self":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/71286"}],"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\/752"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/comments?post=71286"}],"version-history":[{"count":4,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/71286\/revisions"}],"predecessor-version":[{"id":71290,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/71286\/revisions\/71290"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/media?parent=71286"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/categories?post=71286"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/tags?post=71286"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}