{"id":69361,"date":"2021-12-04T14:35:45","date_gmt":"2021-12-04T19:35:45","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/?p=69361"},"modified":"2021-12-04T14:37:05","modified_gmt":"2021-12-04T19:37:05","slug":"final-project-8","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/12\/04\/final-project-8\/","title":{"rendered":"Final Project"},"content":{"rendered":"\n

sketch<\/a><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">var lines = []; \/\/ array of lines\nvar PGHannualAvg = [50.0, 50.4, 51.7, 49.0, 51.9, 53.8, 53.6, 52.6, 54.2, 54.5, 53.2, 52.3, 54.2, 51.2, 52.9, 54.1, 51.7, 53.4, 54.1, 53.8, 52.1, 51.6, 54.5, 52.3, 53.3, 53.3, 54.6, 53.6, 54.7, 52.6, 53.2, 52.9, 51.2, 52.0, 52.8, 50.7, 53.2, 52.2, 51.9, 53.7, 50.9, 53.6, 51.7, 52.0, 51.9, 49.3, 52.7, 53.3, 51.4, 55.4, 52.6, 50.3, 52.4, 50.8, 52.8, 51.6, 51.7, 53.1, 54.7, 53.5, 53.6, 52.6, 52.1, 51.0, 51.0, 53.0, 52.8, 49.6, 52.3, 51.6, 50.7, 52.0, 51.6, 53.6, 51.4, 52.4, 54.2, 51.1, 52.3, 52.9, 53.0, 51.8, 51.7, 51.0, 51.5, 48.8, 51.8, 49.1, 50.0, 49.4, 48.2, 51.1, 50.4, 50.1, 50.3, 49.1, 49.7, 50.7, 50.8, 49.9, 52.5, 51.4, 51.1, 48.0, 49.3, 49.7, 49.4, 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, 51.8, 51.6, 51.8, 50.3, 50.0, 54.0, 52.0, 50.8, 52.2, 52.6, 50.3, 51.6, 51.6, 52.3, 52.0, 50.9, 51.0, 51.9, 52.8, 54.2, 51.5, 50.0, 52.5, 54.2, 53.6, 52.3, 52.4, 53.3]\nvar Year = [];\nvar numLines = PGHannualAvg.length; \/\/ number of lines total\nvar lineWidth = 800\/numLines; \/\/ width of lines\n\nfunction preload() { \/\/ loads font info\n helveticaBold = loadFont('HelveticaNeueBold.ttf');\n helveticaUltraLight = loadFont('HelveticaNeueUltraLight.ttf');\n helveticaUltraLightObl = loadFont('HelveticaNeueUltraLightItal.ttf');\n helveticaLight = loadFont('HelveticaNeueLight.ttf');\n for (var i = 0; i < numLines; i++) { \/\/ pushes consecutive year info to year array\n Year.push(1872 + i);\n }\n}\n\nfunction setup() {\n createCanvas(800, 400);\n background(220);\n useSound();\n}\n\nfunction soundSetup() { \/\/ oscillator setup\n osc = new p5.Oscillator();\n osc.amp(0.25);\n osc.setType(sin);\n osc.start();\n}\n\nfunction makeLines() { \/\/ line object constructor\n for (i = 0; i < numLines; i++) {\n lines[i] = { x: i*lineWidth, y: height,\n temp: PGHannualAvg[i], draw: drawLines, c: chooseColor }\n }\n}\n\nfunction drawLines(line) { \/\/ function to draw lines\n noStroke();\n fill(this.c());\n rect(this.x, 0, lineWidth, this.y);\n}\n\nfunction chooseColor() { \/\/ if statements choosing colors based on temp array value\n if (this.temp <= 49.0) {\n return (color(0, 116, 255));\n }\n if (this.temp > 49.0 & this.temp <= 49.5) {\n return (color(5, 4, 254));\n }\n if (this.temp > 49.5 & this.temp <= 50.0) {\n return (color(82, 82, 254));\n }\n if (this.temp > 50.0 & this.temp <= 50.5) {\n return (color(126, 125, 253));\n }\n if (this.temp > 50.5 & this.temp <= 51.0) {\n return (color(183, 183, 255));\n }\n if (this.temp > 51.0 & this.temp <= 51.5) {\n return (color(251, 245, 133));\n }\n if (this.temp > 51.5 & this.temp <= 52.0) {\n return (color(249, 221, 13));\n }\n if (this.temp > 52.0 & this.temp <= 52.5) {\n return (color(254, 202, 5));\n }\n if (this.temp > 52.5 & this.temp <= 53.0) {\n return (color(254, 88, 2));\n }\n if (this.temp > 53.0 & this.temp <= 53.5) {\n return (color(234, 2, 0));\n }\n if (this.temp > 53.5) {\n return (color(133, 0, 0));\n }\n}\n\nfunction playSound() { \/\/ chooses oscillator frequency based on mouse index line\n var mInd = int(mouseX \/ lineWidth);\n osc.freq(chooseSound(PGHannualAvg[mind]));\n}\n\nfunction chooseSound(temp) { \/\/ if statements based on temperature index\n if (temp <= 49.0) {\n return (70);\n }\n if (temp > 49.0 & temp <= 49.5) {\n return (80);\n }\n if (temp > 49.5 & temp <= 50.0) {\n return (120);\n }\n if (temp > 50.0 & temp <= 50.5) {\n return (160);\n }\n if (temp > 50.5 & temp <= 51.0) {\n return (200);\n }\n if (temp > 51.0 & temp <= 51.5) {\n return (240);\n }\n if (temp > 51.5 & temp <= 52.0) {\n return (280);\n }\n if (temp > 52.0 & temp <= 52.5) {\n return (320);\n }\n if (temp > 52.5 & temp <= 53.0) {\n return (360);\n }\n if (temp > 53.0 & temp <= 53.5) {\n return (400);\n }\n if (temp > 53.5) {\n return (440);\n } \n}\n\nfunction drawTitle() { \/\/ draws black bar and title text\n rect(0, 325, 800, 100);\n fill(255);\n textSize(18);\n textFont(helveticaBold);\n text(\"1872\", 10, 350);\n text(\"2020\", 748, 350);\n stroke(255);\n line(61, 343, 738, 343);\n line(732, 337, 738, 343);\n line(732, 349, 738, 343);\n noStroke();\n text(\"Annual Average Temperatures: Pittsburgh\", 235, 375);\n}\n\nfunction showMouseInfo() { \/\/ black hover rectangle with bar info\n var mInd = int(mouseX \/ lineWidth);\n noStroke();\n fill(255);\n if ((mouseY < 325) & (mouseX > 0) && (mouseX < width) && (mouseY > 0)) {\n noFill();\n stroke(255);\n strokeWeight(2);\n rect(mInd*lineWidth, 0, lineWidth, 325);\n if (mouseX < 725) {\n noStroke();\n fill(0);\n rect(mouseX + 20, mouseY, 65, 40);\n fill(255);\n textFont(helveticaBold);\n text(Year[mInd], mouseX+25, mouseY+18);\n textFont(helveticaLight);\n text(PGHannualAvg[mInd]+\"°F\", mouseX+25, mouseY+34);\n }\n else {\n noStroke();\n fill(0);\n rect(mouseX - 70, mouseY, 65, 40);\n fill(255);\n textFont(helveticaBold);\n text(Year[mInd], mouseX- 65, mouseY+18);\n textFont(helveticaLight);\n text(PGHannualAvg[mInd]+\"°F\", mouseX-65, mouseY+34); \n }\n }\n}\n\nfunction draw() { \/\/ main draw function\n background(0);\n noStroke();\n makeLines();\n for (i = 0; i < numLines; i++) {\n lines[i].draw();\n fill(0);\n }\n drawTitle();\n showMouseInfo();\n var mInd = int(mouseX \/ lineWidth);\n osc.freq(chooseSound(PGHannualAvg[mInd]));\n}<\/code><\/pre><\/p>\n\n\n\n<p>My program is a data visualization of Pittsburgh’s fluctuating average annual temperatures over time. I took data from the historical records of the Pittsburgh International Airport weather station from 1872 through 2020. Each of the colored bars represent a year and its average temperature. The colors represent the temperatures–the warmer the color, the hotter the temperature, and vice versa. The user can use their mouse cursor to hover over the bars and view information for that particular one–the year and temperature from that year. There is also an aspect of sound–the temperatures relate to a frequency level that plays when the user hovers over the bar. The higher the temperature, the higher the frequency that is played.<\/p>\n\n\n\n<p>Note: I used external fonts uploaded via local files and displayed using a local server, but I’m not sure how to upload those so that WordPress can run them. I tried Imgur but they don’t support TrueType font files.<\/p><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>My program is a data visualization of Pittsburgh’s fluctuating average annual temperatures over time. I took data from the historical records of the Pittsburgh International Airport weather station from 1872 through 2020. Each of the colored bars represent a year and its average temperature. The colors represent the temperatures–the warmer the color, the hotter the … <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/12\/04\/final-project-8\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> “Final Project”<\/span><\/a><\/p>\n","protected":false},"author":650,"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\/69361"}],"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\/650"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/comments?post=69361"}],"version-history":[{"count":3,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/69361\/revisions"}],"predecessor-version":[{"id":69366,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/69361\/revisions\/69366"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/media?parent=69361"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/categories?post=69361"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/tags?post=69361"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}