{"id":69278,"date":"2021-12-03T19:19:54","date_gmt":"2021-12-04T00:19:54","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/?p=69278"},"modified":"2021-12-03T19:19:54","modified_gmt":"2021-12-04T00:19:54","slug":"final-project-3","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/12\/03\/final-project-3\/","title":{"rendered":"Final Project"},"content":{"rendered":"\n

In my final project, the user starts at the year 1900 where there’s only fish in the ocean happily floating around and the thermometer on the left is quite low. As the reader reads the message on the top of the screen, they click the mouse and the year changes to 1940 where there is now oil barrels floating in the ocean. This addition of similar pollutants (oil barrels, plastic water bottles, face masks, and plastic bags) continues one by one as the user continues clicking the mouse. In the final click, year 2100, the user ends up killing the earth.<\/p>\n\n\n\n

To do this project, I did some research onto the type of ocean pollutants that become more and more common as time passes. For example, in 2020, my animation spawns face masks in the ocean, which is a reflection of what truly happened in the real world due to COVID-19. The expectation from the user is quite straightforward as they just have to click their mouse and the animation progresses.<\/p>\n\n\n\n

I think if I had more time, I would have changed more elements like the number of fish in the ocean, the color of the ocean gets dirtier, and the fish would have had expressions that go from happy to sad. Although I was unable to add these features, I am quite satisfied with how my project turned out.<\/p>\n\n\n\n

Download<\/a><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">\/\/ Yash Mittal\n\/\/ Section D \n\/\/ Final Project \n\nvar waveValue = []; \/\/array for front wave\nvar waveValue2 = []; \/\/array for back wave\nvar noiseParam = 0.0001;\nvar noiseParam2 = 0.0001;\nvar noiseStep = 0.01;\nvar noiseStep2 = 0.01;\nvar x = []; \/\/x value of fish\nvar y = []; \/\/y value of fish\nvar dx = []; \/\/x direction of fish\nvar c = []; \/\/color for fish\nvar count = 0; \/\/variable to keep track of user mousePressed\nvar clouds = 'https:\/\/i.imgur.com\/RLqcPK7.png' \/\/cloud image\nvar cloudsX = 0; \/\/x value for 1st cloud\nvar cloudsX1 = -160; \/\/x value for 2nd cloud\nvar cloudsDx = 2; \/\/x direction speed for 1st cloud\nvar cloudsDx1 = 1; \/\/x direction speed for 2nd cloud\nvar oilBarrel = 'https:\/\/i.imgur.com\/nHrLCul.png' \/\/oil barrel image\nvar numBarrels = 5; \/\/number of barrels that spawn\nvar oilBarrelList = []; \/\/array for barrels\nvar waterBottles = 'https:\/\/i.imgur.com\/Xxl9tDk.png' \/\/water bottle image\nvar numBottles = 10; \/\/number of plastic water bottles that spawn\nvar waterBottlesList = []; \/\/array for bottles\nvar faceMasks = 'https:\/\/i.imgur.com\/wgsNqdq.png' \/\/face mask image\nvar numMasks = 10; \/\/number of face masks that spawn\nvar faceMasksList = []; \/\/array for face masks\nvar plasticBag = \"https:\/\/i.imgur.com\/L8v1yKk.png\" \/\/plastic bag image\nvar numBags = 10; \/\/number of plastic bags that spawn\nvar plasticBagList = []; \/\/number of plastic bags that spawn\nvar sun = 'https:\/\/i.imgur.com\/ftQzVK5.png'; \/\/sun image\nvar angle_sun = 0; \/\/rotation angle variable for sun\nvar thermometer = 'https:\/\/i.imgur.com\/zcV3Srl.png'; \/\/thermometer image\nvar deadEarth = 'https:\/\/i.imgur.com\/tAGCTqA.png'; \/\/dead earth image\n\nfunction preload() {\n\n pimg = loadImage (clouds);\n oilImage = loadImage (oilBarrel);\n bottleImage = loadImage (waterBottles);\n maskImage = loadImage (faceMasks);\n plasticImage = loadImage (plasticBag);\n sunImage = loadImage (sun);\n thermoImage = loadImage (thermometer);\n earthImage = loadImage (deadEarth);\n\n}\n\nfunction setup () {\n\n createCanvas (600, 400);\n frameRate (15); \n\n makeOil();\n\n makeBottle();\n\n makeMask();\n\n makeBag();\n\n for (var i = 0; i < 50; i ++) { \/\/loop for fish value\n\n x [i] = random (25, width - 25);\n dx [i] = random (-5, 5);\n c [i] = color (random (0, 130), random (0, 130), random (0,130));\n }\n}\n\nfunction draw () {\n\n background (220);\n\n sunRotate(); \/\/rotating circle\n\n cloudsP (); \/\/drawing clouds\n\n timelineBar ();\n\n drawWaves1 ();\n\n for (i = 0; i < 20; i = i + 1) { \/\/loop for fish value\n\n fill (c[i]);\n fish (x [i], waveValue [i] + 110, dx [i]); \/\/making y value same as waveValue [i]\n x [i] = x [i] + dx [i];\n if (x [i] >= width - 25 || x [i] < 25 ) {\n dx [i] = - dx [i];\n\n }\n }\n\n highlightRect ();\n\n if (count >= 1) {\n\n for (var i = 0; i < numBarrels; i++) {\n updateOil(i); \/\/moves oil barrels\n showOil (); \/\/displays oil barrels\n }\n\n fill (\"red\");\n rect (17, 194, 8, 6); \/\/increasing avg temp\n }\n\n if (count >=2) {\n\n for (var i = 0; i < numBottles; i++) {\n\n updateBottle (i);\n showBottle ();\n }\n\n rect (17, 185, 8, 13); \/\/increasing avg temp\n }\n\n if (count >=3) {\n\n for (var i = 0; i < numMasks; i++) {\n\n updateMask (i);\n showMask ();\n }\n\n rect (17, 168, 8, 17); \/\/increasing avg temp\n }\n\n if (count >=4) {\n\n for (var i = 0; i <numBags; i++) {\n\n updateBag (i);\n showBag ();\n }\n\n rect (17, 155, 8, 20); \/\/increasing avg temp\n }\n\n image(thermoImage, 10, 140, 30, 80);\n\n drawWaves2 ();\n\n if (count >=5) {\n\n fill (0);\n rect (0, 0, width, height);\n image (earthImage, width \/ 2 - 240, height \/ 2 - 150, 250, 250);\n textSize(15);\n fill (255);\n text (\"Congratulations, you killed the earth!\", 330, 200);\n } \n}\n\nfunction sunRotate () {\n\n push();\n rotate (radians(angle_sun));\n imageMode (CENTER);\n image (sunImage, 0, 0, 170, 170);\n pop();\n angle_sun = angle_sun + 2; \/\/iterating angle for sun\n}\n\nfunction makeBag () {\n\n for (var i = 0; i < numBags; i++) {\n\n tx = random (10, width - 10); \/\/random x value for bags\n ty = 0; \/\/unassigned y value\n plasticBagList.push ({x:tx, y:ty, show:bagDraw, move: bagMove}); \/\/create object & pushing in array\n }\n}\n\nfunction updateBag (i) { \/\/function that holds y value of bottle and move function\n\n plasticBagList [i].y = waveValue[i] + 120; \n plasticBagList [i].move ();\n}\n\nfunction showBag () { \/\/function to display mask\n\n for (var i = 0; i < 10; i++) {\n\n plasticBagList [i].show ();\n }\n}\n\nfunction bagDraw() {\n\n image (plasticImage, this.x, this.y, 35, 35); \/\/calling image\n\n}\n\nfunction bagMove () {\n\n this.x = this.x - random (0, 3);\n\n if (this.x < -25) { \/\/if bags exits canvas from left, it appears on right\n\n this.x = width + 20;\n }\n}\n\nfunction makeMask () {\n\n for (var i = 0; i < numMasks; i++) {\n\n tx = random (10, width - 10); \/\/random x value for masks\n ty = 0; \/\/unassigned y value\n faceMasksList.push ({x:tx, y:ty, show: maskDraw, move: maskMove}); \/\/creating object & pushing in array \n }\n}\n\nfunction updateMask (i) { \/\/function that holds y value of bottle and move function\n\n faceMasksList [i].y = waveValue[i] + 100;\n faceMasksList [i].move ();\n}\n\nfunction showMask () { \/\/function to display mask\n\n for (var i = 0; i < 10; i++) {\n\n faceMasksList [i].show ();\n }\n}\n\nfunction maskDraw () {\n\n image (maskImage, this.x, this.y, 30, 30); \/\/calling image\n}\n\nfunction maskMove () {\n\n this.x = this.x - random (0, 2);\n\n if (this.x < -25) { \/\/if masks exits canvas from left, it appears on right\n\n this.x = width + 20;\n }\n}\n\nfunction makeBottle () {\n\n for (var i = 0; i < numBottles; i++) {\n\n tx = random (25, width - 25); \/\/random x value for bottles\n ty = 0; \/\/unassigned y value\n waterBottlesList.push ({x:tx, y:ty, show: bottleDraw, move: bottleMove});\/\/creating object & pushing in array\n }\n}\n\nfunction updateBottle (i) { \/\/function that holds y value of bottle and move function\n\n waterBottlesList [i].y = waveValue[i] + 90;\n waterBottlesList [i].move ();\n}\n\nfunction showBottle () { \/\/function to display bottles\n\n for (var i = 0; i < 10; i++) {\n\n waterBottlesList [i].show ();\n }\n}\n\nfunction bottleDraw () {\n\n image (bottleImage, this.x, this.y, 30, 30); \/\/calling the image\n}\n\nfunction bottleMove () {\n\n this.x = this.x + random (0, 2);\n\n if (this.x > width) { \/\/if bottles exits canvas from right, it appears on left\n\n this. x = -20; \n } \n}\n\nfunction makeOil () {\n\n for (var i = 0; i < numBarrels; i++) {\n\n tx = random (25, width - 25); \/\/random x value for barrels\n ty = 0; \/\/unassigned y value\n oilBarrelList.push({x:tx, y:ty, show: oilDraw, move: oilMove}); \/\/creating object & pushing in array \n }\n}\n\nfunction updateOil (i) { \/\/function that holds y value of barrel and move function\n\n oilBarrelList [i].y = waveValue [i] + 100; \/\/assigning waveValue to y value \n oilBarrelList [i].move (); \/\/move function\n}\n\nfunction showOil () { \/\/function to display oil\n\n for (var i = 0; i < 5; i++) { \/\/for loop to display barrels\n oilBarrelList [i].show();\n }\n}\n\nfunction oilDraw (){\n\n image(oilImage, this.x, this.y, 35, 58); \/\/drawing oil\n}\n\nfunction oilMove () { \/\/function iterating x value of each barrel\n\n this.x = this.x - random (0, 2);\n\n if (this.x < -40) {\n\n this.x = 600\n } \n}\n\nfunction mousePressed () {\n\n count = count + 1; \/\/count increases each time mouse is pressed\n }\n\nfunction cloudsP () {\n\n image (pimg, cloudsX, 50, 160, 160);\n image (pimg, cloudsX1, 20, 150, 150);\n\n cloudsX = cloudsX + cloudsDx;\n cloudsX1 = cloudsX1 + cloudsDx1;\n\n if (cloudsX >= width) {\n\n cloudsX = -160;\n }\n\n if (cloudsX1 >= width) {\n\n cloudsX1 = -160;\n }\n}\n\nfunction fish (x, y, dx) { \/\/fish function\n\n fill (c);\n ellipse (x, y, 20, 10);\n\n if (dx < 0) { \/\/if fish is going left\n\n triangle (x + 10, y, x + 15, y + 5, x + 15, y - 5);\n\n } else if (dx >= 0) { \/\/if fish is going right\n\n triangle (x - 10, y, x - 15, y + 5, x - 15, y - 5);\n\n }\n}\n\nfunction highlightRect () {\n\n if (count == 0) { \n\n fill (\"green\");\n rect (85, 57, 20, 40); \/\/1900\n\n } \n\n if (count == 1) {\n\n fill(\"green\");\n rect (165, 57, 20, 40); \/\/1940\n\n } \n\n if (count == 2) {\n\n fill (\"green\");\n rect (245, 57, 20, 40); \/\/1980\n }\n\n if (count == 3) {\n\n fill (\"green\");\n rect (325, 57, 20, 40); \/\/2020\n }\n\n if (count == 4) {\n\n fill (\"green\");\n rect (405, 57, 20, 40); \/\/2060\n }\n\n if (count == 5) {\n\n fill (\"green\");\n rect (485, 57, 20, 40); \/\/2100\n }\n\n print(count);\n}\n\nfunction drawWaves1 () { \/\/ water wave 1 function\n\n for (var i = 0; i < width \/ 5 + 1; i++) {\n\n var n = (noise(noiseParam));\n\n var value = map (n, 0, 1, 80, height);\n\n waveValue.push(value); \n\n noiseParam = noiseParam + noiseStep;\n }\n\n beginShape (); \/\/ drawing randomised wave\n\n vertex (0, height); \/\/ point 1 \n\n for (var i = 0; i <= width \/ 5; i++) { \/\/ point 2 random\n\n fill (116, 205, 235, 200); \/\/water with alpha value\n noStroke();\n\n vertex (i * 5, waveValue [i] + 80); \/\/ randomised wave\n\n }\n\n waveValue.shift (); \/\/ making wave move by removing first element\n waveValue.push (map (noise (noiseParam), 0, 1, 80, height)); \/\/ adding random array value\n noiseParam = noiseParam + noiseStep;\n\n vertex (width, height); \/\/ point 3\n\n endShape (CLOSE);\n\n }\n\nfunction drawWaves2 () { \/\/ water wave 2 function\n\n for (var i = 0; i < width \/ 5 + 1; i++) {\n\n var n1 = (noise(noiseParam2));\n\n var value2 = map (n1, 0, 1, 40, height);\n\n waveValue2.push(value2); \n\n noiseParam2 = noiseParam2 + noiseStep2;\n }\n\n beginShape (); \/\/ drawing randomised wave\n\n vertex (0, height); \/\/ point 1 \n\n for (var i = 0; i <= width \/ 5; i++) { \/\/ point 2 random\n\n fill (116, 205, 235, 90); \/\/water with alpha value\n noStroke();\n\n vertex (i * 5, waveValue2 [i] + 40); \/\/ randomised wave 2\n\n }\n\n waveValue2.shift (); \/\/ making wave move by removing first element\n waveValue2.push (map (noise (noiseParam), 0, 1, 40, height)); \/\/ adding random array value\n noiseParam2 = noiseParam2 + noiseStep2;\n\n vertex (width, height); \/\/ point 3\n\n endShape (CLOSE);\n\n }\n\nfunction timelineBar () { \/\/timeline function\n\n stroke (0);\n strokeWeight(5);\n line (20, 40, 20, 70); \/\/left line\n line (20, 55, 580, 55); \/\/middle line\n line (580, 40, 580, 70); \/\/right line\n\n for (var a = 0; a < 6; a++) { \/\/ for loop for date rectangles \n\n noFill();\n strokeWeight(1);\n rect (a * 80 + 85, 57, 20, 40);\n }\n\n textSize (30);\n fill (0);\n text (\"Click mouse to time travel\", 120, 40);\n\n textSize (15);\n text (\"1900\", 78, 115);\n text (\"1940\", 158, 115);\n text (\"1980\", 238, 115);\n text (\"2020\", 318, 115);\n text (\"2060\", 398, 115);\n text (\"2100\", 478, 115);\n\n }\n<\/code><\/pre><\/p>\n\n\n\n<p><\/p><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>In my final project, the user starts at the year 1900 where there’s only fish in the ocean happily floating around and the thermometer on the left is quite low. As the reader reads the message on the top of the screen, they click the mouse and the year changes to 1940 where there is … <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/12\/03\/final-project-3\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> “Final Project”<\/span><\/a><\/p>\n","protected":false},"author":661,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[116,58],"tags":[],"_links":{"self":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/69278"}],"collection":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/users\/661"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/comments?post=69278"}],"version-history":[{"count":10,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/69278\/revisions"}],"predecessor-version":[{"id":69289,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/69278\/revisions\/69289"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/media?parent=69278"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/categories?post=69278"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/tags?post=69278"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}