This project functions as a Climate Change Visualizer, where the user is able to understand the extents of their environmental impact in a game like exaggeration of excessive consumption. The user’s actions to increase their ecological footprint, are translated to an increased rate of change in the number of tonnes of CO2 emitted. Each aspect of the Anthropocene (transport, fossil fuels, and agriculture) are represented by icons and are associated with facts that are cycled through in an array. At the end of the clicking cycle, there is a sarcastic game-like “YOU WIN!” message that points to the absurdity of excessive human consumption that ultimately leads to the degradation of the planet. The hope is that this climate change visualizer helps people to understand the gravity and severity of their impact relative to climate change. Part of the user’s involvement makes it necessary to refresh the page in order to restart the game. The squares that change in size and movement based on mouse location are indicative of icecaps that get smaller in size as “ecological footprint” increases.
// Shariq Shah | Paul Greenway
// shariqs | pgreenwa
// shariqs@andrew.cmu.edu | pgreenwa@andrew.cmu.edu
// Project-12-Final Project
// Climate Change Visualizer
//Variables
//Ice movement intensity variable
let movementIntensity = 0;
// Environmental impacts multipliers
var impactSize = [6,9,12,400];
//Step Variable
var n = 0;
//Starting C02 Value
var co2 = 2332947388070;
//Images
//Impact Icon Links
var impactImageLinks = [
"https://i.imgur.com/BQBpdiv.png", "https://i.imgur.com/De2zFwf.png", "https://i.imgur.com/a0ab0DC.png", 'https://i.imgur.com/SRVUOkn.png'
]
//Impact Facts
var impactFacts = [ ""," Livestock contributes nearly 2/3 of agriculture's greenhouse & 78% of its methane emissions", " In total, the US transportation sector produces nearly thirty percent of all US global warming emissions", "The consumption of fossil fuel by the United States has been 80%. Fossil fuels are the most dangerous contributors to global warming"
]
//Impact Tags
var impactNames = [
"agriculture", "transportation", "fossil fuels", "you win"];
var impactImages;
//Images Preload
function preload() {
impactImages = loadImage(impactImageLinks[n]);
currentImpactImageIndex = 0;
}
//Setup, Load in Images
function setup() {
createCanvas(600, 600);
currentImpactImage = impactImages;
currentImpactImage.loadPixels();
strokeWeight(0.25);
stroke(dist(width/2, height/2, mouseX, mouseY), 10, 200);
noFill();
}
function draw() {
//Background color + opacity setup
background(255,0,0,10);
tint(500, 20);
//Dynamic ice grid setup
for (let x = 0; x <= width; x = x + 50) {
for (let y = 0; y <= height; y = y + 50) {
const xAngle = map(45, 0, width, -4 * PI* 3, 4 * PI * 3, true);
const yAngle = map(45, 0, height, -4 * PI, 4 * PI, true);
const angle = xAngle * (x / width) + yAngle * (y / height);
const myX = x + 20 * cos(2 * PI/4 * movementIntensity + angle/10);
const myY = y + 20 * sin(2 * PI/2 * movementIntensity + angle/10);
stroke(0,255,255,200);
strokeWeight(n);
fill('white');
rectMode(CENTER);
rect(myX, myY, dist(myX, myY, mouseX, mouseY)/impactSize[n],dist(myX, myY, mouseX, mouseY)/impactSize[n]); // draw particle5
}
}
//Impact Icons Config + draw
imageMode(CENTER);
currentImpactImage.resize(100, 100);
image(currentImpactImage, mouseX, mouseY);
textFont('Helvetica');
noStroke();
fill('white');
rect (width/2, 500, width, 60);
fill('black');
textSize(25);
//C02 Emmited updating Text
text('TONNES OF CO2 EMITTED : ' + co2, 40, 509);
fill(255);
//C02 emmision text backdrop
rect(width/2, 100, width, 40);
fill(0);
textSize(10);
text(impactFacts[n], width/2 - 295, 105);
//C02 Count Multiplier
co2 = co2 + 10 * n * 20;
textSize(32);
//game over text
if (n == 4) {
fill(0);
text('YOU WIN! ICE CAPS MELTED.', mouseX - 200, mouseY + 100);
textFont('Helvetica');
}
else {
textSize(6 * n);
text('PRESS TO INCREASE YOUR ECOLOGICAL FOOTPRINT!', mouseX - 120 * n, mouseY + 100);
}
//Ice Movement Intensity Multiplier
movementIntensity = movementIntensity + 0.01 +n/150;
}
//Mouse Click functions
function mousePressed(){
//change impact icons on click
impactImages = loadImage(impactImageLinks[n]);
currentImpactImage = impactImages;
currentImpactImage.loadPixels();
//increase step on click
n = n + 1;
if (n > 4) {
n = 0;
}
}