Hey! My idea for this project was to make a few digital climate action “posters”. I had a lot of fun with these and ended up making three that shuffle as you click the mouse: <\/p>\n\n\n\n

Make Polluters Pay:<\/p>\n\n\n\n

This poster generates smoke objects with random size and transparency from chimnies (that also represent bar graphs to show increasing global temperatures). The smoke obscures the message that shows who is responsible for polluting the earth, while leaving a greenwashed corporate message still visible.<\/p>\n\n\n\n

Capitalism is Killing the Planet:<\/p>\n\n\n\n

The second poster is supposed to show advanced capitalism’s ability to mask crises behind the veil of economic stability. As you move the mouse towards the top right-hand corner one of the triangles becomes more chaotic while the second one in front remains still. I included a Joseph Schumpeter line that captures this pretty well.<\/p>\n\n\n\n

California Wildfires:<\/p>\n\n\n\n

The last poster reads from a csv file of the 2020 CA wildfires. Each location is mapped to the canvas and then randomly generated circles flash around it to create the fires.<\/p>\n\n\n\n

I hope you enjoy!!<\/p><\/iframe><pre class=\"language-javascript\"><code class=\"p5_editor language-javascript\">var numPosters = 3;\nvar poster = 0;\nvar firstClick;\n\n\/\/smoke vars\nvar smoke = [];\n\nvar dx = 5;\nvar dy = 7;\n\nvar impact;\n\n\/\/fire vars\n \/\/data variables\nvar fires;\nvar numRows;\n\nvar bgx = []; \/\/background coordinates\nvar bgy = [];\n\n \/\/rectangle in center\nvar margin;\nvar rectX;\nvar rectY;\n\n \/\/canvas\nvar marginT;\nvar marginS;\n\n \/\/colors\nvar tanColor;\nvar textRed;\n\n\/\/capitalism vars\nvar triangleRand;\n\nvar barcode\nvar barcodeWidth = 100;\n\nvar bottomTextCA;\nvar mainTextCA;\nvar topTextCA;\n\nvar bottomBottomTextCap;\nvar topTextCap;\n\nvar smokeBG;\n\nfunction preload() {\n \/\/uncomment for local\n \/\/used fonts in original file, replaced with images for wordpress bcs of file issues\n \/*\n dosis = loadFont('fonts\/Dosis-ExtraBold.ttf');\n dosisL = loadFont('fonts\/Dosis-Light.ttf');\n gothic = loadFont('fonts\/LetterGothicStd.otf');\n akkordeon = loadFont('fonts\/Akkordeon.otf');\n impact = loadFont('fonts\/impact.ttf');\n \n\n fires = loadTable('data\/2021cafires2.csv', 'header');\n\n bottomTextCAImg = loadImage('img\/CAfiresBottomText.png');\n mainTextCAImg = loadImage('img\/CAfiresMainText.png');\n topTextCAImg = loadImage('img\/CAfiresTopText.png');\n\n bottomMainTextCapImg = loadImage('img\/CapBotttomMainText.png');\n topTextCapImg = loadImage('img\/capTopText.png');\n\n smokeBG = loadImage('img\/smokeBG.png');\n *\/\n \/\/uncomment for WP\n\n fires = loadTable('https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/12\/2021cafires2.csv', 'header');\n barcode = loadImage('https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/12\/barcode.png');\n bottomTextCAImg = loadImage('https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/12\/CAfiresBottomText.png');\n mainTextCAImg = loadImage('https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/12\/CAfiresMainText.png');\n topTextCAImg = loadImage('https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/12\/CAfiresTopText.png');\n\n bottomMainTextCapImg = loadImage('https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/12\/CapBotttomMainText.png');\n topTextCapImg = loadImage('https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/12\/capTopText.png');\n\n smokeBG = loadImage('https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-content\/uploads\/2021\/12\/smokeBG.png');\n\n}\n\nfunction setup() {\n firstClick = true;\n\n \/\/smoke\n createCanvas(400,600);\n background(220);\n\n \/\/fires\n noStroke();\n numRows = fires.getRowCount();\n background('black');\n \/\/frameRate(16);\n\n marginS = 15;\n marginT = 1.5*marginS;\n rectX = width-2*marginS;\n rectY = 500;\n\n tanColor = color(230, 226, 220);\n textRed = color(255,50,0);\n\n \/\/storeBackground();\n}\n\nfunction draw() {\n switch (poster) {\n case 0:\n push();\n smokePoster();\n pop();\n break;\n case 1:\n push();\n capitalismPoster();\n pop();\n break;\n case 2:\n push();\n cafiresPoster();\n pop();\n break;\n }\n\n if (firstClick) {\n push();\n fill(0, 0, 0, 200);\n rectMode(CENTER);\n rect(width\/2, height-10, width, 30);\n fill(textRed);\n textSize(22);\n textAlign(CENTER, CENTER)\n text('click to browse through the posters', width\/2, height-10);\n pop();\n } else {\n return;\n }\n}\n\nfunction mousePressed() {\n poster += 1;\n if (poster == numPosters) {\n poster = 0;\n }\n firstClick = false;\n print(firstClick.toString());\n}\n\n\/\/smoke functions untill line 112\nfunction drawBars() {\n fill('black');\n var w = 60;\n var h;\n for (var i = 0; i < 5; i++) {\n h = map(exp(i), 0, exp(4), 0, height*0.8);\n rect(22+75*i, height - h, w, h);\n }\n}\n\nfunction writeText() {\n var textRed = color(138, 76, 76);\n var textGreen = color(128, 194, 129);\n\n image(smokeBG, 0, 0);\n\n \/*\n push();\n \/\/translate(0, 0.3*height);\n textSize(64);\n fill(textRed);\n \/\/textFont(impact);\n text('CORPORATIONS', 10, 60);\n text('WARM OUR', 10, 120); fill(textGreen); text('WE ARE', 300, 120); fill(textRed);\n text('PLANET!', 10, 180); fill(textGreen); text('ARE PURSUING', 220, 180);fill(textRed);\n text('MAKE', 10, 240); fill(textGreen); text('ACTIVELY', 170, 240); fill(textRed);\n text('POLLUTERS', 10, 300); fill(textGreen); text('WORKING', 300, 300); fill(textRed);\n text('PAY!', 10, 360); fill(textGreen); text('TO REDUCE', 140, 360);\n text('OUR CARBON FOOTPRINT', 10, 420);\n text('FOOTPRINT BY EXPLORING', 10, 480);\n text('EXPLORING FREE', 10, 540);\n text('MARKET SOLUTIONS', 10, 600);\n\n \/\/textSize(30);\n \/\/text('CARBON DIVIDEND NOW', 10, 240)\n pop();\n *\/\n}\n\nfunction makeSmoke(birthX, birthY) {\n var smoke = {x: birthX,\n y: birthY,\n r: 5,\n t: random(0, 70),\n speedX: random(1,3),\n speedY: random(3,5),\n move: smokeMove,\n display: smokeDisplay}\n return smoke;\n}\n\nfunction smokeDisplay() {\n push();\n translate(this.x, this.y);\n noStroke();\n fill(100, 100, 100, this.t);\n ellipse(0, 0, this.r);\n pop();\n}\n\nfunction smokeMove() {\n this.x -= this.speedX;\n this.y -= this.speedY;\n this.r += random(this.speedX, this.speedY)-1;\n}\n\nfunction newSmoke(colX, colY) {\n var prob = 0.3;\n if (random(0,1) < prob) {\n smoke.push(makeSmoke(random(colX, colX+60), colY+10));\n }\n}\n\nfunction removeSmoke(){\n var smokeToKeep = [];\n for (var i = 0; i < smoke.length; i++){\n if (smoke[i].x > -100) {\n smokeToKeep.push(smoke[i]);\n }\n }\n smoke = smokeToKeep;\n}\n\nfunction updateAndDisplaySmoke(){\n for (var i = 0; i < smoke.length; i++){\n smoke[i].move();\n smoke[i].display();\n }\n}\n\nfunction smokePoster() {\n background(220);\n\n writeText();\n\n updateAndDisplaySmoke();\n removeSmoke();\n for (var i = 2; i < 5; i++) {\n h = map(exp(i), 0, exp(4), 0, height*0.8);\n newSmoke(25+75*i, height - h);\n }\n\n drawBars();\n}\n\n\/\/CA fires functions\nfunction drawCircles(lat, long, size) {\n for (var j = 0; j < 2; j++) {\n fill(255, random(0, 140), 0);\n ellipse(lat + random(-3, 3),\n long - random(0, 7),\n random(0, 12));\n }\n \/\/filter(BLUR,5);\n \/\/fill('red');\n \/\/ellipse(lat, long, size);\n}\n\nfunction topText() {\n image(topTextCAImg, 0, 0);\n\n \/*\n \/\/textFont('dosis');\n textSize(10);\n fill(255,50,0);\n\n textAlign(LEFT, CENTER); text('2020', marginS, marginT\/2);\n textAlign(CENTER, CENTER); text('CALIFORNIA WILDFIRES', width\/2, marginT\/2)\n textAlign(RIGHT, CENTER); text('WFIGS', width-marginS, marginT\/2);\n *\/\n}\n\nfunction mainText() {\n image(mainTextCAImg, marginS, marginT + rectY - mainTextCAImg.height);\n \/*\n textSize(60);\n \/\/textFont('akkordeon');\n textStyle(NORMAL);\n fill(tanColor);\n textAlign(LEFT, BOTTOM);\n\n push();\n\n translate(marginS, marginT+rectY);\n\n var offset = 0;\n\n text(\"WHOSE\", 10, -3*45);\n text(\"LAND\", 10, -2*45);\n text(\"ARE WE\", 10, -45);\n text(\"BURNING?\", 10, 0);\n\n pop();\n *\/\n}\n\n\/\/not used\nfunction movingText() {\n push();\n \/\/rotate(radians(90));\n\n textSize(30);\n textFont('impact');\n fill('red');\n text(\"thoughts and prayers\", xText1, 40);\n text(\"thoughts and prayers\", xText2, 40);\n xText1 -= 1;\n xText2 -= 1;\n\n if (xText1 < -265) {\n xText1 = width;\n } \/\/if (xText2 < -265) {\n\/\/ xText2 = width;\n\/\/ }\n\n pop();\n}\n\nfunction drawFlag(x, y, s) {\n\n push();\n translate(x, y);\n scale(s);\n rectMode(CORNER);\n fill(textRed);\n\n rect(0, 130, 250, 20);\n drawStar(50, 40, 2);\n\n noFill();\n stroke(textRed);\n strokeWeight(10*s);\n rect(0, 0, 250, 150);\n noStroke();\n\n pop();\n\n}\n\nfunction drawStar(x, y, s) {\n var rOut = 10;\n var rIn = 5;\n\n push();\n translate(x,y);\n scale(s);\n rotate(radians(180));\n\n beginShape();\n for (var i = 0; i < 5; i++) {\n vertex( rOut*cos((2*PI*i\/5)+(PI\/2)),\n rOut*sin((2*PI*i\/5)+(PI\/2)));\n vertex( rIn*cos((2*PI*i\/5)+(PI\/2)+(2*PI\/10)),\n rIn*sin((2*PI*i\/5)+(PI\/2)+(2*PI\/10)));\n }\n endShape(CLOSE);\n\n pop();\n}\n\nfunction bottomText() {\n image(bottomTextCAImg, width - bottomTextCAImg.width, height - bottomTextCAImg.height);\n \/*\n var lines = \"NO BAILOUT\\nDEMOCRATIZE POWER\\nPEOPLE OVER PROFITS\";\n\n noStroke();\n textStyle(ITALIC);\n textAlign(RIGHT, TOP);\n fill(textRed);\n textSize(14); \/\/14\n textLeading(18);\n \/\/textFont('dosis');\n\n text(lines, marginS+rectX, marginT+rectY+15);\n *\/\n\n}\n\n\/\/not used\nfunction storeBackground() {\n for (var x = 0; x < width; x++) {\n for (var y = 0; y < height; y++) {\n if (random(0,1) < 0.1) {\n bgx.push(x);\n bgy.push(y);\n }\n }\n }\n}\n\n\/\/not used\nfunction drawBackgound() {\n for (var i = 0; i < bgx.length; i++) {\n stroke('black');\n point(bgx[i], bgy[i]);\n noStroke();\n }\n}\n\nfunction cafiresPoster() {\n \/\/drawBackgound();\n\n push();\n translate(width\/2, rectY\/2 + marginT);\n\n background(tanColor);\n fill('black');\n rectMode(CENTER);\n rect(0, 0, rectX, rectY);\n\n rotate(radians(-90));\n scale(0.7);\n\n for (var i = 0; i < numRows\/3; i+=3) {\n var lat = fires.getNum(i, \"X\");\n var lon = fires.getNum(i, \"Y\");\n\n \/\/var size = fires.getNum(i, \"poly_GISAcres\")\n\n var mappedLat = map(lat, -124, -114, -width\/2, width\/2);\n var mappedLon = map(lon, 32.55, 42, -height\/2, height\/2);\n \/\/var mappedSize = map(size, 0, 223180, 20, 30);\n drawCircles(mappedLon, mappedLat, 5);\n }\n\n pop();\n\n topText();\n mainText();\n\n bottomText();\n noFill(); stroke(textRed);\n \/\/drawStar(300, marginT + rectY + 40, 3);\n noStroke();\n \/\/movingText();\n\n drawFlag(marginS+1, marginT+rectY+17, 0.3);\n}\n\n\/\/capitalism is killing the planet\nfunction drawTriangle(x, y, s, n) { \/\/dont look at this function :\/\/\/\n\n push();\n translate(x,y);\n scale(s);\n noFill();\n\n beginShape();\n\n vertex(-50 + random(n), 50+random(n));\/\/point\n for (var i = -49; i < 49; i+=10) {\n vertex(i + random(n), 50 + random(n));\n }\n vertex(50 + random(n), 50 + random(n)); \/\/point\n vertex(43.75 + random(n),39.375 + random(n));\n vertex(37.5 + random(n), 28.75 + random(n));\n vertex(31.25 + random(n), 18.125 + random(n));\n vertex(25 + random(n), 7.5 + random(n));\n vertex(12.5 + random(n), -13.5 + random(n));\n vertex(6.25 + random(n), -24.25 + random(n));\n vertex(3.125 + random(n), -29.625 + random(n));\n vertex(0 + random(n), -35 + random(n)); \/\/point\n vertex(-3.125 + random(n), -29.625 + random(n));\n vertex(-12.5 + random(n), -13.5 + random(n));\n vertex(-25 + random(n), 7.5 + random(n));\n vertex(-31.25 + random(n), 18.125 + random(n));\n vertex(-37.5 + random(n), 28.75 + random(n));\n vertex(-43.75 + random(n),39.375 + random(n));\n\n endShape(CLOSE);\n\n pop();\n}\n\nfunction drawConcentricTriangles(x, y, n) {\n push();\n for (var i = 0; i < 6; i++) {\n strokeWeight(i);\n drawTriangle(x, y, 0.8*(6-i), n);\n }\n pop();\n}\n\nfunction mainTextCap() {\n image(bottomMainTextCapImg, 0, height - bottomMainTextCapImg.height);\n \/*\n textSize(40);\n fill('black');\n noStroke();\n \/\/textFont(gothic);\n textAlign(LEFT, TOP);\n text('capitalism is', 10, height\/2 + 30);\n text('killing', 10, height\/2 + 30 + 45);\n text('the planet', 10, height\/2 + 30 + 2*45);\n *\/\n}\n\nfunction topTextCap() {\n image(topTextCapImg, 0, 0);\n \/*\n textSize(12);\n fill('black');\n noStroke();\n \/\/textFont(dosisL);\n textAlign(LEFT, TOP);\n text('CAN CAPITALISM SURVIVE?', 10, 10);\n text('NO, I DO NOT THINK IT CAN.', 10, 22);\n\n textAlign(RIGHT, TOP);\n text('ITS VERY SUCCESS UNDERMINES', width - 10, 10);\n text('THE SOCIAL INSTITUTIONS WHICH', width - 10, 22);\n text('PROTECT IT', width - 10, 34);\n *\/\n}\n\nfunction bottomTextCap() {\n textSize(12);\n fill('black');\n noStroke();\n \/\/textFont(dosisL);\n textAlign(RIGHT, BOTTOM);\n text('1942', width - 10, height - 10 - 12 - 12);\n text('JOSEPH SCHUMPETER', width - 10, height - 10 - 12);\n text('CAPITALISM, SOCIALISM AND DEMOCRACY', width - 10, height - 10);\n}\n\nfunction capitalismPoster() {\n background('orange');\n noFill();\n\n mainTextCap();\n topTextCap();\n\n stroke('black');\n\n \/\/silent at bottom left corner\n while (mouseX < 0 & mouseY < 0) {\n triangleRand = 0;\n }\n\n triangleRand = max(mouseX, height - mouseY)\/100;\n\n stroke(tanColor); \/\/tan\n drawConcentricTriangles(5*width\/9, 120, triangleRand);\n\n stroke(255, 204, 64); \/\/yellow\n drawConcentricTriangles(4*width\/9, 120, 0);\n\n \/\/image(barcode, 15, height-barcodeWidth-10, 30, barcodeWidth);\n \/\/bottomTextCap()\n}\n<\/code><\/pre><\/div><\/body><\/html>\n","protected":false},"excerpt":{"rendered":"<p>sketch Hey! My idea for this project was to make a few digital climate action “posters”. I had a lot of fun with these and ended up making three that shuffle as you click the mouse: Make Polluters Pay: This poster generates smoke objects with random size and transparency from chimnies (that also represent bar … <a href=\"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/2021\/12\/04\/capitalism-is-killing-the-planet\/\" class=\"more-link\">Continue reading<span class=\"screen-reader-text\"> “Capitalism is Killing the Planet”<\/span><\/a><\/p>\n","protected":false},"author":657,"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\/69372"}],"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\/657"}],"replies":[{"embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/comments?post=69372"}],"version-history":[{"count":5,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/69372\/revisions"}],"predecessor-version":[{"id":69412,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/posts\/69372\/revisions\/69412"}],"wp:attachment":[{"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/media?parent=69372"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/categories?post=69372"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/courses.ideate.cmu.edu\/15-104\/f2021\/wp-json\/wp\/v2\/tags?post=69372"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}