{"id":69244,"date":"2021-12-03T12:56:35","date_gmt":"2021-12-03T17:56:35","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/?p=69244"},"modified":"2021-12-03T12:56:35","modified_gmt":"2021-12-03T17:56:35","slug":"final-project-ocean-clean-up-simulator","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/12\/03\/final-project-ocean-clean-up-simulator\/","title":{"rendered":"Final Project: Ocean Clean-up Simulator"},"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 class=\"p5_sketch_link\" data-height=\"200\" data-width=\"500\" href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/12\/sketch-2.js\">sketch<\/a><iframe src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/plugins\/p5-embedder\/p5_iframe.html\" class=\"p5_exampleFrame\" width=\"500\" height=\"200\"><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">\/\/Anthony Pan\n\/\/Section C\n\/\/final project proposal final\n\n\/\/requirements:\n    \/\/loops, arrays, conditionals (if), user interaction, transformations, \n    \/\/functions (besides setup and draw), \n    \/\/and use of at least one object definition of your own design.\n\n\/\/net object \"line\" \"pushes\" trash objects to the right of the canvas \n    \/\/ if trash objects are to the right of the line, update all of the ones to the right \n    \/\/within certain number of pixels, x position of the trash objects will update and increase incrementally\n    \/\/lin search particle loop\n    \/\/if statement with mouseX\n        \/\/capture value of mouseX at that instance to avoid bugs\n\/\/create seperate function that changes background color\n\/\/ use series of if statements\n\n\/\/array and object for garbage 1\nvar garbage1Showing = [];\nvar garbage1; \n\n\/\/array and object for garbage 2\nvar garbage2; \nvar garbage2Showing = [];\n\n\n\/\/array and object for ocean details\nvar OceanDetail; \nvar oceanDetailShowing = [];\n\n\/\/frame counter\nvar counter = 0;\n\nvar fishes = [];\nvar fish;  \n\n\/\/angle for rotation og garbage2 object\nvar angle = 0;\n\nfunction setup() {\n    createCanvas(500, 200);\n\n    \/\/create objects for garbage 1\n    for(var i = 0; i &lt; 8; i ++) {\n        garbage1 = makeGarbage1(random(50,150), color(random(255)));\n        garbage1Showing.push(garbage1);\n\n    }\n\n    \/\/create objects for garbage 2\n    for(var i = 0; i &lt; 10; i++) {\n        garbage2 = makeGarbage2(random(60, 140));\n        garbage2Showing.push(garbage2);\n    }\n\n    \/\/create objects for ocean details\n    for(var i = 0; i &lt; 7; i++) {\n        OceanDetail = makeOceanDetail(random(0,height), color(255));\n        oceanDetailShowing.push(OceanDetail);\n    }\n\n    \n    for (var i = 0; i &lt; 10; i++) {\n        fish = makeFish();\n        fishes.push(fish);\n    }\n    \n\n    \n}\n\nfunction draw() {\n    \/\/change water color based on # of objects in water\n    waterChange();\n\n\n\n    \/\/ocean detail functions\n    OceanDetailDisplay();\n    removeOceanDetail();\n    addNewOceanDetail();\n\n    noStroke();\n    \n    \/\/garbage2 functions\n    garbage2DisplayandMove();\n    removeGarbage2();\n\n    \/\/garbage1 functions\n    garbage1DisplayandMove();\n    removeGarbage1();\n\n    \/\/add new garbage to ocean based on probability\n    addNewGarbage1();\n    addNewGarbage2();\n\n    \/\/display fish if water is blue to dark blue\n    if(garbage1Showing.length &gt; 0 & garbage1Showing.length <= 40) {\n        displayFish();\n    }\n    \n\n    \/\/draw net\n    fill(255);\n    noStroke();\n    rect(mouseX, 0, 2, 400);\n\n    \/\/check if garbage is ahead of net, if so use net to push them off screen \n    checkGarbage1Ahead();\n    checkGarbage2Ahead();\n    \n\n}\n\n\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\n\/\/fish code\n\n\/\/fish constructor\nfunction makeFish() {\n    var fish = {x: random(25, 600), y: random(25, 220),\n        speed: random(-0.2,0.2),\n        c: color(10,10,random(255)),\n        draw: drawFish,\n        move: moveFish\n    }\n    return fish;\n}\n\n\/\/draw fish shape\nfunction drawFish() {\n    fill(this.c);\n    push();\n    scale(0.8); \/\/transformation \n    ellipse(this.x, this.y, 20, 10);\n\n    \/\/direction of fish indicates which way tail is facing\n    if(this.speed &lt; 0) {\n        triangle(this.x+10, this.y, this.x+15, this.y-5, this.x+15, this.y+5);\n    } else {\n        triangle(this.x-10, this.y, this.x-15, this.y-5, this.x-15, this.y+5);\n    }\n    pop();\n\n}\n\n\/\/move fish \nfunction moveFish() {\n    this.x += this.speed;\n\n    \/\/hits random point within canvas, fish will turn other direction \n    if(this.x &gt; width - random(50) || this.x &lt; random(50)) {\n        this.speed = -this.speed; \n    }\n}\n\n\/\/one function to display and move fish on canvas \nfunction displayFish() {\n    for(var i = 0; i &lt; fishes.length; i++) {\n        fishes[i].move();\n        fishes[i].draw();\n    }\n}\n\n\n\n\n\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\n\/\/type garbage1 functions\n\n\/\/garbage1 constructor\nfunction makeGarbage1(gy, c) {\n    var garbage1 = {x: -10, y: gy,\n        speed: random(0.05,0.75),\n        Yspeed: random(0,0.2),\n        size: random(1,6),\n        fill: c,\n        move: garbage1Move,\n        draw: garbage1Draw }\n    return garbage1;\n}\n\n\/\/draw garbage1\nfunction garbage1Draw() {\n    fill(this.fill);\n    ellipse(this.x, this.y, this.size, this.size);\n\n\n}\n\n\/\/move garbage1\nfunction garbage1Move() {\n    this.x += this.speed;\n    this.y += this.Yspeed;\n    if(this.y &gt;= 150 || this.y &lt;= 50) {\n        this.Yspeed = -this.Yspeed;\n    }\n\n    \/\/to slow down at the middle and collect\n    if(this.x &gt;= width\/2) {\n        this.speed = 0.001;\n\n    }\n\n}\n\n\/\/1 function to move and draw garbage\nfunction garbage1DisplayandMove() {\n    for(var i = 0; i &lt; garbage1Showing.length; i++) {\n        garbage1Showing[i].move();\n        garbage1Showing[i].draw();\n    }\n\n}\n\n\/\/make new garbage based on probability \nfunction addNewGarbage1() {\n    var newGarbage1likelihood = 0.01;\n    if(random(0,1) &lt; newGarbage1likelihood) {\n         garbage1Showing.push(makeGarbage1(random(50,150), color(random(255))));\n    }\n}\n\n\/\/remove garbage off screen \nfunction removeGarbage1() {\n    var garbage1ToKeep = [];\n    for (var i = 0; i &lt; garbage1Showing.length; i++){\n        if (garbage1Showing[i].x &lt; width) {\n            garbage1ToKeep.push(garbage1Showing[i]);\n        }\n    }\n    garbage1Showing = garbage1ToKeep; \/\/ remember the showing garbage2\n}\n\n\n\n\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\n\/\/garbage2 functions\n\n\/\/garbage 2 constructor\nfunction makeGarbage2(gy) {\n    var garbage2 = {x: -10, y: gy,\n        speed: random(0.1,0.3),\n        Yspeed: random(0,0.2),\n        size: random(2,7),\n        r: random(255),\n        g: random(255),\n        b: random(255),\n        move: garbage2Move,\n        draw: garbage2Draw }\n    return garbage2;\n\n}\n\n\/\/draw garbage 2 \nfunction garbage2Draw() {\n    rectMode(CENTER);\n\n    \/\/garbage spins\n    push();\n    translate(this.x,this.y);\n    rotate(radians(angle));\n    angle += 0.1;\n\n    fill(this.r, this.g, this.b);\n    rect(0, 0, this.size, this.size);\n\n    pop();\n}\n\n\/\/move garbage 2\nfunction garbage2Move() {\n    this.x += this.speed;\n    this.y += this.Yspeed;\n    if(this.y &gt;= 140 || this.y &lt;= 60) {\n        this.Yspeed = -this.Yspeed;\n    }\n\n    \/\/to slow down at the middle and collect\n    if(this.x &gt;= width\/2) {\n        this.speed = 0.001;\n\n    }\n\n}\n\n\/\/1 function to draw and move garbage\nfunction garbage2DisplayandMove() {\n    for(var i = 0; i &lt; garbage2Showing.length; i++) {\n        garbage2Showing[i].move();\n        garbage2Showing[i].draw();\n    }\n\n}\n\n\/\/remove garbage 2 if off screen \nfunction removeGarbage2() {\n    var garbage2ToKeep = [];\n    for (var i = 0; i &lt; garbage2Showing.length; i++){\n        if (garbage2Showing[i].x &lt; width) {\n            garbage2ToKeep.push(garbage2Showing[i]);\n        }\n    }\n    garbage2Showing = garbage2ToKeep; \/\/ remember the showing garbage2\n}\n\n\/\/add new garbage periodically\nfunction addNewGarbage2() {\n    var newGarbage2likelihood = 0.01;\n    if(random(0,1) &lt; newGarbage2likelihood) {\n         garbage2Showing.push(makeGarbage2(random(50,150)));\n    }\n}\n\n\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\n\/\/make ocean details\n\n\/\/make ocean detail object\nfunction makeOceanDetail(oy, c) {\n    OceanDetail = {x: 0, y: oy,\n        speed: random(0.1,0.3),\n        fill: c,\n        move: oceanDetailMove,\n        draw: oceanDetailDraw }\n    return OceanDetail;\n}\n\n\/\/move ocean detail\nfunction oceanDetailMove() {\n    this.x += this.speed;\n}\n\n\/\/drawocean details\nfunction oceanDetailDraw() {\n    noFill();\n    strokeWeight(0.2);\n    stroke(this.fill);\n    curve(this.x, this.y, this.x + 10, this.y - 10, this.x + 10, this.y - 20, this.x, this.y - 30);\n\n}\n\n\/\/1 function to draw and move ocean details\nfunction OceanDetailDisplay() {\n    for(var i = 0; i &lt; oceanDetailShowing.length; i++) {\n        oceanDetailShowing[i].move();\n        oceanDetailShowing[i].draw();\n    }\n\n}\n\n\/\/remove ocean details if off screen\nfunction removeOceanDetail() {\n    var oceansToKeep = [];\n    for (var i = 0; i &lt; oceanDetailShowing.length; i++){\n        if (oceanDetailShowing[i].x &lt; width) {\n            oceansToKeep.push(oceanDetailShowing[i]);\n        }\n    }\n    oceanDetailShowing = oceansToKeep; \/\/ remember the showing ocean details\n}\n\n\/\/add new ocean details periodically\nfunction addNewOceanDetail() {\n    counter +=1;\n    if (counter % 100 == 0){\n        oceanDetailShowing.push(makeOceanDetail(random(40,height-40), color(255)));\n    }\n\n}\n\n\n\n\n\n\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\n\/\/change background color based on number of garbage objects on the screen \n\n\/\/make this change more gradual \nfunction waterChange() {\n    if(garbage1Showing.length &lt;= 20) {\n        background(20,100,255);\n    }\n\n    if(garbage1Showing.length &gt; 20 & garbage1Showing.length <= 40) {\n        background(51, 89, 163);\n    }\n\n    if(garbage1Showing.length &gt; 40 & garbage1Showing.length <= 60) {\n        background(59, 81,125);\n    }\n\n    if(garbage1Showing.length &gt; 60 & garbage1Showing.length <= 100) {\n        background(59, 117,125);\n    }\n\n    if(garbage1Showing.length &gt; 100 & garbage1Showing.length <= 120) {\n        background(59, 125, 90);\n    }\n\n    if(garbage1Showing.length &gt; 120 & garbage1Showing.length <= 140) {\n        background(56, 74, 43);\n    }\n\n    if(garbage1Showing.length &gt; 140 & garbage1Showing.length <= 160) {\n        background(43, 54, 36);\n    }\n\n    if(garbage1Showing.length &gt;= 160) {\n        background(69, 57, 42);\n    }\n\n}\n\n\n\n\n\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\n\/\/functions that check if particles are ahead of net\n\nfunction checkGarbage1Ahead() {\n    for(var i = 0; i &lt; garbage1Showing.length; i++) {\n        if(garbage1Showing[i].x &gt; mouseX & garbage1Showing[i].x < mouseX + 10) {\n            garbage1Showing[i].x = mouseX + 6;\n        }\n    }   \n\n}\n\nfunction checkGarbage2Ahead() {\n    for(var i = 0; i &lt; garbage2Showing.length; i++) {\n        if(garbage2Showing[i].x &gt; mouseX & garbage2Showing[i].x < mouseX + 10) {\n            garbage2Showing[i].x = mouseX + 6;\n        }\n    }   \n\n}\n\n\n\n\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\/\n\n\n\n\n\n\n<\/code><\/pre><\/div>\n\n\n\n<p>For my final project, I have created an ocean clean-up interaction program. Ocean plastics contribute to the rapid increase in the rate of climate change because it acts as a carbon sink. Thus, cleaning up ocean plastics is imperative to slow down the rate of climate change in addition to protecting ocean life.<\/p>\n\n\n\n<p>This program aims to create an abstraction of ocean clean-up and the adverse effects on the environment if pollution is left unattended for too long. The water starts off as a nice, blue color with fish swimming around. Waves are added as extra details to keep the canvas somewhat recognizable as the ocean. As the program continues, trash enters from the left side of the canvas. The trash is represented by randomized rectangles and circles of varying colors and sizes. These objects float towards the center of the canvas on randomized paths. They begin to collect in the middle of the screen, clumping together into a massive garbage patch. As the number of trash objects enters the scene, the water begins to dirty, from a clear blue to a muddy brown&mdash;if left out for too long. The fish die-off as the trash on the canvas reaches a certain number.<\/p>\n\n\n\n<p>However, the user is equipped with a net that can be used to clean the garbage. The net is represented by a long, white rectangle. The net works by identifying if a garbage object is within a certain threshold in front of the net. If the trash is within a certain distance in front of the net, it will be sucked in by the net. The user can then use mouseX to push the garbage off the screen to clean the ocean! As trash leaves the screen from the right side of the canvas, the water becomes blue once more. Remember that the net cannot move too fast. If the user is too hasty with their movements of the net, the trash may fall out of the net. Slowly moving the trash off the canvas is the most effective method of cleaning the ocean!<\/p>\n\n\n\n<p>What inspired me to create this program is a video on YouTube by The Ocean Cleanup. They were able to develop a method of cleaning plastics and other pollutants in oceans around the world. They are specifically focusing on cleaning up the Great Pacific Garbage Patch.<\/p>\n\n\n\n<p>If I had more time, I would like to add more detail to the ocean to make the entire program more visually appealing. I would also have liked to use particles and strings to create the net instead of a rectangle. However, I couldn&rsquo;t figure out how to create a net that you could drag all the particles at once.<\/p>\n\n\n\n<p>In order to run this program, all you have to do is open the index file into the browser of your choice!<\/p>\n\n\n\n<p><\/p><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>sketch \/\/Anthony Pan \/\/Section C \/\/final project proposal final \/\/requirements: \/\/loops, arrays, conditionals (if), user interaction, transformations, \/\/functions (besides setup and draw), \/\/and use of at least one object definition of your own design. \/\/net object &#8220;line&#8221; &#8220;pushes&#8221; trash objects to the right of the canvas \/\/ if trash objects are to the right of &hellip; <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/12\/03\/final-project-ocean-clean-up-simulator\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Final Project: Ocean Clean-up Simulator&#8221;<\/span><\/a><\/p>\n","protected":false},"author":635,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[116,57],"tags":[],"_links":{"self":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/69244"}],"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\/635"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/comments?post=69244"}],"version-history":[{"count":1,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/69244\/revisions"}],"predecessor-version":[{"id":69249,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/69244\/revisions\/69249"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/media?parent=69244"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/categories?post=69244"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/tags?post=69244"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}