![[OLD SEMESTER] 15-104 • Introduction to Computing for Creative Practice](https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2023/09/stop-banner.png)
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.
// 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);
}