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

sketch<\/a><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">\/\/ gnmarino\n\/\/ Gia Marino\n\/\/ section D\n\nvar cords = [];\nfunction setup() {\n createCanvas(223.2, 223.2);\n\n \/\/ need counter so there doesn't need to be another loop\n var counter = 0;\n\n \/\/ stores in an array all the cordinate points of the squares\n for(var x = 0; x < 93; x++){\n for(var y = 0; y < 93; y++){\n cords[counter]= new Object();\n cords[counter].x = (x * 2.4);\n cords[counter].y = (y * 2.4);\n counter += 1\n }\n }\n}\nvar squares = []; \/\/ array stores makeSquare\n\nfunction draw() {\n background(20);\n\n if(cords.length == 1){\n fill(255);\n textSize(10);\n text('Every square represents 24 metric tons',10, 15);\n text('of CO2 emissions produced from the US daily', 10, 30);\n for(var i = 0; i < 8649; i++){\n squares[i].moveSqr();\n }\n noLoop();\n }\n\n \/\/ makes a new array with every square object with a random xy cordinate\n squares.push(makeSquare(int(random(cords.length))));\n\n \/\/ displays a new square with the previous old squares\n \/\/ and displays new opactities\n for(var i = 0; i < squares.length; i++){ \n squares[i].display();\n squares[i].changeOpacity();\n }\n}\n\nfunction moveSquares(){\n\n \/\/ scales visualization down and moves it\n for(var i = 0; i < 8649; i++){\n push();\n scale(.5);\n translate(112, 150);\n squares[i].display();\n pop();\n if(this.x < width\/2 & this.x > 5){\n this.x --\n }\n if(this.x > width\/2 && this.x < width-5){\n this.x ++ \n }\n\n }\n noLoop();\n}\n\nfunction changeColor(){\n \/\/ once a square has been in frame for 15 seconds \n \/\/ it starts to lower opacity to 40\n this.age ++\n if(this.age > 15 & this.opacity > 40){\n this.opacity -= 1;\n }\n\n \/\/ at the end all the squares return to opacity 230\n if(cords.length == 2){\n this.opacity = 230;\n }\n}\n\nfunction displaySquare(){\n fill(this.red, this.green, this.blue, this.opacity);\n noStroke();\n rect(this.x, this.y, 2.4, 2.4);\n}\n\nfunction makeSquare(cordNum){\n var square = {x: cords[cordNum].x,\n y: cords[cordNum].y,\n red: random(255),\n blue: random(255),\n green: random(255),\n opacity: 255, \n age: 0,\n display: displaySquare,\n changeOpacity: changeColor,\n moveSqr: moveSquares}\n\n \/\/ once a square cord is extracted from the array\n \/\/ it is removed so it isn't reused\n cords.splice(cordNum, 1);\n return square;\n}\n<\/code><\/pre><\/p>\n\n\n\nFor my final project I made a data visualization of the daily carbon emissions in the US. I found a statistic that stated “Passenger cars produced 762.3 million metric tons of CO2 in 2019 [in the US]” (<a href=\"https:\/\/www.statista.com\/statistics\/1235091\/us-passenger-car-ghg-emissions-by-vehicle-type\/\">https:\/\/www.statista.com\/statistics\/1235091\/us-passenger-car-ghg-emissions-by-vehicle-type\/<\/a>). I was overall inspired by how much the US’s lack of public transportation contributes to CO2 emissions.<\/p>\n\n\n\nI did the math and found that the US produces 24 metric tons of CO2 per second (52,910 lbs). So I figured out how to fit this perfectly on a square canvas with squares and found that if I had a canvas with the size of 223.2 x 233.3 and each square was 2.4, then it would be the correct ratio.<\/p>\n\n\n\nI decided to not make my visualization actually run second by second because it would look kinda boring. So, I sped it up, however each square does proportional represent one second of c02 emissions.<\/p>\n\n\n\nI decided to make my squares fade each time so you could see all the new squares popping in more clearly, because the point of the visualization is to see how many squares there are to represent really how much CO2 is produced each day!<\/p>\n\n\n\nThen at the end I minimize so you can see it all together and then you see the statistic so you know what the pretty animation represented.<\/p><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"sketch \/\/ gnmarino \/\/ Gia Marino \/\/ section D var cords = []; function setup() { createCanvas(223.2, 223.2); \/\/ need counter so there doesn’t need to be another loop var counter = 0; \/\/ stores in an array all the cordinate points of the squares for(var x = 0; x < 93; x++){ for(var y … <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/12\/04\/final-project-16\/\" class=\"more-link\">Continue reading “Final Project”<\/span><\/a><\/p>\n","protected":false},"author":658,"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\/69437"}],"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\/658"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/comments?post=69437"}],"version-history":[{"count":1,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/69437\/revisions"}],"predecessor-version":[{"id":69444,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/69437\/revisions\/69444"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/media?parent=69437"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/categories?post=69437"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/tags?post=69437"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}