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

sketch<\/a><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">var x= 30;\nvar xPos = 0;\nvar y = 60\nvar r = [55, 98, 145, 195] \/\/radius of visualization 1\nvar angle =10\nvar cycle = 1; \/\/cycle through the different visualizations\nvar transparent =100 \/\/used for key\nvar value = 0\nvar yr = 1980\n\n\/\/precipitation data\nvar precip1 = [39.46, 37.5, 32.01, 41.41, 35.32, 38.51, 37.4, 39.2, \n 27.09, 42.51]\n\nvar precip2 = [52.24, 32.02, 36.65, 38.26, 41.34, 28.89, 45.47, 34.21,\n 36.21, 40.12]\n\nvar precip3 = [35.73, 32.33, 41.04, 57.41, 41.23, 34.90,40.70, 39.69, 32.84, \n 37.85]\n\nvar precip4 = [44.24, 41.74, 36.65, 36.84, 40.56, 35.01, 42.15, 57.83, 52.46, 39.33]\n\/\/used for text in vizualization 1\nprecipData = [39.46, 37.5, 32.01, 41.41, 35.32, 38.51, 37.4, 39.2, \n 27.09, 42.51, 52.24, 32.02, 36.65, 38.26, 41.34, 28.89, 45.47, 34.21,\n 36.21, 40.12,35.73, 32.33, 41.04, 57.41, 41.23, 34.90,40.70, 39.69, 32.84, \n 37.85, 44.24, 41.74, 36.65, 36.84, 40.56, 35.01, 42.15, 57.83, 52.46, 39.33]\n\nvar precipitation = []\nvar precipitation2 = []\nvar precipitation3 = []\nvar precipitation4 = []\n\n\/\/temperature data\nvar temp = [49.5, 49.1, 50.4, 50.5, 50.4, 50.6, 51.7, 52.3, 51.0, 50.2, 53.3, 54.2, 50.9, \n 51.8, 51.6, 51.8, 50.3, 50, 54, 52, 50.8, 52.2, 52.6, 50.3, 51.6, 51.6, 52.3,\n 52, 50.9, 51, 51.9, 52.8, 54.2, 51.5, 50, 52.5, 54.2, 53.6, 52.3, 52.4, 53.3 ]\n\n\/\/images\nvar skyline;\nvar backdrop;\nvar buildings;\n\nvar snow = []\n\nfunction preload() {\n skyline = loadImage(\"https:\/\/i.imgur.com\/U7UJvXu.png\")\n backdrop = loadImage(\"https:\/\/i.imgur.com\/vShIEDi.png\")\n buildings = loadImage(\"https:\/\/i.imgur.com\/dfPYkth.png\")\n}\n\nfunction setup() {\n createCanvas(480, 480);\n background(220);\n\n for (var i = 0; i < 10; i++) {\n precipitation[i] = new Object();\n precipitation[i].x = r[0] * sin(angle);\n precipitation[i].y = r[0] * cos(angle);\n }\n\n for (var i = 0; i < 10; i++) {\n precipitation2[i] = new Object();\n precipitation2[i].x = r[1] * sin(angle);\n precipitation2[i].y = r[1] * cos(angle);\n }\n\n for (var i = 0; i < 10; i++) {\n precipitation3[i] = new Object();\n precipitation3[i].x = r[2] * sin(angle);\n precipitation3[i].y = r[2] * cos(angle);\n }\n\n for (var i = 0; i < 10; i++) {\n precipitation4[i] = new Object();\n precipitation4[i].x = r[3] * sin(angle);\n precipitation4[i].y = r[3] * cos(angle);\n }\n\n for (var i = 0; i < 500; i++) {\n snow[i] = new Object();\n snow[i].x = random(30, width-30)\n snow[i].y = random(60, 300)\n snow[i].dy = 1;\n }\n\n}\n\nfunction draw() { \/\/cycles through the different climate patterns\n if (cycle == 1) {\n introduction()\n } else if (cycle == 2) {\n drawPrecipitation()\n } else if (cycle ==3) {\n drawTemp()\n } else if (cycle == 4) {\n drawSnowRecord()\n } else {\n cycle = 1\n }\n}\nfunction introduction() { \/\/first slide\n background(0)\n fill(255)\n textSize(15)\n text(\"Data Visualizations on Climate Patterns in Pittsburgh\", 10, height\/2)\n textSize(12)\n text(\"Click mouse to change data\", 10, height\/2+20)\n}\nfunction drawPrecipitation() {\n background(255, 229, 227)\n fill(0)\n textSize(15)\n text(\"Average Precipitation in Pittsburgh (1980-2020)\", 10, 25)\n frameRate(int(1.5))\n noStroke()\n\n\/\/bottom left key\n fill(214, 132, 84, 100)\n rect(10, 420, 30, 10)\n\n fill(214, 132, 84, 100-15)\n rect(10, 431, 30, 10)\n\n fill(214, 132, 84, 100-30)\n rect(10, 442, 30, 10)\n\n fill(214, 132, 84, 100-45)\n rect(10, 453, 30, 10)\n \n textSize(8)\n fill(0)\n text(\"1980-1990\", 45, 427)\n text(\"1990-2000\", 45, 427+11)\n text(\"2000-2010\", 45, 427+22)\n text(\"2010-2020\", 45, 427+33)\n\n translate(width\/2, height\/2+15)\n\n fill(214, 132, 84, 60)\n noStroke()\n circle(0, 0, 150)\n circle(0, 0, 240)\n circle(0, 0, 337)\n circle(0, 0, 440)\n fill(214, 132, 84, 50)\n circle(0, 0, 70)\n\n\n\/\/ring of ellipses\n for (var i=0; i<precip1.length; i++) {\n noStroke()\n fill(0, 255-precip1[i]*3, precip1[i]*4)\n rotate(radians(360\/10))\n circle(precipitation[i].x, precipitation[i].y, precip1[i]\/1.4)\n }\n\n for (var i=0; i<precip2.length; i++) {\n var x = r[1] * sin(angle);\n var y = r[1] * cos(angle);\n noStroke()\n fill(0, 255-precip2[i]*3, precip2[i]*4)\n rotate(radians(360\/10))\n circle(precipitation2[i].x, precipitation2[i].y, precip2[i]\/1.4) \/\/change to object\n }\n\n for (var i=0; i<precip3.length; i++) {\n var x = r[2] * sin(angle);\n var y = r[2] * cos(angle);\n noStroke()\n fill(0, 255-precip3[i]*3, precip3[i]*4)\n rotate(radians(360\/10))\n circle(precipitation3[i].x, precipitation3[i].y, precip3[i]\/1.4)\n }\n\n for (var i=0; i<precip4.length; i++) {\n var x = r[3] * sin(angle);\n var y = r[3] * cos(angle);\n noStroke()\n fill(0, 255-precip4[i]*3, precip4[i]*4)\n rotate(radians(360\/10))\n circle(precipitation4[i].x, precipitation4[i].y, precip4[i]\/1.4)\n }\n\n \n textSize(10)\n text(precipData[value], -10, 10)\n value+=1\n\n if (value>40) {\n value=0\n }\n textSize(15)\n text(yr, -15, 0)\n yr+=1\n\n if (yr >2020) {\n yr=1980\n }\n}\n\n\nfunction drawTemp() {\n background(235, 88, 52)\n textSize(15)\n fill(0)\n text(\"Average Temperature in Pittsburgh (1980-2020)\", 10, 25)\n frameRate(25)\n\n translate(width\/2,height\/2)\n \/\/background circles\n fill(255, 255, 255, 70)\n circle(0, 0, 400, 400)\n fill(235, 88, 52)\n circle(0, 0, 150, 150)\n \/\/rotating circle data\n for (var i =0; i<temp.length; i++) {\n rotate(radians(angle))\n \/\/ xPos=(300\/2 * cos(temp[i]))\n fill(temp[i]*3,0,0, 80)\n circle(xPos, 100, temp[i]\/2)\n angle+=.01\n }\n}\n\n\nfunction drawSnowRecord() {\n background(10,31,50)\n fill(255)\n text(\"Greatest Snowfall in One Day in Pittsburgh\", 10, 25)\n push()\n textSize(10)\n text(\"Hover over the snowballs\", 10, 40)\n pop()\n\n image(backdrop, 20, 92)\n circle(420, 290, 60)\n image(skyline, 30, 150)\n fill(250, 250, 250)\n circle(260, 300, 40)\n circle(150, 305, 30)\n image(buildings, 30, 272)\n circle(80, 300, 50)\n circle(330, 290, 80)\n pop()\n \/\/data appears when hovering over snowballs\n\n if ((dist(330, 290, mouseX, mouseY) < 80\/2)) {\n text(\"March 13, 1993: 23.6 inches of snow\", 130, 400)\n }\n\n if ((dist(420, 290, mouseX, mouseY) < 60\/2)) {\n text(\"December 17, 1890: 22 inches of snow\", 130, 400)\n }\n\n if ((dist(80, 300, mouseX, mouseY) < 50\/2)) {\n text(\"January 8, 1884: 16.5 inches of snow\", 130, 400)\n }\n\n if ((dist(260, 300, mouseX, mouseY) < 40\/2)) {\n text(\"March 3, 1942: 16.3 inches of snow\", 130, 400)\n }\n\n if ((dist(150, 305, mouseX, mouseY) < 30\/2)) {\n text(\"March 5, 1902: 15 inches of snow\", 130, 400)\n }\n \/\/snow\n for (var i=0; i<500; i++) {\n noStroke()\n fill(255)\n circle(snow[i].x, snow[i].y, 2)\n }\n\n\n}\n\n\nfunction mousePressed() { \/\/changes visualzation when mouse clicked\n cycle += 1;\n}\n\n\n \n \n\n\n\n\n\n\n \n\n<\/code><\/pre><\/p><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":647,"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\/69300"}],"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\/647"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/comments?post=69300"}],"version-history":[{"count":1,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/69300\/revisions"}],"predecessor-version":[{"id":69302,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/69300\/revisions\/69302"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/media?parent=69300"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/categories?post=69300"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/tags?post=69300"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}