{"id":69418,"date":"2021-12-04T22:44:39","date_gmt":"2021-12-05T03:44:39","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/?p=69418"},"modified":"2021-12-04T22:44:39","modified_gmt":"2021-12-05T03:44:39","slug":"final-project-12","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/12\/04\/final-project-12\/","title":{"rendered":"Final Project"},"content":{"rendered":"\n

For my final project, I wanted to show that climate change is not just a singular concept, but rather a buildup of many different factors and situations, as well as how they are related to one another. First, trees are cut down to clear space for more buildings, people in these buildings require electricity which requires the burning of fossil fuels, and the release of carbon dioxide into the air exacerbates global warming and melts glaciers that increase ocean levels.<\/p>\n\n\n\n

The user goes through these 3 scenes and interacts with them, worsening the situation. At the end of each scene, they are presented with statistics of each action and they realize those consequences. Perhaps the polar bear is a metaphor for humans and at the end when the polar bear “drowns”, the user is asked “Are you sorry now?” telling them to rethink their actions before it is too late.<\/p>\n\n\n\n

If I had more time, I would have liked to make my graphics more detailed. I would have also liked to include sound but I was having too many problems with looping the sounds so I decided not to include them.<\/p>\n\n\n\n

sketch<\/a><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">\/\/Catherine Liu\n\/\/jianingl@andrew.cmu.edu\n\/\/Section D\n\/\/Final Project\n\n\/\/An interactive narrative consisting of 3 scenes\n\nvar scene = 1;\nvar frameNum = 0;\n\nvar trees = []; \/\/array to hold objects for trees\nvar treeCount = 0; \/\/keeping track of framecount specifically for trees\nvar buildings = []; \/\/array to hold objects for buildings\n\nvar lightSwitch = false; \/\/tracking if switch is on or off\nvar smokeTrail1 = []; \/\/array for holding smoke trail\nvar smokeTrail2 = []; \/\/array for holding smoke trail\n\nvar seaHeight; \/\/tracking height of sea\nvar gameFail = 0; \/\/tracking if polar bear has drowned\nvar finalFrame = false; \/\/tracking framecount to show final frame\nvar finalCount = 0; \/\/tracks count of final frame\n\n\/\/making sine wave for ocean (code refrenced from p5js.org)\nvar xspacing = 5; \/\/ Distance between each horizontal location\nvar w; \/\/ Width of entire wave\nvar theta = 0.0; \/\/ Start angle at 0\nvar amplitude = 25.0; \/\/ Height of wave\nvar period = 500.0; \/\/ How many pixels before the wave repeats\nvar dx; \/\/ Value for incrementing x\nvar yvalues; \/\/ Using an array to store height values for the wave\n\nfunction setup() {\n createCanvas(600,400);\n\n \/\/adds trees to array\n for (i = 0; i < 5; i++) {\n var rx = random(width);\n trees[i] = makeTree(rx);\n }\n\n \/\/ create an initial collection of buildings\n for (var i = 0; i < 10; i++){\n var rx = random(width);\n buildings[i] = makeBuilding(rx);\n }\n\n \/\/sets up smoke object\n for (i = 170; i > 50 ; i-=15) {\n smoke1 = { x: 400 + random(-10,10),\n y: i,\n size: random(30,50)\n }\n smokeTrail1.push(smoke1)\n\n smoke2 = {x: 500 + random(-10,10),\n y: i,\n size: random(30,50)\n }\n smokeTrail2.push(smoke2)\n }\n\n \/\/setting up sine wave \n w = width + 16;\n dx = (TWO_PI \/ period) * xspacing;\n yvalues = new Array(floor(w \/ xspacing));\n}\n\nfunction draw() {\n\n \/\/tracking framecount for scenes to show up\n frameNum += 1\n\n if (frameNum == 200){\n scene = 1.5\n }\n\n if (frameNum == 250){\n scene = 2;\n }\n\n if (frameNum == 450){\n scene = 2.5\n }\n\n if (frameNum == 500) {\n scene = 3;\n }\n\n if (finalFrame) {\n finalCount += 1;\n }\n\n \/\/Scene 1: Cutting down trees\n if (scene == 1) {\n background(230,230,250);\n noStroke();\n fill(0,100,0);\n rect(0,height-50,width,50)\n\n \/\/show trees until a certain point and switch to buildings\n if (treeCount <= 120) {\n textSize(20);\n textAlign(CENTER);\n text(\"Try cutting down trees with the saw\", width\/2, 30);\n updateAndDisplayTrees();\n removeTrees();\n addNewTree();\n treeCount += 1\n }\n if (treeCount > 120) {\n fill(50);\n rect(0,height-50,width,50)\n text(\"There's no more trees to cut...\", width\/2, 30);\n updateAndDisplayBuildings();\n removeBuildings();\n addNewBuildings(); \n }\n\n \/\/function for making saw\n drawSaw(); \n }\n\n if (scene == 1.5) {\n background(0);\n textSize(20);\n textAlign(CENTER);\n fill(255);\n text(\"More than 3.5 billion trees are cut down annually\",width\/2,height\/2);\n text(\"for human needs and urban development\", width\/2, height\/2+30)\n }\n\n \/\/Scene 2: Factory producing smoke\n if (scene == 2) {\n \/\/function for creating smoke\n factorySmoke();\n\n fill(255)\n text(\"Click the light switch...\", 120,90);\n text(\"watch the window\",120,120);\n }\n\n if (scene == 2.5) {\n background(0);\n textSize(20);\n textAlign(CENTER);\n fill(255);\n text(\"62% of our electricity comes from fossil fuels\",width\/2,height\/2);\n text(\"1.5 million metric tons of C02 are released annually\",width\/2,height\/2+30)\n }\n\n \/\/Scene 3: rising ocean levels and melting glaciers\n if (scene == 3) {\n noStroke();\n frameRate(10);\n background(70,130,180);\n textSize(20);\n textAlign(CENTER);\n fill(255);\n text(\"Keep the polar bear above the water, or else...\",width\/2,30)\n\n \/\/drawing mountains\n fill(100,146,198);\n triangle(0,height,150,50,300,height);\n triangle(450,height,550,100,650,height);\n fill(135,206,235);\n triangle(100,height,300,150,500,height);\n\n \/\/draw polar bear that follows mouse\n polarBear();\n\n \/\/drawing wave\n seaHeight = map(frameNum,500,700,height,-10);\n fill(193,223,255);\n calcWave();\n renderWave(seaHeight);\n \n \/\/ if polar bear drowns too many times or ocean rises canvas top, scene ends\n if (gameFail>=10 || seaHeight <= 0) {\n background(0);\n fill(255);\n text(\"The ocean is expected to rise 15-25cm by 2050\",width\/2,height\/2);\n finalFrame = true;\n }\n }\n\n if (finalCount>20) {\n background(0);\n text(\"Are you sorry now?\", width\/2, height\/2);\n }\n}\n\nfunction treeDisplay() {\n \/\/draw each tree\n \/\/checking for saw intersection with tree\n treeUpdate();\n\n frameRate(10);\n \n \/\/tree spawns initially but if saw intersects with tree, only draw trunk\n if (this.intersect == false) {\n noStroke();\n fill(194, 178, 128);\n push();\n translate(this.x,height-40);\n rect(0,-this.vert,this.hor,this.vert);\n fill(0,this.color,100);\n ellipse(this.hor,-this.vert,this.crown1,this.crown2);\n pop();\n } else if (this.intersect == true) {\n fill(101,67,33);\n push();\n translate(this.x,height-40);\n rect(0,-this.vert\/2,this.hor,this.vert\/2);\n pop();\n }\n}\n\nfunction treeMove() {\n this.x += this.speed;\n}\n\nfunction makeTree(treeX) {\n var tree= {x:treeX,\n hor: random(10,20),\n vert: random(150,250),\n speed: -3,\n color: random(255),\n crown1: random(80,100),\n crown2: random(50,80),\n intersect: false,\n move: treeMove,\n display: treeDisplay,\n update: treeUpdate,\n }\n return tree\n}\n\nfunction updateAndDisplayTrees() {\n for (var i = 0; i < trees.length; i++){\n trees[i].update();\n trees[i].display();\n trees[i].move();\n }\n}\n\nfunction removeTrees() {\n \/\/if tree goes off canvas, remove it\n var treesToKeep = [];\n for (var i = 0; i < trees.length; i++){\n if (trees[i].x + trees[i].crown2 > 0) {\n treesToKeep.push(trees[i]);\n }\n }\n trees = treesToKeep; \n}\n\nfunction addNewTree() {\n \/\/add new trees after trees move off canvas\n var newTreeLikelihood = 0.06; \n if (random(0,1) < newTreeLikelihood) {\n trees.push(makeTree(width));\n }\n}\n\nfunction drawSaw() {\n fill(100);\n rect(mouseX, mouseY,80,20);\n for (i = mouseX+5; i < mouseX + 85; i += 10) {\n circle(i, mouseY+20, 10);\n }\n fill(\"red\")\n rect(mouseX-30,mouseY,40,20,20);\n\n}\n\nfunction updateAndDisplayBuildings(){\n \/\/ Update the building's positions, and display them.\n for (var i = 0; i < buildings.length; i++){\n buildings[i].move();\n buildings[i].display();\n }\n}\n\nfunction removeBuildings(){\n \/\/remove buildings as they go off screen\n var buildingsToKeep = [];\n for (var i = 0; i < buildings.length; i++){\n if (buildings[i].x + buildings[i].breadth > 0) {\n buildingsToKeep.push(buildings[i]);\n }\n }\n buildings = buildingsToKeep; \/\/ remember the surviving buildings\n}\n\nfunction addNewBuildings() {\n \/\/ With a very tiny probability, add a new building to the end.\n var newBuildingLikelihood = 0.007; \n if (random(0,1) < newBuildingLikelihood) {\n buildings.push(makeBuilding(width));\n }\n}\n\nfunction buildingMove() {\n this.x += this.speed;\n}\n\nfunction buildingDisplay() {\n \/\/ draw the building and some windows\n var floorHeight = 40;\n var bHeight = this.nFloors * floorHeight; \n fill(this.wallCol); \n noStroke() \n push();\n translate(this.x, height - 40);\n rect(0, -bHeight, this.breadth, bHeight);\n fill(this.windowCol); \n for (var i = 0; i < this.nFloors; i++) {\n rect(5, -15 - (i * floorHeight), this.breadth - 10, 10);\n }\n pop();\n}\n\nfunction makeBuilding(birthLocationX) {\n var bldg = {x: birthLocationX,\n breadth: 50,\n speed: -3,\n nFloors: round(random(2,8)),\n windowCol: random(200,255),\n wallCol: random(100,150),\n move: buildingMove,\n display: buildingDisplay}\n return bldg;\n}\n\nfunction factorySmoke() {\n\n \/\/tracking height of smoke so it moves down every frame\n var smokeLevel = map(frameNum,250,450,0,150); \n\n if (lightSwitch == false) { \/\/if light is off\n frameRate(20);\n noStroke();\n background(176,196,222);\n\n fill(100);\n \/\/moving smoke up the canvas by adding random dx and dy\n for (i = 0; i < smokeTrail1.length; i++) {\n var randomDx = (random(5));\n var randomDy = (random(-5,0));\n smokeTrail1[i].x += randomDx;\n smokeTrail1[i].y += randomDy;\n \/\/reset x and y position if smoke leaves canvas\n if (smokeTrail1[i].y <= 10) {\n smokeTrail1[i].x = 400 + random(-10,10);\n smokeTrail1[i].y = 150;\n }\n circle(smokeTrail1[i].x, smokeTrail1[i].y, 50)\n }\n\n for (i = 0; i < smokeTrail2.length; i++) {\n var randomDx = (random(5));\n var randomDy = (random(-5,0));\n smokeTrail2[i].x += randomDx;\n smokeTrail2[i].y += randomDy;\n \/\/reset x and y position if smoke leaves canvas\n if (smokeTrail2[i].y <= 10) {\n smokeTrail2[i].x = 500 + random(-10,10);\n smokeTrail2[i].y = 200;\n }\n circle(smokeTrail2[i].x, smokeTrail2[i].y, 50)\n }\n\n \/\/smoke funnels\n fill(10);\n rect(370,160,50,150);\n rect(470,210,50,120);\n\n \/\/drawing smoke accumulating at top of window\n calcWave();\n fill(100);\n beginShape();\n vertex(width,0);\n vertex(0,0);\n for (let x = 0; x <= yvalues.length; x++) {\n vertex(x * xspacing, smokeLevel+ yvalues[x])\n }\n endShape(CLOSE);\n\n \/\/walls\n fill(178,157,105);\n rect(0,0,width,30);\n rect(0,0,width-370,height);\n rect(0,width,-10,height);\n rect(0,height,width,-(height-310));\n\n \/\/light switch\n fill(255);\n rect(70,140,70,100);\n fill(210);\n rect(75,190,60,45);\n\n }else if (lightSwitch == true) { \/\/if light is turned on\n frameRate(20);\n noStroke();\n background(176,196,222);\n\n fill(50);\n \/\/moving smoke up the canvas by adding random dx and dy\n for (i = 0; i < smokeTrail1.length; i++) {\n var randomDx = (random(5));\n var randomDy = (random(-5,0));\n smokeTrail1[i].x += randomDx;\n smokeTrail1[i].y += randomDy;\n \/\/reset x and y position if smoke leaves canvas\n if (smokeTrail1[i].y <= 10) {\n smokeTrail1[i].x = 400 + random(-10,10);\n smokeTrail1[i].y = 150;\n }\n circle(smokeTrail1[i].x, smokeTrail1[i].y, 100)\n }\n\n for (i = 0; i < smokeTrail2.length; i++) {\n var randomDx = (random(5));\n var randomDy = (random(-5,0));\n smokeTrail2[i].x += randomDx;\n smokeTrail2[i].y += randomDy;\n \/\/reset x and y position if smoke leaves canvas\n if (smokeTrail2[i].y <= 10) {\n smokeTrail2[i].x = 500 + random(-10,10);\n smokeTrail2[i].y = 200;\n }\n circle(smokeTrail2[i].x, smokeTrail2[i].y, 100)\n }\n\n \/\/smoke funnels\n fill(10);\n rect(370,160,50,150);\n rect(470,210,50,120);\n\n \/\/drawing smoke accumulating at top of window\n calcWave();\n fill(50);\n beginShape();\n vertex(width,0);\n vertex(0,0);\n for (let x = 0; x <= yvalues.length; x++) {\n vertex(x * xspacing, smokeLevel+ yvalues[x])\n }\n endShape(CLOSE);\n\n \/\/walls\n fill(247,224,169);\n rect(0,0,width,30);\n rect(0,0,width-370,height);\n rect(0,width,-10,height);\n rect(0,height,width,-(height-310));\n\n \/\/lightswitch\n fill(255);\n rect(70,140,70,100);\n fill(210);\n rect(75,145,60,45);\n }\n}\n\nfunction treeUpdate() {\n \/\/if saw intersects with tree, change the state of variable to true\n if (mouseX+40 > this.x & mouseX+40< this.x + this.hor) {\n this.intersect = true;\n }\n}\n\nfunction mousePressed() {\n \/\/turn light switch on and off if mouse is pressed on lightswitch\n if (mouseX>70 & mouseX<140 && mouseY>190 && mouseY<240) {\n lightSwitch = true;\n skySmoke = 1;\n } else if (mouseX>70 & mouseX<140 && mouseY>140 && mouseY<190) {\n lightSwitch = false;\n skySmoke = 0;\n }\n}\n\nfunction polarBear() {\n \/\/draws polar bear\n fill(255);\n ellipse(mouseX,mouseY,100,70);\n circle(mouseX-50,mouseY-30,50);\n circle(mouseX-70,mouseY-50,20);\n circle(mouseX-35,mouseY-50,20);\n rect(mouseX-40,mouseY+20,10,20,10);\n rect(mouseX+30,mouseY+20,10,20,10);\n fill(70,130,180);\n circle(mouseX-60,mouseY-30,5);\n circle(mouseX-40,mouseY-32,5);\n ellipse(mouseX-50,mouseY-25,10,5)\n\n \/\/if polar bear moves below ocean surface, increase count of fails\n if (mouseY-70 >= seaHeight) {\n gameFail +=1;\n }\n}\n\nfunction calcWave() {\n \/\/ Increment theta (try different values for\n \/\/ 'angular velocity' here)\n theta += 0.2;\n\n \/\/ For every x value, calculate a y value with sine function\n let x = theta;\n for (let i = 0; i < yvalues.length; i++) {\n yvalues[i] = sin(x) * amplitude;\n x += dx;\n }\n}\n\nfunction renderWave(yPos) {\n noStroke();\n beginShape();\n vertex(0,height);\n \/\/ A simple way to draw the wave with an ellipse at each location\n for (let x = 0; x <= yvalues.length; x++) {\n vertex(x * xspacing, yPos + yvalues[x])\n }\n vertex(width,height);\n endShape(CLOSE);\n}\n\n\n\n\n\n\n\n\n\n\n<\/code><\/pre><\/p><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>For my final project, I wanted to show that climate change is not just a singular concept, but rather a buildup of many different factors and situations, as well as how they are related to one another. First, trees are cut down to clear space for more buildings, people in these buildings require electricity which … <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/12\/04\/final-project-12\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> “Final Project”<\/span><\/a><\/p>\n","protected":false},"author":654,"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\/69418"}],"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\/654"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/comments?post=69418"}],"version-history":[{"count":1,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/69418\/revisions"}],"predecessor-version":[{"id":69421,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/69418\/revisions\/69421"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/media?parent=69418"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/categories?post=69418"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/tags?post=69418"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}