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

sketch<\/a>Download<\/a><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">\/\/Yanina Shavialenka\n\/\/Section B\n\nvar numPressed = 1; \/\/Counts number pressed\nvar r = 174;\nvar g = 198;\nvar b = 207;\nvar cycle = false; \/\/records whether a cycle has occured\n\n\/\/Picture variables\nvar earth;\nvar hand;\nvar airplane;\nvar car;\nvar beach;\nvar factory;\nvar smoke;\nvar deforestation;\n\n\/\/Array of pictures and objects\nvar thermometer = [];\nvar loadTherm = [];\nvar planes = [];\nvar hands = [];\nvar loadHand = [];\nvar loadSmokes = [];\nvar texts = [];\n\n\/\/Function that preloads images\nfunction preload() {\n hand = loadImage(\"https:\/\/i.imgur.com\/yj0wtAM.png\");\n earth = loadImage(\"https:\/\/i.imgur.com\/kHdVss0.png\");\n airplane = loadImage(\"https:\/\/i.imgur.com\/5UTfPON.png\");\n car = loadImage(\"https:\/\/i.imgur.com\/FFnoxXk.png\");\n beach = loadImage(\"https:\/\/i.imgur.com\/vpAjq6W.jpg\");\n factory = loadImage(\"https:\/\/i.imgur.com\/UAwSjh7.png\");\n arrow = loadImage(\"https:\/\/i.imgur.com\/QALHzw2.png\");\n smoke = loadImage(\"https:\/\/i.imgur.com\/RH9Ikd8.png\");\n deforestation = loadImage(\"https:\/\/i.imgur.com\/ybzFc92.jpg\");\n\n var thermFiles = [];\n thermFiles[0] = \"https:\/\/i.imgur.com\/Gbbbv1a.png\";\n thermFiles[1] = \"https:\/\/i.imgur.com\/SFaNzVE.png\";\n thermFiles[2] = \"https:\/\/i.imgur.com\/FqY5tgi.png\";\n thermFiles[3] = \"https:\/\/i.imgur.com\/BR7AC3a.png\";\n thermFiles[4] = \"https:\/\/i.imgur.com\/tsBaLsK.png\";\n thermFiles[5] = \"https:\/\/i.imgur.com\/QQs5VxM.png\";\n\n for(var i = 0 ; i < thermFiles.length ; i++) {\n thermometer[i] = loadImage(thermFiles[i]);\n }\n\n var handFiles = [];\n handFiles[0] = \"https:\/\/i.imgur.com\/V3shALS.png\";\n handFiles[1] = \"https:\/\/i.imgur.com\/qWRT7Nb.png\";\n handFiles[2] = \"https:\/\/i.imgur.com\/obwct4k.png\";\n handFiles[3] = \"https:\/\/i.imgur.com\/GwpjItB.png\";\n handFiles[4] = \"https:\/\/i.imgur.com\/ip5YRk2.png\";\n handFiles[5] = \"https:\/\/i.imgur.com\/sYgwV8p.png\";\n\n for(var i = 0 ; i < handFiles.length ; i++) {\n hands[i] = loadImage(handFiles[i]);\n }\n}\n\n\/\/Functions that make objects to specific images\nfunction makeThermometer(num) {\n var c = { x: 85, y: 150, imageNum: num,\n drawFunction: drawThermometer\n }\n return c;\n}\n\nfunction makeHand(num) {\n var c = { x: 265, y: 350, imageNum: num,\n drawFunc: drawHand\n }\n return c;\n}\n\nfunction makeSmoke(x1,y1) {\n var c = { x: x1, y: y1,\n drawFun: drawSmoke,\n stepFun: stepSmoke\n }\n return c;\n}\n\n\/\/Functions that draw objects\nfunction drawThermometer() {\n image(thermometer[this.imageNum],this.x,this.y);\n}\n\nfunction drawHand() {\n image(hands[this.imageNum],this.x,this.y);\n}\n\nfunction drawSmoke() {\n image(smoke,this.x,this.y);\n}\n\n\/\/Function that moves smoke at specific intervals\nfunction stepSmoke() {\n if(numPressed == 2){\n this.x += 0.1;\n this.y += 1;\n }\n if(numPressed == 3){\n this.y += 1;\n }\n if(numPressed == 4){\n this.x -= 0.15;\n this.y += 1;\n }\n if(numPressed == 5){\n this.x -= 0.5;\n this.y += 1;\n }\n}\n\n\/\/Loads canvas and initial objects\nfunction setup() {\n createCanvas(600, 600);\n background(r,g,b);\n loadTherm.push(makeThermometer(0));\n loadHand.push(makeHand(0));\n initialSmokes();\n}\n\nfunction draw() {\n imageMode(CENTER);\n\n \/\/Resizes objects\n airplane.resize(140,125);\n car.resize(80,45);\n factory.resize(145, 65);\n deforestation.resize(80, 80);\n beach.resize(100, 80);\n smoke.resize(40,100);\n\n \/\/Square that helps with not stacking new objects over initial\n fill(174,198,207);\n square(0,0,600);\n noFill();\n\n \/\/Resizes all Thermometers\n for(var i = 0 ; i < thermometer.length ; i++) {\n thermometer[i].resize(300,300);\n }\n\n \/\/Draws functions\n for(var i = 0 ; i < loadTherm.length ; i++) {\n loadTherm[i].drawFunction();\n loadTherm.splice(0,loadTherm.length-1); \/\/Deletes previous thermometers to not overlap\n }\n\n \/\/Draws hand\n for(var i = 0 ; i < loadHand.length ; i++) {\n loadHand[i].drawFunc();\n }\n\n \/\/Remakes initial smoke objects if cycle is completed\n if(cycle) {\n initialSmokes();\n cycle = false;\n }\n \n image(earth,300,420);\n image(airplane, 140, 100);\n image(car, 210, 80);\n image(factory, 300, 55);\n push();\n rotate(radians(7));\n image(deforestation, 400, 20);\n image(beach, 500, 100);\n pop();\n fill(0);\n textSize(18);\n texts.push(text('4 Main Components:',430,450));\n noFill();\n\n \/\/Draws smokes objects\n for(var i = 0 ; i < loadSmokes.length ; i++) {\n loadSmokes[i].drawFun();\n }\n\n \/\/Moves smoke and text based on number pressed condition\n if(numPressed == 2) {\n fill(0);\n textSize(16);\n texts.push(text('•Transportation',430,470))\n noFill();\n while( loadSmokes[numPressed - 2].y < 340 ){\n loadSmokes[numPressed - 2].stepFun();\n loadSmokes[numPressed - 2].drawFun();\n }\n }\n if(numPressed == 3) {\n fill(0);\n textSize(16);\n texts.push(text('•Factories',430,480))\n noFill();\n while( loadSmokes[numPressed - 2].y < 320 ){\n loadSmokes[numPressed - 2].stepFun();\n loadSmokes[numPressed - 2].drawFun();\n }\n }\n if(numPressed == 4) {\n fill(0);\n textSize(16);\n texts.push(text('•Deforestation',430,490))\n noFill();\n while( loadSmokes[numPressed - 2].y < 330 ){\n loadSmokes[numPressed - 2].stepFun();\n loadSmokes[numPressed - 2].drawFun();\n }\n }\n if(numPressed == 5) {\n fill(0);\n textSize(16);\n texts.push(text('•Other livelihoods',430,500))\n noFill();\n while( loadSmokes[numPressed - 2].y < 370 ){\n loadSmokes[numPressed - 2].stepFun();\n loadSmokes[numPressed - 2].drawFun();\n }\n }\n}\nfunction keyTyped() {\n \/\/Resets smokes and changes cycle to true to show that a cycle has occured\n if(numPressed == 0){\n loadSmokes.splice(0,loadSmokes.length);\n cycle = true; \n }\n \/\/Changes thermometer and hand to next image\n if(key == 'g' || key == 'G') {\n print(numPressed);\n loadTherm.push(makeThermometer(numPressed));\n loadHand.push(makeHand(numPressed));\n loadTherm.splice(0,loadTherm.length-1); \/\/Deletes previous thermometers to not overlap\n numPressed++;\n }\n \/\/Resests after cycle\n if(numPressed == 6){\n numPressed = 0;\n }\n}\n\n\/\/Function to draw initial smokes\nfunction initialSmokes() {\n loadSmokes.push(makeSmoke(210,140));\n loadSmokes.push(makeSmoke(295,130));\n loadSmokes.push(makeSmoke(380,145));\n loadSmokes.push(makeSmoke(460,240));\n}<\/code><\/pre><\/p>\n\n\n\nThis final project’s theme is climate change and I decided to show in my work, an interactive image, how human actions affect the Earth and cause climate change. In the image, you can see a picture of a human palm inside of which there’s our planet Earth – this represents the idea that everything is in our hands and that everything we do affects our planet: we can either save it and give it protection or kill it. Either way, everything depends on us. On the first four fingers, from pointer to pinky, we can see the smoke of evaporation coming down from top to middle towards the Earth and each finger in this group of four represents four components that cause global climate change: transportation such as cars and planes, factories, deforestation, and other livelihoods of a person such as construction works, food, the garbage that isn’t getting recycled, increased use of electricity, etc. Starting from the pointer finger, an interactive image will start working when a user clicks on a key “g” or “G” which stands for “Go”, the first smoke will go down towards the Earth and the arrow on the thumb will make a small step towards the thermometer which increases in temperature. Moreover, with every click we can see the name of each component pop up on the screen to tell the user what it is. Then when the user clicks on the key again, the second smoke will slide down towards the Earth, the arrow makes another step, and the temperature gets higher. The same thing will happen to the third and fourth click. However, when the user clicks on the key fifth time, the arrow on the thumb will make the final step from the Earth towards to top of the finger which will make the temperature on the thermometer fill to the top which represents the maximum hotness. This project shows that those four human components affect the Earth in a negative way and when we combine them all together, it increases the speed with which the temperature gets higher. I was inspired to do this project because as a little girl I always liked winters due to a big amount of snow: I would go snow sliding to the hills with my family every year and it was so much fun! However, in the past few winters, there were only a few days when it snowed meaning our Earth is getting warmer day by day and we cannot do some of our favorite winter activities anymore. If I had more time to do this project then I would have added more pictures such as I would do more research to find more components that affect the Earth but so far I decided to stick with 4 big, main, and obvious factors.<\/p><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"sketchDownload \/\/Yanina Shavialenka \/\/Section B var numPressed = 1; \/\/Counts number pressed var r = 174; var g = 198; var b = 207; var cycle = false; \/\/records whether a cycle has occured \/\/Picture variables var earth; var hand; var airplane; var car; var beach; var factory; var smoke; var deforestation; \/\/Array of pictures … <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/12\/04\/final-project-15\/\" class=\"more-link\">Continue reading “Final Project”<\/span><\/a><\/p>\n","protected":false},"author":670,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[116,56],"tags":[],"_links":{"self":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/69438"}],"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\/670"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/comments?post=69438"}],"version-history":[{"count":2,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/69438\/revisions"}],"predecessor-version":[{"id":69442,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/69438\/revisions\/69442"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/media?parent=69438"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/categories?post=69438"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/tags?post=69438"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}