{"id":72308,"date":"2022-09-19T09:22:56","date_gmt":"2022-09-19T13:22:56","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/?p=72308"},"modified":"2022-09-19T09:38:49","modified_gmt":"2022-09-19T13:38:49","slug":"project-03-7","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/09\/19\/project-03-7\/","title":{"rendered":"Project 03"},"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>This project shows somebody ducking their head instinctively upon hearing the firing of a spitball. As the mouse is moved from left to right, the spitball fires, and the head goes from facing the viewer to facing and shifting downward. The facial features also move with the mouse&rsquo;s movement to achieve the illusion of perspective. The hair size increases and the eyes and mouth widen and disappear. The background changes color to provide a sense of impact and display a transition of the person&rsquo;s emotion from unaware to alarmed, dark to bright.<\/p>\n\n\n\n<div class=\"wp-block-file\"><a class=\"p5_sketch_link\" data-width=\"400\" data-height=\"400\" id=\"wp-block-file--media-80f583f8-636e-4ef8-88b4-59178dc7a026\" href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-content\/uploads\/2022\/09\/sketch-320.js\">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=\"400\"><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">\/\/ Jerry Xu (jwx)\n\/\/ Section A\n\/\/ Project 3: Spitball\n\nlet rSky = 153\nlet gSky = 153\nlet bSky = 0\n\nfunction setup() {\n  createCanvas(400, 400);\n}\n\nfunction draw() {\n  background(rSky, gSky, bSky);\n  fromSky = color(0, 0, 0);\n  toSky = color(252, 242, 197);\n  backgroundColor = lerpColor(fromSky, toSky, mouseX\/width);\n  background(backgroundColor);\n\n\n  \/\/meteor color constraints\n  rMeteor = constrain(123, 169, 220);\n  gMeteor = constrain(123, 169, 220);\n  bMeteor = constrain(123, 169, 220);\n  \n  \/\/trail color constraints\n  \n  rTrail = 255\n  gTrail = 255\n  bTrail = random(51, 204);\n\n  \n  var mConX = constrain(mouseX, 25, 500);\n  var mConY = constrain(mouseY, 100, 100);\n\n\/\/projectile\n  strokeWeight(0.1);\n  fill(rTrail,bTrail,gTrail);\n  fromTrail = color(255, 255, 51);\n  toTrail = color(255, 255, 204);\n  fillTrail = lerpColor(fromTrail, toTrail, mouseX\/width);\n  fill(fillTrail);\n  triangle(mConX-60,mConY-25, mConX-10,mConY-5, mConX-10, mConY-26);\n  triangle(mConX-130,mConY-10, mConX-10,mConY-5, mConX-10, mConY-26);\n  triangle(mConX-60,mConY+25, mConX+10,mConY+5, mConX+10, mConY+26);\n  triangle(mConX-130,mConY+10, mConX+10,mConY+5, mConX+10, mConY+26);\n  triangle(mConX-150,mConY, mConX-5,mConY+20, mConX-10, mConY-20);\n  stroke(255);\n  fill(rMeteor,bMeteor,gMeteor);\n  fromMeteor = color(253, 197, 94);\n  toMeteor = color(255, 240, 173);\n  fillMeteor = lerpColor(fromMeteor, toMeteor, mouseX\/width);\n  fill(fillMeteor);\n  ellipse(mConX,mConY,55,55);\n  ellipse(mConX,mConY,45,45);\n\n\/\/straw  \n  stroke(0);\n  strokeWeight(0.5);\n  fill(0, 112, 74);\n  circle(65, 99.5, 57.52);\n  noStroke();\n  rect(0, 71, 70, 57);\n  stroke(0);\n  strokeWeight(0.5);\n  line(0, 71, 72.5, 71);\n  line(0, 128, 72.5, 128);\n  \n\/\/constrain ducking height\nvar hConX = constrain(mouseX, 180, 300);\n\n\/\/head, neck, body\n  fill(fillMeteor);\n  quad(250, 300, 180, 330, 500, 330, 400, 300);\n  quad(160, 500, 180, 330, 500, 330, 400, 500);\n  stroke(255, 216, 194);\n  strokeWeight(80);\n  line(7\/8 * width, 3\/4 * height, 7\/8 * width, hConX);\n  fill(12);\n        fill(255, 216, 194);\n        stroke(0);\n        strokeWeight(0.2);\n        circle(7\/8 * width, hConX+51, 200);\n  \n\/\/hair size change to create perspective when head goes down\n  fill(0);\n  if (mouseX &gt; 200){\n    ellipse(7\/8*width, hConX+30, 180, 170);\n    translate(300,400); \n  } else \n      ellipse(7\/8*width, hConX, 180, 100);\n\n\/\/facial features\n  if (mouseX &gt; 150 & mouseX < 200){\n    fill(255);\n    ellipse(7\/8*width+40, hConX+100, 40, 20);\n    ellipse(7\/8*width-30, hConX+100, 40, 20);\n    fill(0);\n    circle(7\/8*width + 40, hConX+100, 20);\n    circle(7\/8*width - 30, hConX+100, 20);\n    fill(255,0,0);\n    ellipse(7\/8*width+5, hConX+130, 20, 30);\n  } else if (mouseX &lt; 150){\n    fill(255);\n    ellipse(7\/8*width+40, hConX+100, 30, 10);\n    ellipse(7\/8*width-30, hConX+100, 30, 10);\n    fill(0);\n    circle(7\/8*width + 40, hConX+100, 10);\n    circle(7\/8*width - 30, hConX+100, 10);\n    line(340, 300, 370, 300);\n  }\n}<\/code><\/pre><\/div><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>This project shows somebody ducking their head instinctively upon hearing the firing of a spitball. As the mouse is moved from left to right, the spitball fires, and the head goes from facing the viewer to facing and shifting downward. The facial features also move with the mouse&rsquo;s movement to achieve the illusion of perspective. &hellip; <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/2022\/09\/19\/project-03-7\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Project 03&#8221;<\/span><\/a><\/p>\n","protected":false},"author":773,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[100,55],"tags":[],"_links":{"self":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/72308"}],"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\/773"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/comments?post=72308"}],"version-history":[{"count":5,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/72308\/revisions"}],"predecessor-version":[{"id":72470,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/posts\/72308\/revisions\/72470"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/media?parent=72308"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/categories?post=72308"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2022\/wp-json\/wp\/v2\/tags?post=72308"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}