{"id":69425,"date":"2021-12-04T23:26:30","date_gmt":"2021-12-05T04:26:30","guid":{"rendered":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/?p=69425"},"modified":"2021-12-04T23:26:30","modified_gmt":"2021-12-05T04:26:30","slug":"final-project-air-pollution-simulator","status":"publish","type":"post","link":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/12\/04\/final-project-air-pollution-simulator\/","title":{"rendered":"Final Project: Air Pollution Simulator"},"content":{"rendered":"<!DOCTYPE html PUBLIC \"-\/\/W3C\/\/DTD HTML 4.0 Transitional\/\/EN\" \"http:\/\/www.w3.org\/TR\/REC-html40\/loose.dtd\">\n<html><body><div class=\"wp-block-file\"><a class=\"p5_sketch_link\" data-width=\"600\" data-height=\"400\" href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/12\/sketch-30.js\">sketch<\/a><iframe src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/plugins\/p5-embedder\/p5_iframe.html\" class=\"p5_exampleFrame\" width=\"600\" height=\"400\"><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">var plastic = [\"https:\/\/i.imgur.com\/n3n2yAx.png\", \n                \"https:\/\/i.imgur.com\/GO1fho6.png\",\n                \"https:\/\/i.imgur.com\/HTF7LVN.png\",\n                \"https:\/\/i.imgur.com\/lPCz5Kl.png\",\n                \"https:\/\/i.imgur.com\/uOAHfcT.png\",\n                \"https:\/\/i.imgur.com\/714d3E7.png\",\n                \"https:\/\/i.imgur.com\/mxW1JT4.png\",\n                \"https:\/\/i.imgur.com\/2diHO2t.png\",\n                \"https:\/\/i.imgur.com\/YfCSzcQ.png\",\n                \"https:\/\/i.imgur.com\/TZovsxa.png\",\n                \"https:\/\/i.imgur.com\/lK07FmR.png\"];\nvar waste1;\nvar waste2;\nvar waste3;\nvar waste4;\nvar waste5;\nvar waste6;\nvar waste7;\nvar waste8;\nvar waste9;\nvar waste10;\nvar waste11;\n\nvar humanfiles = [];\nvar human = [];\nvar vehiclefiles = [];\nvar vehicles = [];\nvar wheel;\nvar instruction;\n\nvar newBackground = [];\nvar newCharacter = [];\n\nvar c1,c2;\nvar mode = false;\nvar instructionMode = true;\n\nfunction preload() {\n    \/\/waste images\n    waste1 = loadImage(plastic[0]);\n    waste2 = loadImage(plastic[1]);\n    waste3 = loadImage(plastic[2]);\n    waste4 = loadImage(plastic[3]);\n    waste5 = loadImage(plastic[4]);\n    waste6 = loadImage(plastic[5]);\n    waste7 = loadImage(plastic[6]);\n    waste8 = loadImage(plastic[7]);\n    waste9 = loadImage(plastic[8]);\n    waste10 = loadImage(plastic[9]);\n    waste11 = loadImage(plastic[10]);\n\n    \/\/characters\n    humanfiles[0] = \"https:\/\/i.imgur.com\/gGl600Z.png\";\n    humanfiles[1] = \"https:\/\/i.imgur.com\/6yqtw3q.png\";\n\n    for (var i = 0; i &lt; humanfiles.length; i++) {\n        human[i] = loadImage(humanfiles[i]);\n    }\n\n    \/\/vehicle\n    vehiclefiles[0] = \"https:\/\/i.imgur.com\/gnO3lJm.png\";\n    vehiclefiles[1] = \"https:\/\/i.imgur.com\/S1GOMdC.png\";\n\n    for (var i = 0; i &lt; vehiclefiles.length; i++) {\n        vehicles[i] = loadImage(vehiclefiles[i]);\n    }\n    wheel= loadImage(\"https:\/\/i.imgur.com\/Wkpp7B1.png\");\n    instruction = loadImage(\"https:\/\/i.imgur.com\/QcOMxYC.png\");\n}\n\/\/Factory made of waste\nfunction generateBackground(bx, bdx) {\n    var b = {\n        x: bx, \n        y:height-75,\n        dx: bdx,\n        items: random([waste1, waste2, waste3, waste4, waste5, waste6, waste7, waste8, waste9, waste10, waste11]),\n        moveFunction: moveBackground,\n        drawFunction: drawBackground\n    }\n    return b;\n\n}\n\nfunction moveBackground() { \/\/generative landscape\n    if (keyIsDown(RIGHT_ARROW)) {\n        this.x -= this.dx; \n               \n    } else if (keyIsDown(LEFT_ARROW)) {\n        this.x += this.dx;\n    }\n    \n}\n\n\nfunction drawBackground() {\n    var smallSize = 20;\n    var bigSize = 30\n    push();\n    if (this.items == waste1) {\n        image(waste1, this.x, 325-waste1.height);\n    } else if (this.items == waste2) {\n        image(waste2, this.x, 325-waste2.height);\n    } else if (this.items == waste3) {\n        image(waste3, this.x, 325-waste3.height);\n    } else if (this.items == waste4) {\n        image(waste4, this.x, 325-waste4.height);\n    } else if (this.items == waste5) {\n        image(waste5, this.x, 325-waste5.height);\n    } else if (this.items == waste6) {\n        image(waste6, this.x, 325-waste6.height);\n    } else if (this.items == waste7) {\n        image(waste7, this.x, 325-waste7.height);\n    } else if (this.items == waste8) {\n        image(waste8, this.x, 325-waste8.height);\n    } else if (this.items == waste9) {\n        image(waste9, this.x, 325-waste9.height);\n    } else if (this.items == waste10) {\n        image(waste10, this.x, 325-waste10.height);\n    } else if (this.items == waste11) {\n        image(waste11, this.x, 325-waste11.height);\n    }\n\n    pop();\n    \n\n}\n\nfunction itemShow() {\n    for(var i = 0; i &lt; 100; i++) {\n        newBackground[i].moveFunction();\n        newBackground[i].drawFunction();\n    }\n}\n\n\/\/Character skating\nfunction makeSkateCharacter (cx, cdx) {\n    var c = {\n        x: cx,\n        dx: cdx,\n        y: height-150,\n        movingRight: true,\n        stepSkateFunction: stepSkateCharacter,\n        drawSkateFunction: drawSkateCharacter\n    }\n    return c;\n}\n\nfunction stepSkateCharacter () {\n    if (keyIsDown(RIGHT_ARROW)) {\n        this.movingRight = true;\n        if (this.x &lt; width\/2) {\n            this.x += this.dx;\n        } \n    }\n}\n\nfunction drawSkateCharacter () {\n    image(vehicles[0], this.x-25, height-80, 70, 25);\n    image(human[0], this.x, this.y);\n\n    \n}\n\n\/\/Character riding bike\nfunction makeBikeCharacter (mx, wmx, mdx) {\n    var m = {\n        x: mx,\n        wx: wmx,\n        dx: mdx,\n        y: height-150,\n        movingRight: true,\n        stepBikeFunction: stepBikeCharacter,\n        drawBikeFunction: drawBikeCharacter,\n    }\n    return m;\n\n}\n\n\nfunction stepBikeCharacter () {\n    if (keyIsDown(RIGHT_ARROW)) {\n        this.movingRight = true;\n        push(); \/\/bike wheel rotating\n        imageMode(CENTER);\n        translate(this.wx+18, this.y+73);\n        r+=0.5;\n        rotate(r);\n        image(wheel, 0, 0, 35, 35);\n        pop();\n        push();\n        imageMode(CENTER);\n        translate(this.wx+103, this.y+73);\n        r+=1;\n        rotate(r);\n        image(wheel, 0, 0, 35, 35);\n        pop();\n\n        if (this.x &lt; width\/2) {\n            this.x += this.dx;\n        } \n\n    }\n\n}\nvar r = 0;\n\nfunction drawBikeCharacter () {\n    if (this.movingRight == true) {\n        image(vehicles[1], this.x-40, height-120, 120, 60);\n        image(human[1], this.x, this.y);\n        \n        \n    } else {\n        push();\n        translate(600, 0);\n        scale(-1, 1);\n        image(vehicles[1], this.x-25, height-80, 200, 100);\n        image(human[1], this.x, this.y);\n        pop();\n\n    }\n\n}\n\n\n\n\nfunction setup() {\n    createCanvas(600, 400);\n    frameRate(15);\n    var n = 0;\n    for (var i = 0; i &lt; 100; i++) {\n        var x = generateBackground(n, 5);\n        newBackground.push(x);\n        if (newBackground[i].items == waste1) { \/\/placement of each waste factory\n            n += waste1.width-2;\n        } else if (newBackground[i].items == waste2) {\n            n += waste2.width-2;\n        } else if (newBackground[i].items == waste3) {\n            n += waste3.width-2;\n        } else if (newBackground[i].items == waste4) {\n            n += waste4.width-2;\n        } else if (newBackground[i].items == waste5) {\n            n += waste5.width-2;\n        } else if (newBackground[i].items == waste6) {\n            n += waste6.width-2;\n        } else if (newBackground[i].items == waste7) {\n            n += waste7.width-2;\n        } else if (newBackground[i].items == waste8) {\n            n += waste8.width-2;\n        } else if (newBackground[i].items == waste9) {\n            n += waste9.width-2;\n        } else if (newBackground[i].items == waste10) {\n            n += waste10.width-2;\n        } else if (newBackground[i].items == waste11) {\n            n += waste11.width-2;\n        }\n    }\n\n    var d = makeSkateCharacter(width\/2, 3);\n    var e = makeBikeCharacter(width\/2, width\/2-40, 5);\n\n    newCharacter.push(d);\n    newCharacter.push(e);\n   \n\n}\n\nfunction draw() {\n    var cAmount = 100;\n    \n    c1 = color(80);\n    \/\/gradient color change & fleeting effect on the factory in sustainable future\n    c1.setAlpha(10 + 10 * sin(millis() \/ 1000)); \n    c2 = color(230);\n    c4 = color(225,247,255);\n    c3 = color(0, 171, 245);\n    c3.setAlpha(10 + 10 * sin(millis() \/ 1000));\n\n    var year = 2050;\n    var title = \"WHICH FUTURE DO YOU CHOOSE TO LIVE IN?\";\n  \n        \n    \n    noStroke();\n    if (mode) {        \n         for(let y=0; y&lt;height; y++){ \/\/gradient background\n            n = map(y,0,height,0,1);\n            let newc = lerpColor(c3,c4,n);\n            stroke(newc);\n            line(0,y,width, y);\n        }\n        fill(255);\n        textSize(270);\n        text(year, width\/2, height-82);\n        textSize(25);\n        textAlign(CENTER);\n        text(title, width\/2, height-300);\n        itemShow();\n        fill(100);\n        noStroke();\n        rect(0, height-76, width, 76);\n        newCharacter[0].stepSkateFunction();\n        newCharacter[0].drawSkateFunction();\n    } else {\n        background(0);\n        for(let y=0; y&lt;height; y++){\n            n = map(y,0,height,0,1);\n            let newc = lerpColor(c1,c2,n);\n            stroke(newc);\n            line(0,y,width, y);\n        }\n        fill(255);\n        textSize(270);\n        text(year, width\/2, height-82);\n        textSize(25);\n        textAlign(CENTER);\n        text(title, width\/2, height-300);\n        itemShow();\n        fill(100);\n        noStroke();\n        rect(0, height-76, width, 76);\n        newCharacter[1].drawBikeFunction();\n        newCharacter[1].stepBikeFunction();\n\n    }\n\n    if (instructionMode) {\n        push();\n        imageMode(CENTER);\n        image(instruction, width\/2, height\/2);\n        pop();    }\n\n    if (keyIsDown(81)) { \/\/show instruction page\n        push();\n        imageMode(CENTER);\n        image(instruction, width\/2, height\/2);\n        pop();\n     } \n    \n    \n}\n\n\/\/toggle between bike and skate\nfunction keyPressed() {\n    if (key == ' ') {\n        if (mode == false) {\n            mode = true;\n        } else if (mode == true) {\n            mode = false;\n        }\n    } \n\n}\n\nfunction mousePressed() {\n    if (instructionMode == true){\n        instructionMode = false;\n    }\n\n}\n\n\n\n\n\n\n\n\n\n\n\n\n\n\n<\/code><\/pre><\/div>\n\n\n\n<p>When I heard that the topic for this project is climate change, I was instantly reminded of previous poster work on air pollution, in which I used everyday waste material to draw factories as a metaphor. <\/p>\n\n\n\n<figure class=\"wp-block-image size-large\"><img loading=\"lazy\" width=\"738\" height=\"1024\" src=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/12\/reference-image-738x1024.jpeg\" alt=\"\" class=\"wp-image-69426\" srcset=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/12\/reference-image-738x1024.jpeg 738w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/12\/reference-image-216x300.jpeg 216w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/12\/reference-image-768x1065.jpeg 768w, https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/12\/reference-image.jpeg 923w\" sizes=\"(max-width: 709px) 85vw, (max-width: 909px) 67vw, (max-width: 984px) 61vw, (max-width: 1362px) 45vw, 600px\"><\/figure><p><\/p>\n\n\n\n<p>This program is a future simulator that shows two alternative versions of 2050&rsquo;s air quality based how sustainable our lifestyle is. I wanted to continue this use of symbols, so I decided to create a character that interacts with this environment by creating a character that rides a vehicle that is also a metaphor for wasteful lifestyle and a sustainable one. The user of this program can toggle between a character that rides a skateboard made out of a reusable water bottle and a character that rides a motorcycle made of waste like aluminum can wheels. As the user presses down the right arrow key, they can see that the character is moving in the generative landscape. As they toggle the space bar, they can change the vehicle, and see how the air quality changes depending on how much single use products we use. In the sustainable future factories made out of trash starts to wither away, in contrast to how static they are in the polluted version. The main goal of this program is to alert people of the drastic difference our everyday behavior can make to our environment and future and provoke action.in goal of this program is to alert people of the drastic difference our everyday behavior can make to our environment and future and provoke action.<\/p><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>sketch var plastic = [&#8220;https:\/\/i.imgur.com\/n3n2yAx.png&#8221;, &#8220;https:\/\/i.imgur.com\/GO1fho6.png&#8221;, &#8220;https:\/\/i.imgur.com\/HTF7LVN.png&#8221;, &#8220;https:\/\/i.imgur.com\/lPCz5Kl.png&#8221;, &#8220;https:\/\/i.imgur.com\/uOAHfcT.png&#8221;, &#8220;https:\/\/i.imgur.com\/714d3E7.png&#8221;, &#8220;https:\/\/i.imgur.com\/mxW1JT4.png&#8221;, &#8220;https:\/\/i.imgur.com\/2diHO2t.png&#8221;, &#8220;https:\/\/i.imgur.com\/YfCSzcQ.png&#8221;, &#8220;https:\/\/i.imgur.com\/TZovsxa.png&#8221;, &#8220;https:\/\/i.imgur.com\/lK07FmR.png&#8221;]; var waste1; var waste2; var waste3; var waste4; var waste5; var waste6; var waste7; var waste8; var waste9; var waste10; var waste11; var humanfiles = []; var human = []; var vehiclefiles = []; var vehicles = []; var wheel; &hellip; <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/12\/04\/final-project-air-pollution-simulator\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> &#8220;Final Project: Air Pollution Simulator&#8221;<\/span><\/a><\/p>\n","protected":false},"author":682,"featured_media":0,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":[],"categories":[116,57],"tags":[],"_links":{"self":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/69425"}],"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\/682"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/comments?post=69425"}],"version-history":[{"count":1,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/69425\/revisions"}],"predecessor-version":[{"id":69428,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/69425\/revisions\/69428"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/media?parent=69425"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/categories?post=69425"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/tags?post=69425"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}