Author: Yash

In my final project, the user starts at the year 1900 where there’s only fish in the ocean happily floating around and the thermometer on the left is quite low. As the reader reads the message on the top of the screen, they click the mouse and the year changes to 1940 where there is now oil barrels floating in the ocean. This addition of similar pollutants (oil barrels, plastic water bottles, face masks, and plastic bags) continues one by one as the user continues clicking the mouse. In the final click, year 2100, the user ends up killing the earth.

To do this project, I did some research onto the type of ocean pollutants that become more and more common as time passes. For example, in 2020, my animation spawns face masks in the ocean, which is a reflection of what truly happened in the real world due to COVID-19. The expectation from the user is quite straightforward as they just have to click their mouse and the animation progresses.

I think if I had more time, I would have changed more elements like the number of fish in the ocean, the color of the ocean gets dirtier, and the fish would have had expressions that go from happy to sad. Although I was unable to add these features, I am quite satisfied with how my project turned out.

Download

// Yash Mittal
// Section D 
// Final Project 

var waveValue = []; //array for front wave
var waveValue2 = []; //array for back wave
var noiseParam = 0.0001;
var noiseParam2 = 0.0001;
var noiseStep = 0.01;
var noiseStep2 = 0.01;
var x = []; //x value of fish
var y = []; //y value of fish
var dx = []; //x direction of fish
var c = []; //color for fish
var count = 0; //variable to keep track of user mousePressed
var clouds = 'https://i.imgur.com/RLqcPK7.png' //cloud image
var cloudsX = 0; //x value for 1st cloud
var cloudsX1 = -160; //x value for 2nd cloud
var cloudsDx = 2; //x direction speed for 1st cloud
var cloudsDx1 = 1; //x direction speed for 2nd cloud
var oilBarrel = 'https://i.imgur.com/nHrLCul.png' //oil barrel image
var numBarrels = 5; //number of barrels that spawn
var oilBarrelList = []; //array for barrels
var waterBottles = 'https://i.imgur.com/Xxl9tDk.png' //water bottle image
var numBottles = 10; //number of plastic water bottles that spawn
var waterBottlesList = []; //array for bottles
var faceMasks = 'https://i.imgur.com/wgsNqdq.png' //face mask image
var numMasks = 10; //number of face masks that spawn
var faceMasksList = []; //array for face masks
var plasticBag = "https://i.imgur.com/L8v1yKk.png" //plastic bag image
var numBags = 10; //number of plastic bags that spawn
var plasticBagList = []; //number of plastic bags that spawn
var sun = 'https://i.imgur.com/ftQzVK5.png'; //sun image
var angle_sun = 0; //rotation angle variable for sun
var thermometer = 'https://i.imgur.com/zcV3Srl.png'; //thermometer image
var deadEarth = 'https://i.imgur.com/tAGCTqA.png'; //dead earth image

function preload() {

    pimg = loadImage (clouds);
    oilImage = loadImage (oilBarrel);
    bottleImage = loadImage (waterBottles);
    maskImage = loadImage (faceMasks);
    plasticImage = loadImage (plasticBag);
    sunImage = loadImage (sun);
    thermoImage = loadImage (thermometer);
    earthImage = loadImage (deadEarth);

}

function setup () {

    createCanvas (600, 400);
    frameRate (15); 

    makeOil();

    makeBottle();

    makeMask();

    makeBag();

    for (var i = 0; i < 50; i ++) { //loop for fish value

        x [i] = random (25, width - 25);
        dx [i] = random (-5, 5);
        c [i] = color (random (0, 130), random (0, 130), random (0,130));
    }
}

function draw () {

    background (220);

    sunRotate(); //rotating circle

    cloudsP (); //drawing clouds

    timelineBar ();

    drawWaves1 ();

    for (i = 0; i < 20; i = i + 1) { //loop for fish value

        fill (c[i]);
        fish (x [i], waveValue [i] + 110, dx [i]); //making y value same as waveValue [i]
        x [i] = x [i] + dx [i];
        if (x [i] >= width - 25 || x [i] < 25 ) {
            dx [i] = - dx [i];

        }
   }

    highlightRect ();

    if (count >= 1) {

        for (var i = 0; i < numBarrels; i++) {
            updateOil(i); //moves oil barrels
            showOil (); //displays oil barrels
        }

        fill ("red");
        rect (17, 194, 8, 6); //increasing avg temp
    }

    if (count >=2) {

        for (var i = 0; i < numBottles; i++) {

            updateBottle (i);
            showBottle ();
        }

        rect (17, 185, 8, 13); //increasing avg temp
     }

     if (count >=3) {

        for (var i = 0; i < numMasks; i++) {

            updateMask (i);
            showMask ();
        }

        rect (17, 168, 8, 17); //increasing avg temp
     }

     if (count >=4) {

        for (var i = 0; i <numBags; i++) {

            updateBag (i);
            showBag ();
        }

        rect (17, 155, 8, 20); //increasing avg temp
     }

    image(thermoImage, 10, 140, 30, 80);

    drawWaves2 ();

    if (count >=5) {

        fill (0);
        rect (0, 0, width, height);
        image (earthImage, width / 2 - 240, height / 2 - 150, 250, 250);
        textSize(15);
        fill (255);
        text ("Congratulations, you killed the earth!", 330, 200);
     }  
}

function sunRotate () {

    push();
    rotate (radians(angle_sun));
    imageMode (CENTER);
    image (sunImage, 0, 0, 170, 170);
    pop();
    angle_sun = angle_sun + 2; //iterating angle for sun
}

function makeBag () {

    for (var i = 0; i < numBags; i++) {

        tx = random (10, width - 10); //random x value for bags
        ty = 0; //unassigned y value
        plasticBagList.push ({x:tx, y:ty, show:bagDraw, move: bagMove}); //create object & pushing in array
    }
}

function updateBag (i) { //function that holds y value of bottle and move function

    plasticBagList [i].y = waveValue[i] + 120; 
    plasticBagList [i].move ();
}

function showBag () { //function to display mask

    for (var i = 0; i < 10; i++) {

        plasticBagList [i].show ();
    }
}

function bagDraw() {

    image (plasticImage, this.x, this.y, 35, 35); //calling image

}

function bagMove () {

    this.x = this.x - random (0, 3);

    if (this.x < -25) { //if bags exits canvas from left, it appears on right

        this.x = width + 20;
    }
}

function makeMask () {

    for (var i = 0; i < numMasks; i++) {

        tx = random (10, width - 10); //random x value for masks
        ty = 0; //unassigned y value
        faceMasksList.push ({x:tx, y:ty, show: maskDraw, move: maskMove}); //creating object & pushing in array 
    }
}

function updateMask (i) { //function that holds y value of bottle and move function

    faceMasksList [i].y = waveValue[i] + 100;
    faceMasksList [i].move ();
}

function showMask () { //function to display mask

    for (var i = 0; i < 10; i++) {

        faceMasksList [i].show ();
    }
}

function maskDraw () {

    image (maskImage, this.x, this.y, 30, 30); //calling image
}

function maskMove () {

    this.x = this.x - random (0, 2);

    if (this.x < -25) { //if masks exits canvas from left, it appears on right

        this.x = width + 20;
    }
}

function makeBottle () {

    for (var i = 0; i < numBottles; i++) {

        tx = random (25, width - 25); //random x value for bottles
        ty = 0; //unassigned y value
        waterBottlesList.push ({x:tx, y:ty, show: bottleDraw, move: bottleMove});//creating object & pushing in array
    }
}

function updateBottle (i) { //function that holds y value of bottle and move function

    waterBottlesList [i].y = waveValue[i] + 90;
    waterBottlesList [i].move ();
}

function showBottle () { //function to display bottles

    for (var i = 0; i < 10; i++) {

        waterBottlesList [i].show ();
    }
}

function bottleDraw () {

    image (bottleImage, this.x, this.y, 30, 30); //calling the image
}

function bottleMove () {

    this.x = this.x + random (0, 2);

    if (this.x > width) { //if bottles exits canvas from right, it appears on left

        this. x = -20; 
    } 
}

function makeOil () {

    for (var i = 0; i < numBarrels; i++) {

        tx = random (25, width - 25); //random x value for barrels
        ty = 0; //unassigned y value
        oilBarrelList.push({x:tx, y:ty, show: oilDraw, move: oilMove}); //creating object & pushing in array 
    }
}

function updateOil (i) { //function that holds y value of barrel and move function

    oilBarrelList [i].y = waveValue [i] + 100; //assigning waveValue to y value 
    oilBarrelList [i].move (); //move function
}

function showOil () { //function to display oil

    for (var i = 0; i < 5; i++) { //for loop to display barrels
        oilBarrelList [i].show();
    }
}

function oilDraw (){

        image(oilImage, this.x, this.y, 35, 58); //drawing oil
}

function oilMove () { //function iterating x value of each barrel

        this.x = this.x - random (0, 2);

        if (this.x < -40) {

            this.x = 600
        } 
}

function mousePressed () {

         count = count + 1; //count increases each time mouse is pressed
    }

function cloudsP () {

    image (pimg, cloudsX, 50, 160, 160);
    image (pimg, cloudsX1, 20, 150, 150);

    cloudsX = cloudsX + cloudsDx;
    cloudsX1 = cloudsX1 + cloudsDx1;

    if (cloudsX >= width) {

        cloudsX = -160;
    }

    if (cloudsX1 >= width) {

        cloudsX1 = -160;
    }
}

function fish (x, y, dx) { //fish function

    fill (c);
    ellipse (x, y, 20, 10);

    if (dx < 0) { //if fish is going left

        triangle (x + 10, y, x + 15, y + 5, x + 15, y - 5);

    } else if (dx >= 0) { //if fish is going right

        triangle (x - 10, y, x - 15, y + 5, x - 15, y - 5);

    }
}

function highlightRect () {

    if (count == 0) { 

        fill ("green");
        rect (85, 57, 20, 40); //1900

    }  

    if (count == 1) {

        fill("green");
        rect (165, 57, 20, 40); //1940

    }  

    if (count == 2) {

        fill ("green");
        rect (245, 57, 20, 40); //1980
    }

    if (count == 3) {

        fill ("green");
        rect (325, 57, 20, 40); //2020
    }

    if (count == 4) {

        fill ("green");
        rect (405, 57, 20, 40); //2060
    }

    if (count == 5) {

        fill ("green");
        rect (485, 57, 20, 40); //2100
    }

    print(count);
}

function drawWaves1 () { // water wave 1 function

    for (var i = 0; i < width / 5 + 1; i++) {

        var n = (noise(noiseParam));

        var value = map (n, 0, 1, 80, height);

        waveValue.push(value); 

        noiseParam = noiseParam + noiseStep;
    }

    beginShape (); // drawing randomised wave

    vertex (0, height); // point 1 

    for (var i = 0; i <= width / 5; i++) { // point 2 random

        fill (116, 205, 235, 200); //water with alpha value
        noStroke();

        vertex (i * 5, waveValue [i] + 80); // randomised wave

    }

        waveValue.shift (); // making wave move by removing first element
        waveValue.push (map (noise (noiseParam), 0, 1, 80, height)); // adding random array value
        noiseParam = noiseParam + noiseStep;

        vertex (width, height); // point 3

        endShape (CLOSE);

    }

function drawWaves2 () { // water wave 2 function

        for (var i = 0; i < width / 5 + 1; i++) {

        var n1 = (noise(noiseParam2));

        var value2 = map (n1, 0, 1, 40, height);

        waveValue2.push(value2); 

        noiseParam2 = noiseParam2 + noiseStep2;
    }

    beginShape (); // drawing randomised wave

    vertex (0, height); // point 1 

    for (var i = 0; i <= width / 5; i++) { // point 2 random

        fill (116, 205, 235, 90); //water with alpha value
        noStroke();

        vertex (i * 5, waveValue2 [i] + 40); // randomised wave 2

    }

        waveValue2.shift (); // making wave move by removing first element
        waveValue2.push (map (noise (noiseParam), 0, 1, 40, height)); // adding random array value
        noiseParam2 = noiseParam2 + noiseStep2;

        vertex (width, height); // point 3

        endShape (CLOSE);

    }

function timelineBar () { //timeline function

        stroke (0);
        strokeWeight(5);
        line (20, 40, 20, 70); //left line
        line (20, 55, 580, 55); //middle line
        line (580, 40, 580, 70); //right line

        for (var a = 0; a < 6; a++) { // for loop for date rectangles 

            noFill();
            strokeWeight(1);
            rect (a * 80 + 85, 57, 20, 40);
        }

        textSize (30);
        fill (0);
        text ("Click mouse to time travel", 120, 40);

        textSize (15);
        text ("1900", 78, 115);
        text ("1940", 158, 115);
        text ("1980", 238, 115);
        text ("2020", 318, 115);
        text ("2060", 398, 115);
        text ("2100", 478, 115);

    }