sketch

//thien le, section d, project

var pressValue = 255;
var circValOne = 255;
var circValTwo = 255;
var circValThree = 255;
var cityImg;
var iceImg;
var forestImg;
var smoke = [];
var x;
var y;
var dx;

function preload() {
  cityImg = loadImage ("https://i.imgur.com/hmWYq6y.png")
  iceImg = loadImage ("https://i.imgur.com/bcdmnoM.png12")
  forestImg = loadImage ("https://i.imgur.com/SiHq9rT.png")
}


function setup() {
  createCanvas(550, 300);
  background("#edc399");
  //smoke
  for (var i = 0; i < 80; i ++) {
        var startLocX = random(0, 270);
        var startLocY = random(0, 300);
        smoke[i] = makesmoke(startLocX, startLocY);
    }

//clouds
  x = int(random(0, 270));
  y = int(random(250, 300));
  //random colors
  //velocity of cloud
  dx = int(2);
  dy = int(5);
}

function draw() {
  screenText();
  threeButtons();
  cloud(x, y, dx);
    x += dx;
    //once cloud hits the right, it switches side
    if (dx >= 0 & x > 250){
        dx = -dx
    }
    else if (dx < 0 && x - 10 < 0){
        dx = -dx
    }
  
}
  

function screenText() {
  push();
  fill(255);
  textSize(8);
  text('P R E S S  1 ,  2 ,  O R  3  O N  K E Y B O A R D  T O  S T A R T !', 300, 30)
  pop();
}

function aOrB() {
  push();
  fill(255);
  textSize(10);
  text("A", 355, 255)
  text("B", 470, 255)
  pop();

}
function choiceText() {
  push();
  fill(255);
  textSize(8);
  text('P R E S S  A  O R  B  T O  C H O O S E', 350, 270);
  pop();
}

function badChoice() {
  push();
  fill("red");
  textSize(15);
  textStyle(BOLD);
  text('CONTINUE PRESSING B', 340, 260);
  pop();
}
function threeButtons() { //buttons that will display 3 facts about climate change
    noStroke();
    fill(circValOne);
    circle(350, 70, 50, 50);
    fill(circValTwo);
    circle(420, 70, 50, 50);
    fill(circValThree);
    circle(490, 70, 50, 50);
}

function keyTyped() {
  //city
  if (key === '1') {
    circValOne = ("#cc7161");
    circValTwo = 255;
    circValThree = 255;
    fill(255);
    image(cityImg, 0, 0, 270, height);
    cityButton();
    cityFact();
    choiceText();
    aOrB();
    //ice
  } 
  if (key === 'a') {
    background("#014421");
    push();
    textSize(15);
    textAlign(CENTER);
    fill(255);
    text('YAY YOU SAVED THE EARTH!', 150, 150)
    pop();
  }
  if (key === 'b') {
     smokeDisplay();
     badChoice();
  }
  if (key === '2') {
    circValTwo = ("#cc7161");
    circValOne = 255;
    circValThree = 255;
    image(iceImg, 0, 0, 270, height);
    iceButton();
    iceFact();
    choiceText();
    //forest
  } 
  else if (key === '3') {
    circValThree = ("#cc7161");
    circValTwo = 255;
    circValOne = 255;
    image(forestImg, 0, 0, 270, height);
    forestButton();
    forestFact();
    choiceText();
  }
}

function cityButton(){
  push();
  rectMode(CENTER);
  fill("#638a7e");
  rect(360, 200, 100, 80, 20);
  rect(480, 200, 100, 80, 20);
  pop();
  push();
  textAlign(CENTER);
  fill(255);
  text('Walk, bike, or take public transportation', 310, 180, 100, 80);
  text('Drive personal vehicle', 430, 185, 100, 80);
  pop();
}

function iceButton(){
  push();
  rectMode(CENTER);
  fill("#638a7e");
  rect(360, 200, 100, 80, 20);
  rect(480, 200, 100, 80, 20);
  pop();
  push();
  textAlign(CENTER);
  fill(255);
  text('Utilize smart power in homes', 310, 185, 100, 80);
  text('Leave lights on everywhere', 430, 185, 100, 80);
  pop();
}

function forestButton(){
  push();
  rectMode(CENTER);
  fill("#638a7e");
  rect(360, 200, 100, 80, 20);
  rect(480, 200, 100, 80, 20);
  pop();
  push();
  textAlign(CENTER);
  fill(255);
  text('Encourage politicians to fund parks', 310, 180, 100, 80);
  text('Use lots of paper', 430, 190, 100, 80);
  pop();
}

function cityFact() {
  push();
  rectMode(CENTER);
  fill("#edc399");
  rect(420, 130, 230, 60);
  pop();
  push();
  textAlign(CENTER);
  fill(255);
  //climate fact
  fill(255);
  text('Each year 1.2 trillion gallons of untreated sewage, stormwater, and industrial waste are dumped into US water', 310, 107, 230, 100);
  pop();
}

function iceFact() {
  //climate fact
  push();
  rectMode(CENTER);
  fill("#edc399");
  rect(420, 130, 230, 60);
  pop();
  push();
  textAlign(CENTER);
  fill(255);
  //climate fact
  fill(255);
  text('95% of the oldest and thickest ice in the Arctic is already gone', 310, 115, 230, 100);
  pop();
}

function forestFact() {
  //climate fact
  push();
  rectMode(CENTER);
  fill("#edc399");
  rect(420, 130, 230, 60);
  pop();
  push();
  textAlign(CENTER);
  fill(255);
  //climate fact
  fill(255);
  text('Deforestation emits more greenhouse gas emissions than 85 million cars would over their entire lifetime', 310, 107, 230, 100);
  pop();
}

//smoke object
function drawsmoke() {
    noStroke();
    //fill(255);
    push();
    translate(this.x, this.y);
    fill(200, 200);
    ellipse(1, 10, this.starH, this.starH);
    pop();
}

function makesmoke(startLocX, startLocY) {
    var smoke = {x: startLocX, 
               y: startLocY, 
               starH: random(10, 30),
               speed: -1, 
               move: smokeMove, 
               draw: drawsmoke}
    return smoke;
}

function smokeMove() { //update position of smoke
    this.x += this.speed
    if (this.x <= 0) {
        this.x += 50
    }
}

function smokeDisplay() { 
     for(i = 0; i < smoke.length; i ++) {
        smoke[i].move();
        smoke[i].draw();
    }
}

//cloud
function cloud(x, y, dx) {
    fill(200, 200);
    ellipse(x - 30, y + 20, 20, 20)
    ellipse(x - 15, y + 10, 30, 40)
    ellipse(x + 5, y + 5, 20, 30)
    ellipse(x, y, 20, 10)
}

//Patrick Fisher, section B, wpf assignment - 13

var bear; //object for the bear
var icebergs = []; //array of objects of icebergs
var middleIce; //variable the stores the position of the platform that is under the bear
var clouds = []; //array of objects of clouds
var score = 0; //score counter based on frame count and the amount of platforms passed

function setup() {
    createCanvas(480,480);
    background(113,147,231);
    bear = makeBear();
    var ib = newBerg(-60,0,120) //creates the starting platform which is the same everytime
    icebergs.push(ib);

    for(var i = 1; i <= 5; i++){ //creates new, random platofrms,
        icebergs.push(newBerg(-60 + (i * 250),floor(random(-20,0)),random(90,150)))
    }

    for(var i = 0; i <= 7; i++){ //aesthetic clouds at the top
        clouds.push(makeCloud(-60 + (i * 250)));
    }
    middleIce = {end: 60, y: 0}; //starting info for the platform that will have colision
}

function draw() {
    background(113,147,231); //sky
    fill(63,181,207);
    rect(0,300,width,height); //ocean

    fill(255,246,2); //sun
    circle(100,75, 50);
    
    push();
    fill(0);
    translate(width/2-75, 300);
    for(var i = 0; i <= 5; i ++){ //for loop to draw the icebergs
        if(icebergs[i].x <= 30 & icebergs[i].end >= -30){ //checks to see if theres a platform under the bear and if so stores it as middle ice
            middleIce.y = floor(icebergs[i].y);
            middleIce.end = floor(icebergs[i].end);
        }

        icebergs[i].draw();
    

        if(icebergs[i].x <= -600){ //deletes a iceberg from the array when it gets too far off screen and makes a new one
            icebergs.shift();
            icebergs.push(newBerg(900,random(-20,0),random(90,150)));

        }

    }
    if(middleIce.end <= -25){ //gets rid of middle ice after its gone past the bear
        middleIce.y = 200;
        score ++;

    }

    for(var i = 0; i <= 7; i++){ //draws clouds
        clouds[i].draw();
    }

    if(clouds.x <= -600){ //deletes a cloud from the array when it gets too far off screen and makes a new one
            clouds.shift();
            clouds.push(makeCloud(600));

        }

    if (bear.y >= 200) { //checks to see if the bear has fallen and if so starts the game over sequence
        bear.isAlive = false;
    }

    if(frameCount < 240){ //4 seconds of the text
        text("Press Space to Jump", 10, 30);
    }

    bear.draw(); 
    pop();

    if(bear.isAlive == false){ //game over sequencse
        background(0);
        fill(63,181,207);
        stroke(255);
        textSize(50);
        textAlign(CENTER);
        text("GAME OVER", width/2, height/2);
        textSize(40);
        text("SCORE: " + score.toString(), width/ 2, height/2 + 75);
        noLoop();
    }
}

function newBerg(bx,by,bw) { //constructor funtion to create icebergs
    var b = {x: bx, y: by, w: bw, end: bx+bw, half: bx + (bw / 2), draw: drawIce, speed: iceSpeed};
    return b;
}

function makeBear() { //constructor to make the bear
    var b = {x: 0, y: 0, dy: 0, isAlive: true, vestOn: false, draw: drawBear}
    return b;
}

function drawBear(){
    push();
    
    this.y += this.dy; //moves the bear down
    if(this.y >= middleIce.y - 3 & this.y <= middleIce.y){ //checks if the bear is over a platform
        this.dy = 0;
    }
    else{ 
        this.dy ++;
    }

    fill(214,207,193); //draws the bear
    legAni(this.x,this.y);
    ellipse(this.x,this.y-17,50,30);
    legAni(this.x + 2,this.y);
    ellipse(this.x+20,this.y-38,5,10);
    ellipse(this.x+30,this.y-38,5,10);
    circle(this.x+25,this.y-30,20);

    
    fill(0);
    circle(this.x+30,this.y-32,5);

    pop();
}

function drawIce() { //draws the ice
    push();
    fill(95,145,150);
    triangle(this.x,this.y,this.end,this.y,this.half, this.y + 160);
    fill(228,224,221);
    triangle(this.x,this.y,this.end,this.y,this.half, this.y - 90);
    push();
    strokeWeight(5);
    line(this.x,this.y,this.end,this.y);
    pop();
    pop();

    this.speed();

}

function keyPressed() { // press spacebar to jump
    if(keyCode ==  32){
        bear.dy = -10;
    }
}

function iceSpeed() { //function that moves and continually speeds up the icebergs every 30 seconds
    var o = floor(frameCount / (30*60));

    this.x -= o+1;
    this.end -= o+1;
    this.half -= o+1;
}

function makeCloud(cx){ //constructor for the clouds
    var c = {x: cx, y: (-350,-250), draw: drawCloud}
    return c;
}

function drawCloud(){ //function to draw the clouds
    push();
    fill(255);  //series of ellipses that draws the cloud
    ellipse(this.x,this.y,60,50);
    ellipse(this.x+30,this.y-10,60,50);
    ellipse(this.x+80,this.y,60,50);
    ellipse(this.x+20,this.y+20,60,50);
    ellipse(this.x+60,this.y+15,60,50);
    push();
    noStroke();
    ellipse(this.x+40,this.y+10,100,55)
    pop();
    pop();

    if(frameCount % 2 == 0){
        this.x --;
    }
}

function legAni(x,y){ //simple leg moving animation
    
    if(frameCount % 4 == 0){
        ellipse(x-18,y-8,10,20);
        ellipse(x+22,y-8,10,20);
    }

    if(frameCount % 4 == 1){
        ellipse(x-18,y-8,10,20);
        ellipse(x+21,y-8,10,20);
    }

    if(frameCount % 4 == 2){
        ellipse(x-17,y-8,10,20);
        ellipse(x+20,y-8,10,20);
    }

    if(frameCount % 4 == 3){
        ellipse(x-15,y-8,10,20);
        ellipse(x+19,y-8,10,20);
    }
}

For my project what inspired me was the polar ice caps melting and seeing pictures of polar bears literally having to jump across water to get to safety. So I decided to create a platform game that was that. It’s pretty simple, just press space to repeatedly jump and land on the next iceberg. The collision detection for the icebergs is very hit or miss, unfortunately. If I had more time I would want to figure out what is going wrong with it as when debugging I could see that the values for the bear and the iceberg I was comparing were equal and yet the bear did not stop falling. Additionally, I had more time I would add a sort of extra life feature, described in my design documents as a life preserver, make the icebergs sink once landed on, and make the bear fully controllable rather than the game being an auto scroller.

My program is a game that covers the theme of climate change. The player gets to freely control an iceberg across a body of water that will try to collect 7 renewable energy to increase in size and win. However, if it hits a fossil fuel in the form of pollution, it will break resulting in the player losing. I was inspired by the snake game, but I decided to change some elements. Instead, there is an obstacle, the pollution, that bounces around the canvas, the iceberg gets bigger than longer, and the iceberg gets to move freely rather than straight lines. If I had more time, I would’ve added different types of renewable energy, so that whenever it spawns or respawns it would be a different renewable energy. I just have the water renewable energy that represents hydropower energy in my program. I would have also added a moving and animating element in the water to make it seem like the ocean was moving, I would have made the iceberg have more detail like ripples as it moves across the water, and also maybe some sounds. If I could, I would also have included more secure randomization in the movement of the obstacle.

//global variables
var houseDayImg;
var houseNightImg;
var dayPeriod = 2000;
var numTrees = 4;
var numStars = 20;
var trees = [];
var stars = [];

class Star {
    constructor() {
        this.x = random(width);
        this.y = random(height/4);
    }

    display() {
        fill(255,255,255);
        ellipse(this.x, this.y, 3, 3);
    }
}

class Tree {
    constructor() {
        var choice = random(1);
        if(choice < 0.5){
            this.x = random(width/3);  
        }else {
            this.x = random(2 * width / 3, width - 10); 
        }
        choice = random(1);
        if(choice < 0.5){
            this.color = color(135, 167, 126);  
        }else {
            this.color = color(73, 126, 97);
        }
        this.y = random(280, 300)
        this.w = random(50, 70);
        this.h = random(60, 90);
    }
       
    display() {
        fill(109, 86, 53);
        rect(this.x - 5, this.y + 10, 10, 50);
        fill(this.color)
        ellipse(this.x, this.y, this.w, this.h);
    }
}

function preload() {
    //preload images
    houseDayImg = loadImage("https://i.imgur.com/DguMSkN.png");
    houseNightImg = loadImage("https://i.imgur.com/eXNWSkN.png");
    panelImg = loadImage("https://i.imgur.com/VFf1Rr8.png");
    batteryImg = loadImage("https://i.imgur.com/rw8ScZs.png");
}

function setup() {
    createCanvas(400, 400);
    for(i = 0; i < numStars; i++){ //draw stars at night
        stars.push(new Star())
    }
    
    for(i = 0; i < numTrees; i++){ //draw trees
        trees.push(new Tree())
    }

}

function draw() {
    time = frameCount % dayPeriod;
    bgDark = time;
    batteryLife = (frameCount + dayPeriod / 4) % dayPeriod;
    if (bgDark > dayPeriod/2) {
        bgDark = dayPeriod - bgDark;
    }
    if (batteryLife > dayPeriod/2) {
        batteryLife = dayPeriod - batteryLife;
    }
    background(207 - bgDark / dayPeriod*255*2, 226 - bgDark / dayPeriod*255*2, 243 - bgDark / dayPeriod*255*2);

    //ground
    fill(143-bgDark*(143-66)/dayPeriod*2, 206-bgDark*(206-95)/dayPeriod*2, 0);
    noStroke();
    ellipse(200, 400, 500, 180);
    
    //panel
    image(panelImg, 125, 156, 80, 80);
    
    //battery
    image(batteryImg, 140, -15, 100, 100);
    fill(255 - batteryLife / dayPeriod * 255 * 2, batteryLife / dayPeriod * 255 * 2, 0);
    rect(167, 18, batteryLife / dayPeriod * 61 * 2, 34);
  
    //during daytime
    if (time < dayPeriod/4 || time > dayPeriod*3/4) {
       
       //house
       image(houseDayImg, 130, 200, 130, 130);

    } else { //during nighttime
       
        //house 
        drawStars();
        image(houseNightImg, 130, 200, 130, 130);
   }

    frameCount += 1;

    //function
    drawSun(time);
    drawTrees();
}


function drawSun(time) { 
   push();
   translate(200, 400);
    rotate(frameCount * 2 * PI / dayPeriod);
   fill(255, 206, 59);
   ellipse(0, -300, 70, 70);
   pop();
}

function drawStars() { //draw stars at random locations in the sky when it becomes night and disappear when it becomes daytime again
    for(i = 0; i < stars.length; i++){
        stars[i].display();
    }
}

function drawTrees(){ //draw trees at random locations every time you refresh 
    for(i = 0; i < trees.length; i++){
        trees[i].display();
    }
}

For the final project, I created an information visualization inspired by Tesla’s solar roof. I wanted to illustrate this scene by using solar roof because I thought this type of clean energy production can help lower the emissions of greenhouse gases and carbon dioxide, and further decrease our reliance to fossil fuels to create a better environment. During the day, the solar roof is charged with solar energy, illustrated by a battery icon being gradually charged up as the sun moves throughout the daytime. Then, when it becomes night, the battery icon will be fully charged, allowing the house to brightly light up even in the dark. For a little detail, after the sun goes down during the day, the stars will show up representing nighttime. Every time the user refreshes the screen, the trees will randomly appear in random locations as well as the stars. This was an amazing opportunity for me to explore using various techniques like array, object, loop, conditional, transformation, and functions, and I think I truly enjoyed creating this illustration. Hope you enjoy!

sketch

// Name: Aysha Zackria
// AndrewID: azackria
// Section D

var firelocationx = [];
var firelocationy = [];
var smoke = {
    locationx:[], 
    locationy:[], 
    size: 75
}
var counter = 1;
var xoff = 0;
var firesize = 12;
var treelocationx = [];
var treelocationy = [];
var r = 133;
var g = 214;
var b = 139;
var waterr = 131;
var waterg = 228;
var waterb = 234;
var smokecolor = 240;

function setup() {
    createCanvas(500, 500);
    for (var i = 0; i < 25; i++) {
        firelocationx.push(random(20, 480));
        firelocationy.push(random(45, 330));
        treelocationx.push(random(20, 480));
        treelocationy.push(random(35, 330));
    }
}

function draw() {
    background(r, g, b);
    r = map(firelocationx.length, 25, 100, 133, 43);
    g = map(firelocationx.length, 25, 100, 214, 24);
    b = map(firelocationx.length, 25, 100, 139, 8);
    noStroke();
    fill(0);
    if (firelocationx.length < 30) {
        text("Slowly drag the fire into the water to put it out.", 10, 15);
    } else if (firelocationx.length >= 30 & firelocationx.length <= 35) {
        text("Drag the fire into the water to put it out.", 10, 15);
    } else if (firelocationx.length > 35 & firelocationx.length < 40) {
        text("Drag the fire into the water.", 10, 15);
    } else if (firelocationx.length >= 40) {
        text("Put the fire out.", 10, 15);
    }
    noStroke();
    fill(waterr, waterg, waterb);
    waterr = map(firelocationx.length, 25, 100, 131, 25);
    waterg = map(firelocationx.length, 25, 100, 228, 54);
    waterb = map(firelocationx.length, 25, 100, 234, 92);
    rect(0, 350, 500, 150); // water
    let nx = noise(xoff) * 600;
    let ny = noise(xoff+10) * 500;
    if ((counter % 20) == 0) {
        smoke.locationx.push(nx);
        smoke.locationy.push(ny);
    }
    for (var i = 0; i < treelocationx.length; i++) {
        drawtree(i);
    }
    for (var i = 0; i < firelocationx.length; i++) {
        drawfire(i);
        if (mouseIsPressed & dist(firelocationx[i], firelocationy[i], 
            mouseX, mouseY) < 12) {
            firelocationx[i] = mouseX;
            firelocationy[i] = mouseY;
        }
        if (firelocationy[i] > 350) {
            firelocationy.splice(i, 1);
            firelocationx.splice(i, 1);
        }
    }
    fill(smokecolor, 100);
    smokecolor = map(firelocationx.length, 25, 100, 240, 100);
    for (var i = 0; i < smoke.locationx.length; i++) {
        circle(smoke.locationx[i], smoke.locationy[i], smoke.size);
    }
    counter += 1;
    xoff += 0.1;
    if ((counter % 100) == 0) {
        firelocationx.push(random(20, 480));
        firelocationy.push(random(35, 330));
    }
}

function drawtree(i) {
        strokeWeight(4);
        stroke(165, 115, 75);
        line(treelocationx[i], treelocationy[i] - 2, 
            treelocationx[i], treelocationy[i] - 10);
        stroke(50, 100, 50);
        fill(50, 100, 50);
        triangle(treelocationx[i], treelocationy[i] - 15, treelocationx[i] - 3, 
            treelocationy[i] - 10, treelocationx[i] + 3, treelocationy[i] - 10);
        triangle(treelocationx[i], treelocationy[i] - 10, treelocationx[i] - 3, 
            treelocationy[i] - 5, treelocationx[i] + 3, treelocationy[i] - 5);
}

function drawfire(i) {
    fill(255, 100, 0); 
    noStroke();
    push();
    translate(firelocationx[i], firelocationy[i]);
    scale(firelocationx.length / 15);
    circle(0, 0, firesize);
    triangle(-(firesize / 2), -1, (firesize / 2), -1, 0, -20);
    pop();
}

My program is a game that includes fire and smoke appearing at regular intervals on a background of grass and trees. The fire can be extinguished by dragging it into the water area. The game is designed to not be winnable to reflect my growing feeling of hopelessness in regards to the climate crisis. The smoke ultimately obscures a good portion of the screen while the colors of the background and water grow darker to mimic soot buildup. The text direction in the top left corner also changes to convey a sense of urgency as the user gets more frustrated. I didn’t end up implementing any separate sound or image files, so the program can be run normally. If I had more time, I would probably add simple sounds to accompany the fires appearing and disappearing.

var birds = []
var trees = []
var deadTrees = []
var timberJacks = []
var angle = 70
var angle2 = 50
var x = 30
var y = 50
function setup() {
    createCanvas(600, 500)
    frameRate(10)
}
function draw() {
    //draw backgrounds
    push()
    drawDesertAndSky()
    drawNightWorld()
    drawSun()
    pop()
    //rotating lines for the sun
    push()
    translate(150,0)
    for (y = 50; y <= 300; y += 2){
        rotate (radians(angle))
        stroke (255, 215, 0)
        line (30, y, x+2, y)
    }
    pop()
    push()
    for (x = 30; x <= 400; x += 5){
        rotate (radians(angle2))
        stroke (255, 255, 100)
        line (x-25, x-40, x-40, 0.8*40)
    }
    pop()
    //draw trees and deadtrees 
    push()
    for (var i = 0; i < trees.length; i++){
        trees[i].displays()
    }
    pop()
    push()
    for (var i = 0; i < deadTrees.length; i++){
        deadTrees[i].showss()
    }
    pop()
    //draw timberjacks
    push()
    updateAndDisplayTimberJacks()
    addNewTimberJackWithSomeRandomProbability()
    pop()
    //draw birds    
    push()
    updateAndDisplayBirds(); 
    removeBirdsThatHaveSlippedOutOfView();
    addNewBirdsWithSomeRandomProbability();
    pop()
    //texts
    push()
    fill(0,100,0)
    textSize(18);
    strokeWeight(3)
    stroke(0,100,0)
    text("CURRENT WORLD",100,70)
    textSize(16);
    text("WE DON'T WANT OUR WORLD DESTROYED!",10,100)
    strokeWeight(2)
    text("Click to Plant Trees Here! :)",40,150)
    fill(0)
    textSize(20)
    strokeWeight(3)
    stroke(0)
    text("FALLEN WORLD",430,50)
    textSize(16);
    strokeWeight(2)
    text("Klik to pLanT dEAd TrEEs:(",400,80)
    pop()
}

//functions that draw the background
function drawDesertAndSky(){
    noStroke()
    fill(237, 201, 155)//desert
    rect(0,170,400,330)
    fill(135,206,235)//sky
    rect(0,0,400,170)
}
function drawNightWorld(){
    noStroke()
    fill(48,25,52)
    rect(400,170,200,330)
    fill(216,191,216)
    rect(400,0,200,170)
}
function drawSun(){
    translate(150,0)
    fill(255,200,0)//sun
    ellipse(0,0,100,100)
    line(50,50,85,85)
    line(75,20, 125, 30)
    line(20,75, 25 ,125)
}

//interactive mousePressed function to draw trees
function mousePressed(){
    if (mouseX <= 400){
        var tree_instance = makeTree(mouseX, constrain(mouseY,150,550), 0)//plant live trees on the ground
        trees.push(tree_instance)
    }else{
        var deadTree_instance = makeDeadTree(mouseX, constrain(mouseY,180,550))
        deadTrees.push(deadTree_instance)
    }
}

//the tree & dead tree functions
function makeTree(tx, ty, th){
    var tree = {x: tx, y: ty, height: th, 
            displays: treeDraw}
    return tree
}
function treeDraw(){ 
    fill(0,255,0)
    triangle(this.x,this.y-this.height,this.x-7,this.y+15-this.height,this.x+7,this.y+15-this.height)
    fill(50,30,0)
    rect(this.x-2,this.y+15-this.height,4,10+this.height)
    //trees grow
    if(this.height <= 10){
        this.height+=0.1
    }
}
function makeDeadTree(tx, ty){
    var deadTree = {x: tx, y: ty,
            showss: deadTreeDraw}
    return deadTree
}
function deadTreeDraw(){
    push()
    fill(129)
    triangle(this.x+10,this.y-4,this.x+10,this.y+8,this.x+25,this.y)
    rect(this.x,this.y,10,4)
    pop()
}

//timberjacks
function makeTimberjack(jx, jy){
    var timberJack = {x: jx, y: jy, 
            display: timberJackDraw,
            speedX: random(3,6),
            speedY: random(-1,1),
            move: timberJackMove}
    return timberJack
}
function timberJackDraw(){
    push()
    strokeWeight(1)
    ellipse(this.x,this.y,9,12)
    //body
    line(this.x,this.y+6,this.x,this.y+20)//body
    line(this.x,this.y+15,this.x+5,this.y+15)//left hand
    line(this.x,this.y+15,this.x+5,this.y+12)//right hand
    line(this.x,this.y+20,this.x+5,this.y+27.5)//right leg
    line(this.x,this.y+20,this.x-5,this.y+27.5)//left leg
    //eyes
    ellipse(this.x-1.5,this.y-1,0.5,0.5)
    ellipse(this.x+1.5,this.y-1,0.5,0.5)
    arc(this.x, this.y+5, 6, 7.5, PI+1,-1)
    //hair
    line(this.x,this.y-6,this.x,this.y-11)
    line(this.x-1.5,this.y-5.5,this.x-5,this.y-9)
    line(this.x+1.5,this.y-6.5,this.x+5,this.y-9)
    pop() 
    //electric saw
    push()
    noStroke()
    fill(0)
    rect(this.x+5,this.y+10,5,8)
    rect(this.x+7,this.y+12,11,4)
    triangle(this.x+18,this.y+12,this.x+18,this.y+16,this.x+23,this.y+12)
    pop()
}
function timberJackMove() {
    this.x += this.speedX;
    this.y += this.speedY
}
function addNewTimberJackWithSomeRandomProbability() {
    // With a probability, add a new timberjack to the end.
    var newTimberJackLikelihood = 0.05; 
    if (random(0,1) < newTimberJackLikelihood) {
        timberJacks.push(makeTimberjack(0,random(200,470)));
    }
}
function updateAndDisplayTimberJacks(){
    // Update the timberjacks' positions, and display them.
    for (var i = 0; i < timberJacks.length; i++){
        timberJacks[i].move();
        timberJacks[i].display();
    }
}
function removeTimberJacksThatHaveSlippedOutOfView(){
    var timberJacksToKeep = [];
    for (var i = 0; i < timberJacks.length; i++){
        if (timberJacks[i].x > 0) {
            timberJacksToKeep.push(timberJacks[i]);
        }
    }
    timberJacks = timberJacksToKeep;
}

//birds
function removeBirdsThatHaveSlippedOutOfView(){
    var birdsToKeep = [];
    for (var i = 0; i < birds.length; i++){
        if (birds[i].x > 0) {
            birdsToKeep.push(birds[i]);
        }
    }
    birds = birdsToKeep; // remember the surviving birds
}
function updateAndDisplayBirds(){
    // Update the birds' positions, and display them.
    for (var i = 0; i < birds.length; i++){
        birds[i].move();
        birds[i].display();
    }
}
function addNewBirdsWithSomeRandomProbability() {
    // With a probability, add a new bird to the end.
    var newBirdLikelihood = 0.02; 
    if (random(0,1) < newBirdLikelihood) {
        birds.push(makeBird(width,random(20,160),0));
    }
}
// method to update position of birds every frame
function birdMove() {
    this.x -= this.speedX;
    this.y += this.speedY
}
// draw the birds
function birdDisplay() {
    push()
    fill(this.c)
    triangle(this.x,this.y,this.x+6,this.y+1.5,this.x+6,this.y-1.5)//beak
    ellipse(this.x+9,this.y,7,7) //head
    ellipse(this.x+17,this.y+4,15,8)//body
    arc(this.x+18, this.y, 10, 10, -0.7, PI-0.7,CHORD)//wings
    ellipse(this.x+8,this.y-1,1,1)//eyes
    pop()
}
//make new bird with different location, color, speedXY
function makeBird(birthLocationX,birthLocationY,color) {
    var bird = {x: birthLocationX,
                y: birthLocationY,
                c: color,
                speedX: random(5,8),
                speedY: random(-1.5,1.5),
                move: birdMove,
                display: birdDisplay}
    return bird;
}

Since the theme for the project is climate change, I want to write an interactive program that presents scenery that compares a current world and a fallen world to warn people about the consequence of climate change.
The inspiration comes from the trees I was drawing in project 11. I thought of trees immediately when the topic was said to be climate change. Then I had the idea that comparison would be the best way to send out a message of warning. Therefore, the timber jacks in my program were born to play the role of antagonist; the night world is created to demonstrate the potential consequence if we don’t take climate change seriously.
For the interaction part, I want users to be able to plant trees themselves. In the current world, they can plant a tree by clicking on the canvas and the tree would grow gradually to a maximum height. But if the user tries to plant trees in the fallen world, the trees would turn out to be dead trees. This is to imply that once climate change gets to a point, there is no turning back (for a long long time).
Though I did a lot of decorations like the birds and the transformations and loops just for the rays of sunlight, I feel like I could make the scenery more real if I have more time. I might want to use sin wave to draw the desert; I might draw more detailed timber jacks; I might add clouds. But overall, I feel like the program is quite complete, as the message is delivered and I believe that I’ve done all 6 technical merits.

sketch

// gnmarino
// Gia Marino
// section D

var cords = [];
function setup() {
    createCanvas(223.2, 223.2);

    // need counter so there doesn't need to be another loop
    var counter = 0;

    // stores in an array all the cordinate points of the squares
    for(var x = 0; x < 93; x++){
        for(var y = 0; y < 93; y++){
            cords[counter]= new Object();
            cords[counter].x = (x * 2.4);
            cords[counter].y = (y * 2.4);
            counter += 1
        }
    }
}
var squares = [];   // array stores makeSquare

function draw() {
    background(20);

    if(cords.length == 1){
        fill(255);
        textSize(10);
        text('Every square represents 24 metric tons',10, 15);
        text('of CO2 emissions produced from the US daily', 10, 30);
        for(var i = 0; i < 8649; i++){
            squares[i].moveSqr();
        }
        noLoop();
    }

    // makes a new array with every square object with a random xy cordinate
    squares.push(makeSquare(int(random(cords.length))));

    // displays a new square with the previous old squares
    // and displays new opactities
    for(var i = 0; i < squares.length; i++){ 
        squares[i].display();
        squares[i].changeOpacity();
    }
}

function moveSquares(){

    // scales visualization down and moves it
    for(var i = 0; i < 8649; i++){
        push();
        scale(.5);
        translate(112, 150);
        squares[i].display();
        pop();
        if(this.x < width/2 & this.x > 5){
            this.x --
        }
        if(this.x > width/2 && this.x < width-5){
            this.x ++ 
        }

    }
    noLoop();
}

function changeColor(){
    // once a square has been in frame for 15 seconds 
    // it starts to lower opacity to 40
    this.age ++
    if(this.age > 15 & this.opacity > 40){
        this.opacity -= 1;
    }

    // at the end all the squares return to opacity 230
    if(cords.length == 2){
        this.opacity = 230;
    }
}

function displaySquare(){
    fill(this.red, this.green, this.blue, this.opacity);
    noStroke();
    rect(this.x, this.y, 2.4, 2.4);
}

function makeSquare(cordNum){
    var square = {x: cords[cordNum].x,
                  y: cords[cordNum].y,
                  red: random(255),
                  blue: random(255),
                  green: random(255),
                  opacity: 255, 
                  age: 0,
                  display: displaySquare,
                  changeOpacity: changeColor,
                  moveSqr: moveSquares}

   // once a square cord is extracted from the array
   // it is removed so it isn't reused
    cords.splice(cordNum, 1);
    return square;
}

For my final project I made a data visualization of the daily carbon emissions in the US. I found a statistic that stated “Passenger cars produced 762.3 million metric tons of CO2 in 2019 [in the US]” (https://www.statista.com/statistics/1235091/us-passenger-car-ghg-emissions-by-vehicle-type/). I was overall inspired by how much the US’s lack of public transportation contributes to CO2 emissions.

I did the math and found that the US produces 24 metric tons of CO2 per second (52,910 lbs). So I figured out how to fit this perfectly on a square canvas with squares and found that if I had a canvas with the size of 223.2 x 233.3 and each square was 2.4, then it would be the correct ratio.

I decided to not make my visualization actually run second by second because it would look kinda boring. So, I sped it up, however each square does proportional represent one second of c02 emissions.

I decided to make my squares fade each time so you could see all the new squares popping in more clearly, because the point of the visualization is to see how many squares there are to represent really how much CO2 is produced each day!

Then at the end I minimize so you can see it all together and then you see the statistic so you know what the pretty animation represented.

sketchDownload

//Yanina Shavialenka
//Section B

var numPressed = 1; //Counts number pressed
var r = 174;
var g = 198;
var b = 207;
var cycle = false; //records whether a cycle has occured

//Picture variables
var earth;
var hand;
var airplane;
var car;
var beach;
var factory;
var smoke;
var deforestation;

//Array of pictures and objects
var thermometer = [];
var loadTherm = [];
var planes = [];
var hands = [];
var loadHand = [];
var loadSmokes = [];
var texts = [];

//Function that preloads images
function preload() {
    hand = loadImage("https://i.imgur.com/yj0wtAM.png");
    earth = loadImage("https://i.imgur.com/kHdVss0.png");
    airplane = loadImage("https://i.imgur.com/5UTfPON.png");
    car = loadImage("https://i.imgur.com/FFnoxXk.png");
    beach = loadImage("https://i.imgur.com/vpAjq6W.jpg");
    factory = loadImage("https://i.imgur.com/UAwSjh7.png");
    arrow = loadImage("https://i.imgur.com/QALHzw2.png");
    smoke = loadImage("https://i.imgur.com/RH9Ikd8.png");
    deforestation = loadImage("https://i.imgur.com/ybzFc92.jpg");

    var thermFiles = [];
    thermFiles[0] = "https://i.imgur.com/Gbbbv1a.png";
    thermFiles[1] = "https://i.imgur.com/SFaNzVE.png";
    thermFiles[2] = "https://i.imgur.com/FqY5tgi.png";
    thermFiles[3] = "https://i.imgur.com/BR7AC3a.png";
    thermFiles[4] = "https://i.imgur.com/tsBaLsK.png";
    thermFiles[5] = "https://i.imgur.com/QQs5VxM.png";

    for(var i = 0 ; i < thermFiles.length ; i++) {
        thermometer[i] = loadImage(thermFiles[i]);
    }

    var handFiles = [];
    handFiles[0] = "https://i.imgur.com/V3shALS.png";
    handFiles[1] = "https://i.imgur.com/qWRT7Nb.png";
    handFiles[2] = "https://i.imgur.com/obwct4k.png";
    handFiles[3] = "https://i.imgur.com/GwpjItB.png";
    handFiles[4] = "https://i.imgur.com/ip5YRk2.png";
    handFiles[5] = "https://i.imgur.com/sYgwV8p.png";

    for(var i = 0 ; i < handFiles.length ; i++) {
        hands[i] = loadImage(handFiles[i]);
    }
}

//Functions that make objects to specific images
function makeThermometer(num) {
    var c = { x: 85, y: 150, imageNum: num,
            drawFunction: drawThermometer
    }
    return c;
}

function makeHand(num) {
    var c = { x: 265, y: 350, imageNum: num,
            drawFunc: drawHand
    }
    return c;
}

function makeSmoke(x1,y1) {
    var c = { x: x1, y: y1,
            drawFun: drawSmoke,
            stepFun: stepSmoke
    }
    return c;
}

//Functions that draw objects
function drawThermometer() {
    image(thermometer[this.imageNum],this.x,this.y);
}

function drawHand() {
    image(hands[this.imageNum],this.x,this.y);
}

function drawSmoke() {
    image(smoke,this.x,this.y);
}

//Function that moves smoke at specific intervals
function stepSmoke() {
    if(numPressed == 2){
        this.x += 0.1;
        this.y += 1;
    }
    if(numPressed == 3){
        this.y += 1;
    }
    if(numPressed == 4){
        this.x -= 0.15;
        this.y += 1;
    }
    if(numPressed == 5){
        this.x -= 0.5;
        this.y += 1;
    }
}

//Loads canvas and initial objects
function setup() {
    createCanvas(600, 600);
    background(r,g,b);
    loadTherm.push(makeThermometer(0));
    loadHand.push(makeHand(0));
    initialSmokes();
}

function draw() {
    imageMode(CENTER);

    //Resizes objects
    airplane.resize(140,125);
    car.resize(80,45);
    factory.resize(145, 65);
    deforestation.resize(80, 80);
    beach.resize(100, 80);
    smoke.resize(40,100);

    //Square that helps with not stacking new objects over initial
    fill(174,198,207);
    square(0,0,600);
    noFill();

    //Resizes all Thermometers
    for(var i = 0 ; i < thermometer.length ; i++) {
        thermometer[i].resize(300,300);
    }

    //Draws functions
    for(var i = 0 ; i < loadTherm.length ; i++) {
        loadTherm[i].drawFunction();
        loadTherm.splice(0,loadTherm.length-1); //Deletes previous thermometers to not overlap
    }

    //Draws hand
    for(var i = 0 ; i < loadHand.length ; i++) {
        loadHand[i].drawFunc();
    }

    //Remakes initial smoke objects if cycle is completed
    if(cycle) {
        initialSmokes();
        cycle = false;
    }
    
    image(earth,300,420);
    image(airplane, 140, 100);
    image(car, 210, 80);
    image(factory, 300, 55);
    push();
    rotate(radians(7));
    image(deforestation, 400, 20);
    image(beach, 500, 100);
    pop();
    fill(0);
    textSize(18);
    texts.push(text('4 Main Components:',430,450));
    noFill();

    //Draws smokes objects
    for(var i = 0 ; i < loadSmokes.length ; i++) {
        loadSmokes[i].drawFun();
    }

    //Moves smoke and text based on number pressed condition
    if(numPressed == 2) {
        fill(0);
        textSize(16);
        texts.push(text('•Transportation',430,470))
        noFill();
        while( loadSmokes[numPressed - 2].y < 340 ){
            loadSmokes[numPressed - 2].stepFun();
            loadSmokes[numPressed - 2].drawFun();
        }
    }
    if(numPressed == 3) {
        fill(0);
        textSize(16);
        texts.push(text('•Factories',430,480))
        noFill();
        while( loadSmokes[numPressed - 2].y < 320 ){
            loadSmokes[numPressed - 2].stepFun();
            loadSmokes[numPressed - 2].drawFun();
        }
    }
    if(numPressed == 4) {
        fill(0);
        textSize(16);
        texts.push(text('•Deforestation',430,490))
        noFill();
        while( loadSmokes[numPressed - 2].y < 330 ){
            loadSmokes[numPressed - 2].stepFun();
            loadSmokes[numPressed - 2].drawFun();
        }
    }
    if(numPressed == 5) {
        fill(0);
        textSize(16);
        texts.push(text('•Other livelihoods',430,500))
        noFill();
        while( loadSmokes[numPressed - 2].y < 370 ){
            loadSmokes[numPressed - 2].stepFun();
            loadSmokes[numPressed - 2].drawFun();
        }
    }
}
function keyTyped() {
    //Resets smokes and changes cycle to true to show that a cycle has occured
    if(numPressed == 0){
        loadSmokes.splice(0,loadSmokes.length);
        cycle = true; 
    }
    //Changes thermometer and hand to next image
    if(key == 'g' || key == 'G') {
        print(numPressed);
        loadTherm.push(makeThermometer(numPressed));
        loadHand.push(makeHand(numPressed));
        loadTherm.splice(0,loadTherm.length-1); //Deletes previous thermometers to not overlap
        numPressed++;
    }
    //Resests after cycle
    if(numPressed == 6){
        numPressed = 0;
    }
}

//Function to draw initial smokes
function initialSmokes() {
    loadSmokes.push(makeSmoke(210,140));
    loadSmokes.push(makeSmoke(295,130));
    loadSmokes.push(makeSmoke(380,145));
    loadSmokes.push(makeSmoke(460,240));
}

This final project’s theme is climate change and I decided to show in my work, an interactive image, how human actions affect the Earth and cause climate change. In the image, you can see a picture of a human palm inside of which there’s our planet Earth – this represents the idea that everything is in our hands and that everything we do affects our planet: we can either save it and give it protection or kill it. Either way, everything depends on us. On the first four fingers, from pointer to pinky, we can see the smoke of evaporation coming down from top to middle towards the Earth and each finger in this group of four represents four components that cause global climate change: transportation such as cars and planes, factories, deforestation, and other livelihoods of a person such as construction works, food, the garbage that isn’t getting recycled, increased use of electricity, etc. Starting from the pointer finger, an interactive image will start working when a user clicks on a key “g” or “G” which stands for “Go”, the first smoke will go down towards the Earth and the arrow on the thumb will make a small step towards the thermometer which increases in temperature. Moreover, with every click we can see the name of each component pop up on the screen to tell the user what it is. Then when the user clicks on the key again, the second smoke will slide down towards the Earth, the arrow makes another step, and the temperature gets higher. The same thing will happen to the third and fourth click. However, when the user clicks on the key fifth time, the arrow on the thumb will make the final step from the Earth towards to top of the finger which will make the temperature on the thermometer fill to the top which represents the maximum hotness. This project shows that those four human components affect the Earth in a negative way and when we combine them all together, it increases the speed with which the temperature gets higher.
I was inspired to do this project because as a little girl I always liked winters due to a big amount of snow: I would go snow sliding to the hills with my family every year and it was so much fun! However, in the past few winters, there were only a few days when it snowed meaning our Earth is getting warmer day by day and we cannot do some of our favorite winter activities anymore.
If I had more time to do this project then I would have added more pictures such as I would do more research to find more components that affect the Earth but so far I decided to stick with 4 big, main, and obvious factors.

My Final Project Modified for WordPress

//Chuong Truong;
//cbtruong;
//FINAL PROJECT;
//Modified for WordPress;

//array that holds all existing trash objects;
var trashPieces = [];

//this array holds all of the indices of trash objects that have been clicked on - removed;
//then it uses the splice method of arrays to remove that object 
//and erase it from the trashPieces array;
//and the screen as well;
//this effectively removes it;
var trashPiecesRemoval = [];

//gameOver condition that is used for the game overall;
//when true it ends the game and transfers the screen to facts;
var gameOver = false;

//number of current trash objects on screen;
var trashNumCurrent = 0;

//number of trash objects removed;
var trashGone = 0;

//variables that holds the time;
//numSecondsPast is how many seconds have passed;
var numSecondsPast = 0;
//while numSecondsAllowed is how many seconds are left for the player;
//the initial number of seconds allowed for the player is 120 or 2 minutes;
//the reason for two seperate variables is more flexibility for time as a feature;
var numSecondsAllowed = 120;
//the frameCount variable needed for the timer Function that counts time;
var frameCount = 0;

//the variable that determines how many trash objects can be drawn at a time;
var spawnNum = 20;

function setup() {
    //modified canvas size;
    createCanvas(600, 600);
    //creates sea background;
    background(91, 161, 176);
    
    //creates the first initial trash objects;
    for (var l = 0; l < 20; l++){
        makeTrash(random(80, 520), random(80, 520), floor(random(5)), 
            floor(random(0,8)), floor(random(0,8)), random(360), true);
    }


    //sets the frameRate to 30;
    frameRate(30);
    
}

function draw() {
    //calls the display function;
    displays();
    
    //print method used for debugging, it shows how many seconds have passed;
    print(numSecondsPast);
    //increases the frameCount every iteration;
    frameCount++;

    //calls the countTime function that counts the time;
    countTime(frameCount);
    
    //This is the main checker for whether the game is over or not;
    //Namely, it checks for if the time left is 0 or not by way of comparing;
    //the number of seconds allowed - numSecondsAllowed;
    //and the number of seconds that have passed - numSecondsPast;
    //if there is still time, then gameOver is false;
    //And the game runs as usual;
    if (numSecondsAllowed > numSecondsPast){
        gameOver = false;
        //draws all of the existing trash objects;
        for (var m = 0; m < trashNumCurrent; m++){
            var pT = trashPieces[m];
            pT.drawFunction();
        }
    
        //removes any trash objects deemed nonexistant;
        //also uses background to reset the drawing board and removed previous 'drawings' of the object;
        for (var r = 0; r < trashPiecesRemoval.length; r++){
            background(91, 161, 176);
            trashGone++;
            trashPieces.splice(trashPiecesRemoval[r], 1);
        }

        //completely wipes out the trashPiecesRemoval array to allow it to be filled with indices again;
        while (trashPiecesRemoval.length > 0){
           trashPiecesRemoval.shift();
        }
        
        //calls the spawnMoreTrash function;
        spawnMoreTrash();
        }
        //if the time left is 0, then it calls the factScreen function that ends the game;
        else {
            factScreen(facts(floor(random(0, 9))));
    }

    //prints out the current trashPieces array length for debugging;
    trashNumCurrent = trashPieces.length;
    print(trashPieces.length);
    
    //this switch and case checks for the total amount of trash removed;
    //if it passes certain milestones, the spawnNum of trash increases with a one time added bonous of more time;
    switch (trashGone){
        case 40: spawnNum = 25; numSecondsAllowed + 60; break;
        case 80: spawnNum = 30; numSecondsAllowed + 50; break;
        case 120: spawnNum = 35; numSecondsAllowed + 40; break;
        case 1600: spawnNum = 40; numSecondsAllowed + 30; break;
    }

}

//draws the scoreboards, title, time left, and directions;
function displays (){
    stroke(1);
    strokeWeight(0.5);

    //code for top left display of trash removed and trash left;
    fill(255);
    rect(10, 10, 150, 45);

    fill(0);
    var trashNumDisplay = 'Trash Left: ' + trashNumCurrent;
    text(trashNumDisplay, 15, 45);
    var scoreDisplay = 'Trash Removed: ' + trashGone;
    text(scoreDisplay, 15, 25);

    //code for upper middle display of the title of the game;
    fill(240, 133, 11);
    rect(276.5, 15, 100, 35);
    
    fill(0);
    text("Trash-Pick-Up", 285.5, 35);

    //code for upper right display of time left for trash removal;
    fill(255);
    rect(510, 10, 80, 35);

    fill(0);
    var timeLeftDisplay = 'Time: ' + (numSecondsAllowed - numSecondsPast);
    text(timeLeftDisplay, 520, 32.5);

    //code that gives the game directions;
    fill(200, 186, 234);
    rect(60, 555, 480, 40);

    fill(0);
    var directions = 'Click on the red dots to remove the trash before time runs out!  Watch out for misclicks!';  
    var directions2 = 'If you do not see any trash but the trash left is not 0, hit any key to respawn them!';
    text(directions, 65, 570);
    text(directions2, 65, 585);
}


//All of the code below was originally in seperate files to ensure readability and ease of access;
//Due to WordPress, I had to combine all 4 files into 1;

//file that creates the trash objects;

//constructor for the trash object;
//it takes 6 numbers and a boolean value;
//xPost and yPos is the object's main position as it is the first vertex in a given object;
//each object is a randomly constructed shape made with the beginShape() and endShape() function;
//it then takes cPre, a random number that determines its color;
//After that comes the "random points" - which are random numbers added or subtracted to the starting vertex;
//These numbers are stored in an array;
//There are 2 sets of 8 different arrays, one for x and one for y;
//ang is the angling of each object;
//existBol is the boolean value that determines if the object still exists or not;
//it has a drawFunction, drawTrash which handles the drawing;
//it also has a changeFunction. mousePressed, which changes its state as an instance still on the screen;
//and as an existant object within any of the arrays;
function makeTrash (xPos, yPos, cPre, pointsPresetX, pointsPresetY, ang, existBol){
    var t = {x: xPos, y: yPos, col: cPre, 
        pXA: pointsPresetX, pYA: pointsPresetY,
        a: ang, e: existBol, 
        drawFunction: drawTrash, changeFunction: mousePressed};
    trashPieces.push(t);
}

//the drawTrash function is the drawFunction of each trash object;
function drawTrash (){
    //this initial condition decides if it is still on screen (being drawn);
    if (this.e == true){
        stroke(0);

        //switch and case for the color of a given trash object;
        switch (this.col) {
            case 0: fill(228, 200, 98); break;
            case 1: fill(169, 142, 144); break;
            case 2: fill(156, 161, 117); break;
            case 3: fill(135, 206, 250); break;
            case 4: fill(255, 255, 255); break;
        }
  
        //this creates each object, by using beginShape() and endShape(), with numbers that are added to the original vertex;
        //a 7 pointed shape is made;
        //Due to the presence of 8 arrays and a seperate number that determines which array is for x and for y, there are 64 possible combinations;
        //The numbers for each array set is entered and it returns an array to be used for each specific trash object;

        //for the x values added to the original vertex;
        switch(this.pXA){
            case 0: var x = [20, -30, 10, 50, -60, 70]; break;
            case 1: var x = [30, -40, 40, 20, 30, 50]; break;
            case 2: var x = [50, -60, 25, 65, -35, 40]; break;
            case 3: var x = [-30, 70, -30, 40, -25, 65]; break;
            case 4: var x = [20, 30, 10, -50, 60, 30]; break;
            case 5: var x = [60, -20, 35, 20, 45, -20]; break;
            case 6: var x = [-20, 30, 10, -50, 60, 30]; break;
            case 7: var x = [60, -20, 35, 20, 45, -20]; break;
        }
        //for the y values added to the original vertex;
        switch(this.pYA){
           case 0: var y = [40, 30, 10, -25, 30, 20]; break;
           case 1: var y = [35, 25, 10, 50, -70, -40]; break;
           case 2: var y = [20, -0, 10, -10, 40, 20]; break;
           case 3: var y = [-30, 50, 20, 25, 25, -30]; break;
           case 4: var y = [20, 35, -25, -35, 20, 10]; break;
           case 5: var y = [30, -45, 20, -45, 35, 40]; break;
           case 6: var y = [40, 35, 30, -40, 60, -50]; break;
           case 7: var y = [-50, -10, 20, 35, 40, 30]; break;
        }
    
        //with the color and vertex arrays determined, the actual shape is made;
        //it is put within a push and pop for extra variation by way of rotation;
        //the actual tricks for rotation are then applied;
        push();
        translate(this.x, this.y);
        rotate(radians(this.a));
        beginShape();
        vertex(0, 0);
        for (var i = 0; i < 8; i++){
            vertex(0 + x[i], 0+ y[i]);  
        }
        endShape(CLOSE);
        //an additional red circle is added at the original vertex to make it easier to click on;
        fill(255, 0, 0);
        circle(0, 0, 5);
        pop();
    }
}

//this function is the function that changes each object;
//it decides whether each object still exists or not after each click;
function mousePressed() {
    //I made the mouseX and mouseY coordinates into mX and mY respectively for easier typing;
    var mX = mouseX;
    var mY = mouseY;
    
    //the flag variable that becomes true if the player clicks on anything but a trash object's red dot;
    //it is false at the beginning to ensure that a new click is not automatically a misclick;
    var secondOff = false;

    //as the player clicks the mouse, a for loop checks the entire trashPieces array - which;
    //holds all of the existing trashPieces;
    //it checks whether mX and mY are close to the original x and y of any given trash;
    //if the distance is less than 30, then it sets the specific trash object to false;
    //it then pushes the object's index into the trashPiecesRemoval array;
    //this array holds all of the indices of trash objects that have been clicked on - removed;
    //then it uses the splice method of arrays to remove that object and erase it from the trashPieces array;
    //and the screen as well;
    //this effectively removes it;
    for (var i = 0; i < trashPieces.length; i++){
        var rI = i;
        pT = trashPieces[i];
        if (dist(mX, mY, pT.x, pT.y) < 10){
            pT.e = false;
            trashPiecesRemoval.push(rI);
        }
        //if the player clicks and does not remove a piece of trash, it sets the flag variable called secondOff;
        //this in turn makes the following if statement outside of the for loop execute, taking a second off the clock;
        else {
            secondOff = true;
        }
    }
    
    //this function takes a second off of the clock for misclicks;
    if (secondOff == true){
        numSecondsPast++;
    }
}

//this function spawns more trash everytime all of the trash has been removed and the trashPieces array is empty;
function spawnMoreTrash (){
    //it checks to see if the game is over;
    //if true it executes the rest of the code;
    if (gameOver != true){
        //it checks if trashPieces is empty;
        //if true, it creates more trash according to the spawnNum variable;
        if (trashPieces.length == 0){
            for (var l = 0; l < spawnNum; l++){
                makeTrash(random(80, 620), random(80, 520), floor(random(5)), 
                floor(random(0,8)), floor(random(0,8)), random(360), true);
            }
            //this adds more time once a new set of trash has been spawned;
            numSecondsAllowed = numSecondsAllowed + (spawnNum - 10);
            //this gives a change of randomly increasing the spawnNum as well;
            if (floor(random(51)) > 25){
                spawnNum += 2;
            }
        }
    }
}

//a vital function, the keyPress function resets the board;
//Once any key is pressed, the board is redrawn with the same amount of trash pieces left;
//as well as the same amount of time left;
//this is key as there are times where a glitch occurs where all but one or two trash pieces;
//are drawn - meaning they cannot progress as the time winds down;
//Due to not being drawn, the player unfairly loses due to the glitch;
//this keyPress function prevents this by redrawing the board with the same amount of time and trash;
function keyPressed(){
    //this variable is the total amount of trash that has to be redrawn, it is made 0;
    //to ensure that everytime it is called, the number of trash that needs to be redrawn is allowed to change;
    var trashLeftReset = 0;

    //This for loop does the same thing as the loop that removes clicked-on trash;
    //instead of specifically clicked on trash, it removes all of them;
    //It counts how many were removed;
    //Due to this being intended for trash objects that do not appear;
    //It initiates the first step of redrawing them on the board;
    //Therefore, if used for any other purpose, such as cheating, it does nothing but reset the board;
    for (var i = 0; i < trashPieces.length; i++){
        pT = trashPieces[i];
        trashPiecesRemoval.push(pT);
        //this variable offsets the fact that everytime trash is removed, the trash removal counter goes up;
        //this is to prevent cheating as well as the trashGone variable is key for other conditions;
        trashGone--;
        
        //for each piece of trash removed, the counter for trash that needs to be redrawn goes up as well;
        //this is for the following for loop that draws any undrawn trash objects;
        trashLeftReset++;
    }

    //this for loop does the second step of redrawing the board, namely drawing any unremoved and undrawn trash pieces;
    //albiet as a different object altogether;
    for (var l = 0; l < trashLeftReset; l++){
        makeTrash(random(80, 620), random(80, 520), floor(random(5)), 
        floor(random(0,8)), floor(random(0,8)), random(360), true);
    }
}

//separate code file that deals with writing out the facts after the player loses;

//the facts function itself takes a random number and then uses a case and switch for;
//the corresponding fact related to pollution in the ocean;
//I chose to use case and switch due to its simplicity;
function facts (inputNum){
    var factString = "";
    switch(inputNum) {
        case 0: factString = "We dump 8 million tons or 17.6 billion pounds of \nplastic into oceans every year."; return factString; break;
        case 1: factString = "Plastics are responsible for over 80% of the negative \neffects on sea animals."; return factString; break;
        case 2: factString = "By 2050, estimations say that there will be more \nplastic than fish in the ocean when it comes to \nweight alone."; return factString; break;
        case 3: factString = "Over 100,000 marine animals die from eating plastic \nor being trapped by it every year."; return factString; break;
        case 4: factString = "Plastic takes approximately 400 years to degrade\n - when it does in the ocean, more harmful chemicals\n are released."; return factString; break;
        case 5: factString = "Around 70% of ocean garbage are uncleanable \nbecause they sink into the seabed."; return factString; break;
        case 6: factString = "90% of seabirds have plastics in their stomachs."; return factString; break;
        case 7: factString = "300 million tons of plastic is created \nevery year - about 50% is single use."; return factString; break;
        case 8: factString = "Microplastics have been found in Arctic sea ice."; return factString; break;
    }     
}

//related to facts, it takes the fact string and uses it as text;
//this function is the function that causes the game to end;
//it draws the relevant screen and ends the game with a noLoop() call;
function factScreen (factInput){
    background(53, 56, 57);
    fill(255);
    strokeWeight(2);
    stroke(255, 0, 0);
    rect(200, 270, 300, 60);
    stroke(0);
    strokeWeight(0.5);
    fill(0);
    text(factInput, 210, 290);
    stroke(255);
    noLoop();
}


//facts cited from:
//https://www.conservation.org/stories/ocean-pollution-11-facts-you-need-to-know
//https://www.rubicon.com/blog/ocean-pollution-facts/
//https://www.conserve-energy-future.com/various-ocean-pollution-facts.php
//https://www.condorferries.co.uk/marine-ocean-pollution-statistics-facts
//https://www.ehn.org/ocean-plastic-pollution-2654378379/what-can-be-done


//code for the timer that is utilized in the game as a condition for losing;
//the function takes the input of the frameNumber - which is the count of;
//every iteration of the draw loop (the main loop of the game);
//everytime the frameNumber hits 60, numSecondsPast is increased by 1;
//the function also takes the a boolean variable called resetBoolean;
//if the boolean entered is true, it resets the global variable numSecondsPast to 0;
//this is to ensure that everytime a new timer is set, the number of seconds passed 
//is also reset;

function countTime (frameNumber){
    if ((frameNumber % 60) == 0){
        numSecondsPast++;
    }
}


//I got the inspiration for the timer from a program called "countdown timer"
//by user marynotari on the p5js.org site;
//the link for the code: https://editor.p5js.org/marynotari/sketches/S1T2ZTMp-

[Note, I have modified my Project to make it functional for WordPress, the original Canvas size was meant to be 700 by 600, but had to be changed to 600 to 600, therefore, many values regarding specific spots on the canvas has been changed.]

For inspiration, I ran through what I knew about climate change.
Rather than focusing on ways to combat it, I really wanted to tell the effects of it. So, I decided to make an interactive game that showed the depressing facts about ocean pollution. Most of the facts deal with plastics, which are the main objects of the game, the trash objects are supposed to represent.

The game is a simple score as high as possible before time runs out.
The player is given initially 20 trash pieces on a screen and must click on them (the red dots that is their origin as they are shapes made with the beginShape() function). By clicking on them, they are removed and once the number of trash that needs to be removed hits 0, a new set is spawned (if any are undrawn, clicking a key will spawn them in by redrawing the board). Furthermore, there is a timer, so if time runs out (and it always will) the player loses. If any of their clicks are not on the red origin of a trash object, then they have a second deducted from their time. Once losing, they face a black screen with a single text block that tells a fact about ocean pollution.

The fact that the trash is hard to click on is meant to show how hard it is to clean up/fight ocean pollution once it has made its way fully into the ocean. Furthermore, the time limit and countdown are meant to show that we really need to fix ocean pollution now. Finally, the spawning of trash (with the number of a set increasing certain times) is meant to show how the problem is becoming worse and worse. Overall, the program is meant to show that ocean pollution is something that we must fix now because the problem is truly getting worse and harder to solve.

If I had more time, I would have added extra features like making it so that trash can “dissappear” meaning that they are no longer removable/clean-upable, just like in real life as trash in the ocean sink to the seafloor and are impossible to remove. I would’ve also found a way for “true” randomization of the trash, as right now the trash is 7-point polygons that have a set number of versions (64). True randomization is a variable number of points in each polygon and where those points are relation to the original vertex.

I hope you enjoyed my project!

I got the ocean pollution facts from:
https://www.conservation.org/stories/ocean-pollution-11-facts-you-need-to-know
https://www.rubicon.com/blog/ocean-pollution-facts/
https://www.conserve-energy-future.com/various-ocean-pollution-facts.php
https://www.condorferries.co.uk/marine-ocean-pollution-statistics-facts
https://www.ehn.org/ocean-plastic-pollution-2654378379/what-can-be-done