//bgoeke Sec. B Final Project
var gravity =0.3; // downward acceleration
var spring =0.7; // how much velocity is retained after bounce
var drag =0.0001; // drag causes particles to slow down
var np =0; // how many particles
var rpx =[];var rpy =[];var rpc =10000;var count =0;functionpreload(){
gas =loadImage("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/12/greenhousegas.png")
plant =loadImage("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/12/plant1.png")
bin =loadImage("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/12/rcbin2.png")}functionparticleStep(){this.age++;this.x +=this.dx;this.y +=this.dy;if(this.x > width -80&this.y > height -100){ // bounce off right wall
this.x =(width -80)-(this.x -(width-80));this.dx =0;}elseif(this.x <0){ // bounce off left wall
this.x =-this.x;this.dx =-this.dx * spring;}if(this.x < width -180&this.y > height -100){ // bounce off right wall
this.x =(width)-(this.x -(width));this.dx =0;}if(this.y > height-20){ // bounce off bottom
this.y =(height-20)-(this.y -(height-20));this.dy =0;}elseif(this.y <0){ // bounce off top
this.y =-this.y;this.dy =-this.dy * spring;} //deals with repeler
var rpx = mouseX
var rpy = mouseY
var dp =dist(this.x,this.y, rpx, rpy);var f = rpc /(Math.pow(dp ,2));var dirx =(this.x - rpx)/ dp;var diry =(this.y - rpy)/ dp;this.x += f * dirx;this.y += f * diry;this.dy =this.dy + gravity; // force of gravity
// drag is proportional to velocity squared
// which is the sum of the squares of dx and dy
var vs = Math.pow(this.dx,2)+ Math.pow(this.dy,2); // d is the ratio of old velocty to new velocity
var d = vs * drag; // d goes up with velocity squared but can never be
// so high that the velocity reverses, so limit d to 1
d =min(d,1); // scale dx and dy to include drag effect
this.dx *=(1- d);this.dy *=(1- d);}functionparticleDraw(){image(bin,180,290,210,120);image(gas,this.x,this.y,40,40);}
// create a "Particle" object with position and velocity
functionmakeParticle(px, py, pdx, pdy){
p ={x: px, y: py,
dx: pdx, dy: pdy,
age:0,
stepFunction: particleStep,
drawFunction: particleDraw
}return p;}functioncountParticle(){
count ++ //count = (count);
}functiongameOver(){if(int(count/1000)>80){rect(width/2, height/2, width, height);textSize(60);text('YOU WIN !',10, height/2)textSize(40);text(int((millis())/1000),100,250);text('seconds',155,250);noLoop();}}var particles =[];functionsetup(){createCanvas(400,400);frameRate(10);}
// draw all particles in the particles array
//
functiondraw(){background('lightblue');noStroke();fill(80);ellipse(80,100,160,50);ellipse(250,20,350,60);ellipse(100,100,100,50);stroke(0);strokeWeight(1);fill(255,10,5);textSize(15);text('How Fast Can You Get Rid Of The Gas?',120,20)fill(0,255,0);rectMode(CENTER);textSize(50);text(int(count/1000),10, height/2);image(plant,mouseX,mouseY,80,80);var newp =makeParticle(50,50,random(-10,10),random(-10,0));
particles.push(newp);stroke(0);strokeWeight(10);
newParticles =[]; //if (mouseIsPressed) {
//var newp = makeParticle(mouseX, mouseY,
//random(-10, 10), random(-10, 0));
//particles.push(newp);
//}
// newParticles will hold all the particles that we want to
// retain for the next call to draw() -- we will retain particles
// if the age is < 200 (frames). Initially, newParticle is empty
// because we have not found any "young" particles yet.
for(var i =0; i < particles.length; i++){ // for each particle
var p = particles[i];
p.stepFunction();
p.drawFunction();if(p.y > height -80& p.x > width-180&& p.x < width-80){
newParticles.push(p);countParticle()} // since we are "looking" at every particle in order to
// draw it, let's use the opportunity to see if particle[i]
// is younger than 200 frames. If so, we'll push it onto the
// end of newParticles.
if(p.age <3000){
newParticles.push(p);}}gameOver(); // now, newParticles has EVERY particle with an age < 200 frames.
// these are the particles we want to draw next time, so assign
// particles to this new array. The old value of particles, i.e.
// the entire array, is simply "lost" -- Javascript will reclaim
// and reuse the memory since that array is no longer needed.
particles = newParticles;}
For my program I wanted to create a falling game where you can manipulate multiple objects to get them in some sort of cup or final destination. In this game you use the plant as a repeler to direct the bad greenhouse gasses into the recycling bin. The goal is to get the counter to eighty and there’s some bonuses when you use the plant to bounce the gas around quicker. At eighty the game stops and gives you the time it took to finish the game. The ultimate competition in the game is to get the time as quickly as you can. The best time I got was 15 seconds. If I had some more time I wanted to make it so the recycling bin actually gets filled up with gases and overfills. I would’ve also liked to make more levels where there are existing obstacles that you have to get around with the plant.
var x=30;var xPos =0;var y =60var r =[55,98,145,195] //radius of visualization 1
var angle =10var cycle =1; //cycle through the different visualizations
var transparent =100 //used for key
var value =0var yr =1980
//precipitation data
var precip1 =[39.46,37.5,32.01,41.41,35.32,38.51,37.4,39.2,27.09,42.51]var precip2 =[52.24,32.02,36.65,38.26,41.34,28.89,45.47,34.21,36.21,40.12]var precip3 =[35.73,32.33,41.04,57.41,41.23,34.90,40.70,39.69,32.84,37.85]var precip4 =[44.24,41.74,36.65,36.84,40.56,35.01,42.15,57.83,52.46,39.33]
//used for text in vizualization 1
precipData =[39.46,37.5,32.01,41.41,35.32,38.51,37.4,39.2,27.09,42.51,52.24,32.02,36.65,38.26,41.34,28.89,45.47,34.21,36.21,40.12,35.73,32.33,41.04,57.41,41.23,34.90,40.70,39.69,32.84,37.85,44.24,41.74,36.65,36.84,40.56,35.01,42.15,57.83,52.46,39.33]var precipitation =[]var precipitation2 =[]var precipitation3 =[]var precipitation4 =[]
//temperature data
var temp =[49.5,49.1,50.4,50.5,50.4,50.6,51.7,52.3,51.0,50.2,53.3,54.2,50.9,51.8,51.6,51.8,50.3,50,54,52,50.8,52.2,52.6,50.3,51.6,51.6,52.3,52,50.9,51,51.9,52.8,54.2,51.5,50,52.5,54.2,53.6,52.3,52.4,53.3]
//images
var skyline;var backdrop;var buildings;var snow =[]functionpreload(){
skyline =loadImage("https://i.imgur.com/U7UJvXu.png")
backdrop =loadImage("https://i.imgur.com/vShIEDi.png")
buildings =loadImage("https://i.imgur.com/dfPYkth.png")}functionsetup(){createCanvas(480,480);background(220);for(var i =0; i <10; i++){
precipitation[i]=newObject();
precipitation[i].x = r[0]*sin(angle);
precipitation[i].y = r[0]*cos(angle);}for(var i =0; i <10; i++){
precipitation2[i]=newObject();
precipitation2[i].x = r[1]*sin(angle);
precipitation2[i].y = r[1]*cos(angle);}for(var i =0; i <10; i++){
precipitation3[i]=newObject();
precipitation3[i].x = r[2]*sin(angle);
precipitation3[i].y = r[2]*cos(angle);}for(var i =0; i <10; i++){
precipitation4[i]=newObject();
precipitation4[i].x = r[3]*sin(angle);
precipitation4[i].y = r[3]*cos(angle);}for(var i =0; i <500; i++){
snow[i]=newObject();
snow[i].x =random(30, width-30)
snow[i].y =random(60,300)
snow[i].dy =1;}}functiondraw(){ //cycles through the different climate patterns
if(cycle ==1){introduction()}elseif(cycle ==2){drawPrecipitation()}elseif(cycle ==3){drawTemp()}elseif(cycle ==4){drawSnowRecord()}else{
cycle =1}}functionintroduction(){ //first slide
background(0)fill(255)textSize(15)text("Data Visualizations on Climate Patterns in Pittsburgh",10, height/2)textSize(12)text("Click mouse to change data",10, height/2+20)}functiondrawPrecipitation(){background(255,229,227)fill(0)textSize(15)text("Average Precipitation in Pittsburgh (1980-2020)",10,25)frameRate(int(1.5))noStroke()
//bottom left key
fill(214,132,84,100)rect(10,420,30,10)fill(214,132,84,100-15)rect(10,431,30,10)fill(214,132,84,100-30)rect(10,442,30,10)fill(214,132,84,100-45)rect(10,453,30,10)textSize(8)fill(0)text("1980-1990",45,427)text("1990-2000",45,427+11)text("2000-2010",45,427+22)text("2010-2020",45,427+33)translate(width/2, height/2+15)fill(214,132,84,60)noStroke()circle(0,0,150)circle(0,0,240)circle(0,0,337)circle(0,0,440)fill(214,132,84,50)circle(0,0,70)
//ring of ellipses
for(var i=0; i<precip1.length; i++){noStroke()fill(0,255-precip1[i]*3, precip1[i]*4)rotate(radians(360/10))circle(precipitation[i].x, precipitation[i].y, precip1[i]/1.4)}for(var i=0; i<precip2.length; i++){var x = r[1]*sin(angle);var y = r[1]*cos(angle);noStroke()fill(0,255-precip2[i]*3, precip2[i]*4)rotate(radians(360/10))circle(precipitation2[i].x, precipitation2[i].y, precip2[i]/1.4) //change to object
}for(var i=0; i<precip3.length; i++){var x = r[2]*sin(angle);var y = r[2]*cos(angle);noStroke()fill(0,255-precip3[i]*3, precip3[i]*4)rotate(radians(360/10))circle(precipitation3[i].x, precipitation3[i].y, precip3[i]/1.4)}for(var i=0; i<precip4.length; i++){var x = r[3]*sin(angle);var y = r[3]*cos(angle);noStroke()fill(0,255-precip4[i]*3, precip4[i]*4)rotate(radians(360/10))circle(precipitation4[i].x, precipitation4[i].y, precip4[i]/1.4)}textSize(10)text(precipData[value],-10,10)
value+=1if(value>40){
value=0}textSize(15)text(yr,-15,0)
yr+=1if(yr >2020){
yr=1980}}functiondrawTemp(){background(235,88,52)textSize(15)fill(0)text("Average Temperature in Pittsburgh (1980-2020)",10,25)frameRate(25)translate(width/2,height/2) //background circles
fill(255,255,255,70)circle(0,0,400,400)fill(235,88,52)circle(0,0,150,150) //rotating circle data
for(var i =0; i<temp.length; i++){rotate(radians(angle)) // xPos=(300/2 * cos(temp[i]))
fill(temp[i]*3,0,0,80)circle(xPos,100, temp[i]/2)
angle+=.01}}functiondrawSnowRecord(){background(10,31,50)fill(255)text("Greatest Snowfall in One Day in Pittsburgh",10,25)push()textSize(10)text("Hover over the snowballs",10,40)pop()image(backdrop,20,92)circle(420,290,60)image(skyline,30,150)fill(250,250,250)circle(260,300,40)circle(150,305,30)image(buildings,30,272)circle(80,300,50)circle(330,290,80)pop() //data appears when hovering over snowballs
if((dist(330,290, mouseX, mouseY)<80/2)){text("March 13, 1993: 23.6 inches of snow",130,400)}if((dist(420,290, mouseX, mouseY)<60/2)){text("December 17, 1890: 22 inches of snow",130,400)}if((dist(80,300, mouseX, mouseY)<50/2)){text("January 8, 1884: 16.5 inches of snow",130,400)}if((dist(260,300, mouseX, mouseY)<40/2)){text("March 3, 1942: 16.3 inches of snow",130,400)}if((dist(150,305, mouseX, mouseY)<30/2)){text("March 5, 1902: 15 inches of snow",130,400)} //snow
for(var i=0; i<500; i++){noStroke()fill(255)circle(snow[i].x, snow[i].y,2)}}functionmousePressed(){ //changes visualzation when mouse clicked
cycle +=1;}
My project revolved around a polar bear and melting ice. There is an iceberg that the user melts by clicking, and a polar bear stuck on it. Small pieces of ice are generated as the main piece melts. The sky has clouds that move across the sky. There is also a sun/moon that moves across the sky as well. The polar also randomly moves around, but it’s constrained by the size of the iceberg. This project demonstrates the small scale effects of climate change.
If I had more time, I would have considered adding a second polar bear. The issue is that it would need to stay on the iceberg while also not bumping into its friend.
For my final project, I was inspired by the capitalist need for consumption over all else. Specifically, I’ve been concerned with over-fishing (I even wrote one of my essays to apply to CMU about fishing net pollution). So, I created a game that simulates capitalist motives in regards to fishing.
In the game, your cursor becomes a fishing hook which you can use to click on the fish and catch them. This will momentarily make the screen flash green and increase the amount of money you’ve made. However, once all the fish are caught, the coral dies off and the ocean becomes much less vibrant than it was before. Finally, a message will pop up warning the player about the effects of over-fishing. However, if the player goes for a minute and a half without killing all the fish, a message will pop up to congratulate them on being a conscious consumer.
I added everything I intended for the program, but I can definitely see how I could add more aspects to make this a more complete and polished screen, like a system to replenish the fish gradually. Also, moving seaweed or bubbles might be nice. But I am happy with this outcome.
//Elise Chapman
//ejchapma
//ejchapma@andrew.cmu.edu
//Section D
f=[]; //array for the fish
fClick=[]; //array for tracking the clicked
var sandy =[]; //for the sand
var noiseParam =5; //for the sand
var noiseStep =0.005; //for the sand
//color variables so that the coral can turn gray
var tube1;var tube2;var tube3;var brain1;var brain2;var gray1=125;var gray2=100;var moneyCount=0; //counts the money
var timer=0; //for tracking after fish die
var timerLive=0; //for tracking time for player for being good
functionsetup(){createCanvas(600,300);rectMode(CENTER);strokeJoin(ROUND);textAlign(CENTER,CENTER);noCursor();frameRate(10); //fish setup
for(var i=0; i<20; i+=1){
f[i]=newObject();
f[i].x=random(30,width-31);
f[i].y=random(75,height-31);
f[i].dx=random(-10,11); //change in x
r=int(random(0,256)); //g=int(random(0,256));
b=int(random(0,256));
f[i].c=color(r,0,b); //fish color
} //for the sand
noiseSeed(87);for(var i=0; i<(width/5)+1; i+=1){var n=noise(noiseParam);var value=map(n,0,1,0,height);
sandy[i]=value;
noiseParam+=noiseStep;} //tube colors
tube1=color(67,87,173) //blue
tube2=color(242,160,242); //pink
tube3=color(239,99,81); //red
brain1=color(97,208,149); //green
brain2=color(249,199,132); //yellow
}functiondraw(){if(f.length<1& timer>90){background(122,161,187); //darker ocean blue
}else{background(74,225,255); //ocean blue
}sandscape();coral();seaweed(15,100);seaweed(40,175);seaweed(250,200);seaweed(275,75);seaweed(300,125);seaweed(450,225);seaweed(550,175);seaweed(575,100); //fish
for(var i=0; i<f.length; i+=1){fish(f[i].x,f[i].y,f[i].dx,f[i].c);
f[i].x+=f[i].dx;if(f[i].x<15|| f[i].x>width-15){
f[i].dx=-f[i].dx;}} //bad ending
if(timer>120& f.length<1){push();translate(width/2,height/2)noStroke();fill(0,0,0,200);rect(0,0,600,300);strokeWeight(1);stroke(255);fill(255);text("You've chosen greed over the fish.\nOver-fishing is one of the greatest causes \nof devastation for our oceans.\nDoes making a quick buck make killing the coral worth it?\nI should hope not.\nAlways choose the environment.",0,0);pop();} //money
noStroke();fill(255); //white
rect(75,30,100,50,10,10,10,10);strokeWeight(2);stroke(0,122,4); //green
fill(0,122,4); //green
textSize(20);text("$"+str(moneyCount),75,30); //fish hook
if(f.length>0){fishHook(mouseX,mouseY);}if(f.length<1){
timer++;} //good ending
if(timerLive>6300& f.length>1){push();translate(width/2,height/2)noStroke();fill(0,0,0,200);rect(0,0,600,300);strokeWeight(1);stroke(255);fill(255);text("Congrats!\nYou've chosen to fish sustainably, or not at all.\nAs over-fishing continues to be a source of \ndevastation for our oceans, please continue\nto advocate for healthy fishing!\n:)",0,0);pop();}
timerLive++;}
//swimming fish
functionfish(x,y,dx,c){noStroke();fill(c);ellipse(x,y,40,30); //moving left
if(dx<0){triangle(x+15,y,x+30,y+15,x+30,y-15);triangle(x-20,y,x+10,y-25,x+10,y);triangle(x-20,y,x+10,y+25,x+10,y);fill(0);ellipse(x-7,y-3,9); //moving right
}elseif(dx>=0){triangle(x-15,y,x-30,y+15,x-30,y-15);triangle(x+20,y,x-10,y-25,x-10,y);triangle(x+20,y,x-10,y+25,x-10,y);fill(0);ellipse(x+7,y-3,9);}}
//landscape made of sand
functionsandscape(){ //sets up the sand
strokeWeight(3);stroke(242,231,189); //beige
fill(242,231,189); //beige
//creates the sand
push();translate(0,10);beginShape();vertex(0,height);for(var i=0; i<(width/5)+1; i+=1){vertex(i*5,sandy[i]);}vertex(width,height);endShape();pop();}
//coral reef has got to have coral
functioncoral(){ //tube coral
if(f.length<1& timer>70){fill(gray1);stroke(gray1);}else{fill(tube1);stroke(tube1);}strokeWeight(8);var place =500; //easier to adjust coral placement
quad(place,200,place+20,200,place+30,70,place,70);quad(place-30,210,place,210,place-10,100,place-30,100);quad(place-60,190,place-40,190,place-30,50,place-70,40);quad(place-90,200,place-60,200,place-70,130,place-80,130);if(f.length<1& timer>20){fill(gray1);stroke(gray1);}else{fill(tube2);stroke(tube2);}
place =150;quad(place-30,250,place-50,250,place-50,120,place-20,120);quad(place+30,260,place,260,place+10,150,place+30,150);quad(place+60,240,place+40,240,place+30,100,place+70,90);quad(place-90,250,place-60,250,place-70,180,place-80,180); //brain coral
if(f.length<1& timer>10){fill(gray2);stroke(gray2);}else{fill(brain1);stroke(brain1);}ellipse(400,200,100,70);if(f.length<1& timer>50){fill(gray2);stroke(gray2);}else{fill(brain2);stroke(brain2);}ellipse(10,150,100,70); //another tube coral
if(f.length<1& timer>30){fill(gray1);stroke(gray1);}else{fill(tube3);stroke(tube3);}
place =300;quad(place+30,340,place,360,place+10,200,place+30,190);quad(place+60,360,place+40,360,place+30,250,place+70,250);}
//makes the cursor look a certain way
functionfishHook(x,y){noFill();stroke(255);strokeWeight(10);beginShape();vertex(x+40,y-50);vertex(x+40,y-50);vertex(x+40,y);curveVertex(x+20,y+10);curveVertex(x,y);vertex(x,y);endShape();fill(80);triangle(x-5,y+10,x+10,y-10,x-5,y-10);}
//underwater has to have seaweed
functionseaweed(x,height){strokeWeight(5);stroke(0,122,4); //green
fill(0,122,4); //still green
triangle(x,350,x+20,350,x+10,height);}functionmousePressed(){for(var i=0; i<f.length; i+=1){if(dist(mouseX,mouseY, f[i].x,f[i].y)<30){
f.splice(i,1);fill(0,122,4,100); //green
rect(width/2,height/2,600,300);
moneyCount+=10000;break;}}}
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
functionpreload(){
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 ();}}functionbagDraw(){
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);}elseif(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);}
his project relies on a particle system. It indicated regions with air pollution on an abstract Indian map. Hovering above the regions with your maps will lead to an info box appearing. The more red the region, the worse it is in terms of the air pollution.
ptx =[];
pty =[];
ptx2 =[];
pty2 =[];
numberx =[];
numbery =[];var d;var angle;var pieceNum;var trapAngle =360/17;var r1 =280;var r2 =180;var bool =false;var table;var numRows;var pages ={
title1:[],
minititle1:[],
goal1:[],
goal2:[],
goal3:[],
goal4:[],
goal5:[],
r:[0,200,255,5,255,255,112,255,169,255,255,255,206,38,0,2,2,0],
g:[72,0,206,172,85,51,200,206,0,128,51,153,168,151,171,200,116,72],
b:[108,0,4,10,0,51,255,4,56,0,153,51,78,41,255,35,174,108],};var logo;functionpreload(){
table =loadTable("17goalsdata.csv","header");
logo =loadImage("logo.png");}functionsetup(){createCanvas(1000,600);
numRows = table.getRowCount();angleMode(DEGREES);imageMode(CENTER);for(var i =0; i <19; i++){
ptx[i]= r1*cos(7*trapAngle+((i+1)*trapAngle));
pty[i]= r1*sin(7*trapAngle+((i+1)*trapAngle));}for(var i =0; i <19; i++){
ptx2[i]= r2*cos(7*trapAngle+((i+1)*trapAngle));
pty2[i]= r2*sin(7*trapAngle+((i+1)*trapAngle));}for(var i =0; i <19; i++){
numberx[i]=((r1+r2)/2)*cos((7*trapAngle+((i+1)*trapAngle))+(trapAngle/2));
numbery[i]=((r1+r2)/2)*sin((7*trapAngle+((i+1)*trapAngle))+(trapAngle/2));}for(var i =0; i < numRows; i++){
pages.title1[i]= table.getString(i,"Title");
pages.goal1[i]= table.getString(i,"Goal1")
pages.goal2[i]= table.getString(i,"Goal2")
pages.goal3[i]= table.getString(i,"Goal3")
pages.goal4[i]= table.getString(i,"Goal4")
pages.goal5[i]= table.getString(i,"Goal5")
pages.minititle1[i]= table.getString(i,"MiniTitle");}}functiondraw(){push();translate(width/2,height/2);strokeWeight(10);noFill();background(220);image(logo,0,-20,1024*r1/879,r1);if(!bool){for(var i =0; i <19; i++){drawTrapezoid(i);}
angle =atan2(mouseY - height/2,mouseX - width/2);
pieceNum =8+ceil(angle/(trapAngle));
d =dist(width/2,height/2,mouseX,mouseY);menuSelector(d);}else{pop();if(d<r1 & d>r2){if(pieceNum==0){
pieceNum=17;}let col =color(pages.r[pieceNum],pages.g[pieceNum],pages.b[pieceNum]);drawTitle(pages.title1[pieceNum-1],col);drawGoals(pages,60);}drawExitButton();}}functiondrawExitButton(){stroke(0);fill(200,0,0);rect(width-105,height-105,100,100,20);fill(0);strokeWeight(1);text("Back",width-75,height-50)noStroke();}functiondrawTitle(title1,col){background(col);strokeWeight(10);stroke(0);line(5,5,width-5,5);line(5,5,5,height-5);line(5,height-5,width-5,height-5);line(width-5,height-5,width-5,5)strokeWeight(2);fill(255);rect(5,5,100,100,20);fill(0);strokeWeight(2);textSize(50);textAlign(CENTER)rectMode(CORNER);text(pieceNum,50,65);textSize(40)noStroke();text(title1,120,25,840,300);}functiondrawGoals(pages,spacing){fill(0);textAlign(LEFT)strokeWeight(2);textSize(30);text("By 2030:",100,200-spacing,800);textSize(20);for(var i =0; i <5; i++){text("Goal "+(i+1)+":",50,(i*spacing)+215);}text(pages.goal1[pieceNum-1],120,200,800);text(pages.goal2[pieceNum-1],120,200+spacing,800);text(pages.goal3[pieceNum-1],120,200+(2*spacing),800);text(pages.goal4[pieceNum-1],120,200+(3*spacing),800);text(pages.goal5[pieceNum-1],120,200+(4*spacing),800);}functiondrawTrapezoid(i){stroke(0);beginShape();vertex(ptx2[i],pty2[i]);vertex(ptx2[i+1],pty2[i+1]);vertex(ptx[i+1],pty[i+1]);vertex(ptx[i],pty[i]);endShape(CLOSE);rectMode(CENTER);noStroke();if(i<18& i>0){fill(0);textSize(17);textAlign(CENTER);rectMode(CENTER);text(i,numberx[i],numbery[i])noFill();} //rect(numberx[i],numbery[i],10,10);
rectMode(CORNER);}functionmousePressed(){if(d<r1 & d>r2){
bool =true;}if(mouseX>895& mouseY>485){
bool =false;}}functionmenuSelector(d){if(d<r1 & d>r2){for(var i =0; i <=18; i++){let col =color(pages.r[pieceNum],pages.g[pieceNum],pages.b[pieceNum])fill(col);ellipse(0,0,(2*r2)-5);noStroke();fill(0); //rectMode(CENTER);
textSize(30)text(pages.minititle1[pieceNum],-r2+10,-20,(2*r2)-5,(2*r2)-5);fill(col);drawTrapezoid(pieceNum);}}}
Steps to Run Project:
Go into “Final Project” folder a. Location: handin-14-finalproject –> btyi-14-project –> Final Project
Navigating to this location in your console/commandprompt/etc.
Run local host by typing [php -S localhost:8000] (may be different for non-Windows users)
Type in localhost:8000 into your Google Chrome URL bar
Description: My program is a simplified display of the 17 Sustainable Development Goals of the United Nations. Essentially, I have created a summary of all 17 Goals, which 5 of the sub-targets of each of these goals and created a display of all that information. Inside the Brainstorming folder, I put different drafts and other ideas I had made prior to completing my final draft. I also put all the information that I collected from the UN website into separate notes sheets before I converted to Excel, so those are located in the brainstorming folder as well.
Inspiration: Up until a couple of years ago, I had never heard of the 17 Sustainable Development Goals. Then when I learned about them, it surprised me that these goals weren’t more readily available and advertised worldwide. But when I looked into these 17 goals, I realized that there was so much content that was put on the website, that I had no idea where to start. Therefore, for this project, I wanted to create a summarized/simpler version of the UN’s website, with the basic and important information consolidated into one place. If I had more time, I would probably have wanted to add a little more information to the display, as well as make the transitions smoother and make the appearance look more professional. Functionality-wise, if I had more time I think I would have liked to add more user interaction, such as different operations using different keys on the keyboard, or maybe some sliders and other user-oriented devices.
In this game you try to keep the penguin alive. If the penguin touches the water you lose. the penguin has to jump between ice cubes floating across the screen. the ice cubes are objects stored in an array. the penguin can jump when it is touching the ice cube. two challenges appear while playing. one makes the ice cubes smaller, and one makes the ice cubes move faster. if you navigate through these challenges you can get to safety and win the game. I attached a video of me completing the game because it might not be a game you can complete first try.
I wanted to create a fun game that had a relation to climate change. since climate change is melting ice which might cause harm to wildlife, I made this game where the ice is melting. If I had more time I might add more challenges and make the movement of the ice cubes look more realistic, like they are actually in water.
//Anthony Pan
//Section C
//final project proposal final
//requirements:
//loops, arrays, conditionals (if), user interaction, transformations,
//functions (besides setup and draw),
//and use of at least one object definition of your own design.
//net object "line" "pushes" trash objects to the right of the canvas
// if trash objects are to the right of the line, update all of the ones to the right
//within certain number of pixels, x position of the trash objects will update and increase incrementally
//lin search particle loop
//if statement with mouseX
//capture value of mouseX at that instance to avoid bugs
//create seperate function that changes background color
// use series of if statements
//array and object for garbage 1
var garbage1Showing =[];var garbage1;
//array and object for garbage 2
var garbage2;var garbage2Showing =[];
//array and object for ocean details
var OceanDetail;var oceanDetailShowing =[];
//frame counter
var counter =0;var fishes =[];var fish;
//angle for rotation og garbage2 object
var angle =0;functionsetup(){createCanvas(500,200); //create objects for garbage 1
for(var i =0; i <8; i ++){
garbage1 =makeGarbage1(random(50,150),color(random(255)));
garbage1Showing.push(garbage1);} //create objects for garbage 2
for(var i =0; i <10; i++){
garbage2 =makeGarbage2(random(60,140));
garbage2Showing.push(garbage2);} //create objects for ocean details
for(var i =0; i <7; i++){
OceanDetail =makeOceanDetail(random(0,height),color(255));
oceanDetailShowing.push(OceanDetail);}for(var i =0; i <10; i++){
fish =makeFish();
fishes.push(fish);}}functiondraw(){ //change water color based on # of objects in water
waterChange(); //ocean detail functions
OceanDetailDisplay();removeOceanDetail();addNewOceanDetail();noStroke(); //garbage2 functions
garbage2DisplayandMove();removeGarbage2(); //garbage1 functions
garbage1DisplayandMove();removeGarbage1(); //add new garbage to ocean based on probability
addNewGarbage1();addNewGarbage2(); //display fish if water is blue to dark blue
if(garbage1Showing.length >0& garbage1Showing.length <=40){displayFish();} //draw net
fill(255);noStroke();rect(mouseX,0,2,400); //check if garbage is ahead of net, if so use net to push them off screen
checkGarbage1Ahead();checkGarbage2Ahead();}
////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//fish code
//fish constructor
functionmakeFish(){var fish ={x:random(25,600), y:random(25,220),
speed:random(-0.2,0.2),
c:color(10,10,random(255)),
draw: drawFish,
move: moveFish
}return fish;}
//draw fish shape
functiondrawFish(){fill(this.c);push();scale(0.8); //transformation
ellipse(this.x,this.y,20,10); //direction of fish indicates which way tail is facing
if(this.speed <0){triangle(this.x+10,this.y,this.x+15,this.y-5,this.x+15,this.y+5);}else{triangle(this.x-10,this.y,this.x-15,this.y-5,this.x-15,this.y+5);}pop();}
//move fish
functionmoveFish(){this.x +=this.speed; //hits random point within canvas, fish will turn other direction
if(this.x > width -random(50)||this.x <random(50)){this.speed =-this.speed;}}
//one function to display and move fish on canvas
functiondisplayFish(){for(var i =0; i < fishes.length; i++){
fishes[i].move();
fishes[i].draw();}}
////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//type garbage1 functions
//garbage1 constructor
functionmakeGarbage1(gy, c){var garbage1 ={x:-10, y: gy,
speed:random(0.05,0.75),
Yspeed:random(0,0.2),
size:random(1,6),
fill: c,
move: garbage1Move,
draw: garbage1Draw }return garbage1;}
//draw garbage1
functiongarbage1Draw(){fill(this.fill);ellipse(this.x,this.y,this.size,this.size);}
//move garbage1
functiongarbage1Move(){this.x +=this.speed;this.y +=this.Yspeed;if(this.y >=150||this.y <=50){this.Yspeed =-this.Yspeed;} //to slow down at the middle and collect
if(this.x >= width/2){this.speed =0.001;}}
//1 function to move and draw garbage
functiongarbage1DisplayandMove(){for(var i =0; i < garbage1Showing.length; i++){
garbage1Showing[i].move();
garbage1Showing[i].draw();}}
//make new garbage based on probability
functionaddNewGarbage1(){var newGarbage1likelihood =0.01;if(random(0,1)< newGarbage1likelihood){
garbage1Showing.push(makeGarbage1(random(50,150),color(random(255))));}}
//remove garbage off screen
functionremoveGarbage1(){var garbage1ToKeep =[];for(var i =0; i < garbage1Showing.length; i++){if(garbage1Showing[i].x < width){
garbage1ToKeep.push(garbage1Showing[i]);}}
garbage1Showing = garbage1ToKeep; // remember the showing garbage2
}
////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//garbage2 functions
//garbage 2 constructor
functionmakeGarbage2(gy){var garbage2 ={x:-10, y: gy,
speed:random(0.1,0.3),
Yspeed:random(0,0.2),
size:random(2,7),
r:random(255),
g:random(255),
b:random(255),
move: garbage2Move,
draw: garbage2Draw }return garbage2;}
//draw garbage 2
functiongarbage2Draw(){rectMode(CENTER); //garbage spins
push();translate(this.x,this.y);rotate(radians(angle));
angle +=0.1;fill(this.r,this.g,this.b);rect(0,0,this.size,this.size);pop();}
//move garbage 2
functiongarbage2Move(){this.x +=this.speed;this.y +=this.Yspeed;if(this.y >=140||this.y <=60){this.Yspeed =-this.Yspeed;} //to slow down at the middle and collect
if(this.x >= width/2){this.speed =0.001;}}
//1 function to draw and move garbage
functiongarbage2DisplayandMove(){for(var i =0; i < garbage2Showing.length; i++){
garbage2Showing[i].move();
garbage2Showing[i].draw();}}
//remove garbage 2 if off screen
functionremoveGarbage2(){var garbage2ToKeep =[];for(var i =0; i < garbage2Showing.length; i++){if(garbage2Showing[i].x < width){
garbage2ToKeep.push(garbage2Showing[i]);}}
garbage2Showing = garbage2ToKeep; // remember the showing garbage2
}
//add new garbage periodically
functionaddNewGarbage2(){var newGarbage2likelihood =0.01;if(random(0,1)< newGarbage2likelihood){
garbage2Showing.push(makeGarbage2(random(50,150)));}}
////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//make ocean details
//make ocean detail object
functionmakeOceanDetail(oy, c){
OceanDetail ={x:0, y: oy,
speed:random(0.1,0.3),
fill: c,
move: oceanDetailMove,
draw: oceanDetailDraw }return OceanDetail;}
//move ocean detail
functionoceanDetailMove(){this.x +=this.speed;}
//drawocean details
functionoceanDetailDraw(){noFill();strokeWeight(0.2);stroke(this.fill);curve(this.x,this.y,this.x +10,this.y -10,this.x +10,this.y -20,this.x,this.y -30);}
//1 function to draw and move ocean details
functionOceanDetailDisplay(){for(var i =0; i < oceanDetailShowing.length; i++){
oceanDetailShowing[i].move();
oceanDetailShowing[i].draw();}}
//remove ocean details if off screen
functionremoveOceanDetail(){var oceansToKeep =[];for(var i =0; i < oceanDetailShowing.length; i++){if(oceanDetailShowing[i].x < width){
oceansToKeep.push(oceanDetailShowing[i]);}}
oceanDetailShowing = oceansToKeep; // remember the showing ocean details
}
//add new ocean details periodically
functionaddNewOceanDetail(){
counter +=1;if(counter %100==0){
oceanDetailShowing.push(makeOceanDetail(random(40,height-40),color(255)));}}
////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//change background color based on number of garbage objects on the screen
//make this change more gradual
functionwaterChange(){if(garbage1Showing.length <=20){background(20,100,255);}if(garbage1Showing.length >20& garbage1Showing.length <=40){background(51,89,163);}if(garbage1Showing.length >40& garbage1Showing.length <=60){background(59,81,125);}if(garbage1Showing.length >60& garbage1Showing.length <=100){background(59,117,125);}if(garbage1Showing.length >100& garbage1Showing.length <=120){background(59,125,90);}if(garbage1Showing.length >120& garbage1Showing.length <=140){background(56,74,43);}if(garbage1Showing.length >140& garbage1Showing.length <=160){background(43,54,36);}if(garbage1Showing.length >=160){background(69,57,42);}}
////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//functions that check if particles are ahead of net
functioncheckGarbage1Ahead(){for(var i =0; i < garbage1Showing.length; i++){if(garbage1Showing[i].x > mouseX & garbage1Showing[i].x < mouseX +10){
garbage1Showing[i].x = mouseX +6;}}}functioncheckGarbage2Ahead(){for(var i =0; i < garbage2Showing.length; i++){if(garbage2Showing[i].x > mouseX & garbage2Showing[i].x < mouseX +10){
garbage2Showing[i].x = mouseX +6;}}}
////////////////////////////////////////////////////////////////////////////////////////////////////////////////
For my final project, I have created an ocean clean-up interaction program. Ocean plastics contribute to the rapid increase in the rate of climate change because it acts as a carbon sink. Thus, cleaning up ocean plastics is imperative to slow down the rate of climate change in addition to protecting ocean life.
This program aims to create an abstraction of ocean clean-up and the adverse effects on the environment if pollution is left unattended for too long. The water starts off as a nice, blue color with fish swimming around. Waves are added as extra details to keep the canvas somewhat recognizable as the ocean. As the program continues, trash enters from the left side of the canvas. The trash is represented by randomized rectangles and circles of varying colors and sizes. These objects float towards the center of the canvas on randomized paths. They begin to collect in the middle of the screen, clumping together into a massive garbage patch. As the number of trash objects enters the scene, the water begins to dirty, from a clear blue to a muddy brown—if left out for too long. The fish die-off as the trash on the canvas reaches a certain number.
However, the user is equipped with a net that can be used to clean the garbage. The net is represented by a long, white rectangle. The net works by identifying if a garbage object is within a certain threshold in front of the net. If the trash is within a certain distance in front of the net, it will be sucked in by the net. The user can then use mouseX to push the garbage off the screen to clean the ocean! As trash leaves the screen from the right side of the canvas, the water becomes blue once more. Remember that the net cannot move too fast. If the user is too hasty with their movements of the net, the trash may fall out of the net. Slowly moving the trash off the canvas is the most effective method of cleaning the ocean!
What inspired me to create this program is a video on YouTube by The Ocean Cleanup. They were able to develop a method of cleaning plastics and other pollutants in oceans around the world. They are specifically focusing on cleaning up the Great Pacific Garbage Patch.
If I had more time, I would like to add more detail to the ocean to make the entire program more visually appealing. I would also have liked to use particles and strings to create the net instead of a rectangle. However, I couldn’t figure out how to create a net that you could drag all the particles at once.
In order to run this program, all you have to do is open the index file into the browser of your choice!
My program is an interactive informative video on hurricanes. Climate change is causing hurricanes to become more powerful and I wanted to explore this for this project. I did not really know what I wanted to do for this project when we first got it, but I decided on hurricanes because I have been affected by them. I remember when I was little Hurricane Sandy hitting Connecticut and being without power for weeks. Halloween was cancelled because of power-lines being down and there being over 2 feet of snow. I remember playing cards with my family around candles and putting our food from the freezer out in the snow because we did not have a generator.
I wanted to make this project be special to me, but also make people realize that climate change is affecting us, because most people who do not believe climate change is serious does not know how much a degree or two in earths temperature rising can cause.
To use my program is simple. All you need to do is use the arrow and shift key when asked to see more information and explore more hurricanes. You can pick what hurricanes to see in any order.
If I had more time I think I would have explored adding some sounds, and possibly a conclusion at the end.
var dirY =10;var xCenter =35;var yCenter =26;var size1 =30;var size2 =75;var psize =1;var hsize =1;var winds =[];var offset =0;var a =0;var b =0;var x =[]; //for bacteria
var y =[]; //for bacteria
var dx =[]; //for bacteria
var bacteria =[];var changeHurricane =0;var counter=0;var time =50;functionpreload(){
bacteriaImg =loadImage("https://i.imgur.com/1A8JGL4.png");
harveyImg =loadImage("https://i.imgur.com/EpbTXxl.png");
hurricaneImg =loadImage("https://i.imgur.com/odCOO2g.png");
irmaImg =loadImage("https://i.imgur.com/1bhgnMC.png");
katrinaImg =loadImage("https://i.imgur.com/US5Kww2.png");
mapImg =loadImage("https://i.imgur.com/dOw7Qhi.png");
mudslideImg =loadImage("https://i.imgur.com/mvmq6d4.png");
peopleImg =loadImage("https://i.imgur.com/6md7EQY.png");
powerlinesImg =loadImage("https://i.imgur.com/fceH7Sn.png");
SandyImg =loadImage("https://i.imgur.com/v3yDJ4E.png");
shorelineImg =loadImage("https://i.imgur.com/b8jOnfe.png");
snowImg =loadImage("https://i.imgur.com/o4kwP6r.png");
tornadoImg =loadImage("https://i.imgur.com/fQdemYk.png");
sickbedImg =loadImage("https://i.imgur.com/f3pLBpr.png");
wasteFacilityImg =loadImage("https://i.imgur.com/DkcHFPS.png");
coastWaterImg =loadImage("https://i.imgur.com/Z3WagWz.png");
womenImg =loadImage("https://i.imgur.com/cYQjOwi.png");}functionsetup(){createCanvas(800,800);frameRate(50);var pl =wind(600,100,100);
winds.push(pl);for(var i =0; i <40; i++){
bacteria[i]=newObject();
bacteria[i].x =random(0,800);
bacteria[i].y =random(0,500);
bacteria[i].dx =random(-5,5);}}functionpeople2(r, c, rw, cw, x, y){push();translate(0,-490);for(var row =1; row <= r; row +=1){for(var col =1; col <= c; col +=1){image(peopleImg,(size1 * col)- x,(size2 * row)+ y, size1, size2);}}for(var row =6; row <= rw; row +=1){for(var col =1; col <= cw; col +=1){image(peopleImg,(size1 * col)- x,(size2 * row)+ y, size1, size2);}}pop();}functiondrawPeopleScale2(r, c, rw, cw, x, y, z){push();scale(psize);people2(r, c, rw, cw, x, y);
psize = psize - z;pop();}functionpeople(r, c, x, y){push();translate(0,-490);for(var row =1; row <= r; row +=1){for(var col =1; col <= c; col +=1){image(peopleImg,(size1 * col)- x,(size2 * row)+ y, size1, size2);}}pop();}functiondrawPeopleScale(r, c, x, y, z){push();scale(psize);people(r, c , x, y);
psize = psize - z;pop();}functionpowerlines(){image(powerlinesImg,300,260,400,326);}functionrisingSeas(c, d){fill(0,0,255);rect(0, d - dirY,800,1500);
dirY = dirY + c;}functionhouses4flooding(c, d){push();fill(255);scale(6);risingSeas(c, d);for(var col =1; col <=3; col +=1){triangle((xCenter * col)-5,20+ yCenter,(xCenter * col)-20, yCenter +37,(xCenter * col)+10,15+ yCenter +22);rect((xCenter * col)-20,37+ yCenter,30,25);rect((xCenter * col)-8,52+ yCenter,10,10);}pop();}functiondrawHouseOG(){push();fill(255);scale(8);triangle(15+ xCenter,0+ yCenter,0+ xCenter,15+ yCenter,30+ xCenter,15+ yCenter);rect(0+ xCenter,15+ yCenter,30,25);rect(12+ xCenter,30+ yCenter,10,10);pop();}functiondrawHouse(r, c){push();fill(255);for(var row =1; row <= r; row +=2){for(var col =1; col <= c; col +=1){ //draw house numbers
triangle((15+ xCenter * col)-30,(0+ yCenter * row)-2000,(xCenter * col)-30,(15+ yCenter * row)-2000,(30+ xCenter * col)-30,(15+ yCenter * row)-2000);rect((xCenter * col)-30,(15+ yCenter * row)-2000,30,25);rect((12+ xCenter * col)-30,(30+ yCenter * row)-2000,10,10);}}pop();}functiondrawHouseScale(r, c, z){push();scale(hsize);drawHouse(r, c);
hsize = hsize - z;pop();}functionstormSurge(y, w, h){push();noStroke();fill(0,0,255);rect(0, y, w, h)pop();drawHouseOG();}functionbacteriaWater(b){image(bacteriaImg, b.x, b.y,50,72.3);}functiontornadoes(){for(var col =1; col <=5; col +=1){image(tornadoImg,(150* col)-130,190,150,154);}}functionwind(px, py, pw){var p ={x: px, y: py, w: pw,
right: windRight};return p;}functionwindRight(){returnthis.x +this.w;}functionrisingTemperature(){fill(0+ a,0,255- a)rect(0,-height /3,800,800)
a = a +5;}functioncoastalRise(){image(shorelineImg,0,100,800,453.23)image(coastWaterImg,440- b,135,1200,406.23);
b = b +3;}functioncirclesForMap(){noStroke();fill(0,153,153); //teal
circle(660,320,40,40); //irma
fill(0,76,153); //blue
circle(680,75,40,40); //sandy
fill(0,153,0); //green
circle(520,270,40,40); //katrina
fill(102,102,0); //mustard
circle(450,280,40,40); //Harvey
}functionsandy(){fill(180)rect(0,0, width, height);fill(255);translate(0, height/3);textSize(12);textFont('Georgia');if(counter <= time *5){text("Hurricane Sandy,",50,15);text("October 30-31, 2012",50,30); //show map of area
image(SandyImg,0,-300,800,1151.22)}if(counter <= time *9& counter > time *5){text("Hurricane Sandy is the largest Atlantic Hurricane on record.",50,15);}if(counter <= time *14& counter > time *9){people2(12, width,13,15,30,-1);push();fill(0);text("Loss of Life: 285",50,15); //loop many people
pop();}if(counter <= time *19& counter > time *14){text("extreme highwind damage",50,15); //wind do in final folder
for(var i =0; i < winds.length; i++){var p = winds[i];rect(p.x - offset, p.y, p.w,10);}
offset +=90;if(winds.length >0& winds[0].right()< offset){
winds.shift();}var lastWind = winds[winds.length-1];if(lastWind.right()- offset < width){var p =wind(lastWind.right(), // start location
random(-height/3, height),100);
winds.push(p);}}if(counter <= time *24& counter > time *19){text("Storm surge levels up to almost 14ft",50,15); //people with water level
stormSurge(400,800,140);}if(counter <= time *29& counter > time *24){text("heavy snow damage",50,15); //snow image
image(snowImg,-130,-220,1000,800);}if(counter <= time *34& counter > time *29){houses4flooding(.6,420);text("flooding",50,15); //display water over houses, use loops for houses
}if(counter <= time *38& counter > time *34){text("mudslides",50,15); //show mudslide image
image(mudslideImg,0,105,800,427.7);}if(counter <= time *42& counter > time *38){text("8 million people lost power",50,15); //power lines
powerlines();}if(counter <= time *44& counter > time *42){drawHouseScale(250,160,.008);push();fill(0);textSize(18);text("20,000+ households were still displaced even after one year.",50,15); //house
pop();}if(counter > time *44){text("click the shift key to return to map to explore more",50,15);}}functionkatrina(){fill(180)rect(0,0, width, height);fill(255);translate(0, height/3);textSize(12);textFont('Georgia');if(counter <= time *5){text("Hurricane Katrina",50,15);text("August 23-30, 2005",50,30); //show map of area
image(katrinaImg,0,-320,800,1151.22)}if(counter <= time *10& counter > time *5){push();fill(0);drawPeopleScale2(24,75,25,33,-50,-200,.006);text("Loss of Life: 1833",50,15); //loop many people
pop();}if(counter <= time *14& counter > time *10){text("Storm surge levels up to 30ft",50,15); //compare to house
stormSurge(200,800,400);}if(counter <= time *19& counter > time *14){text("wind damage",50,15); //show wind in final folder
for(var i =0; i < winds.length; i++){var p = winds[i];rect(p.x - offset, p.y, p.w,10);}
offset +=70;if(winds.length >0& winds[0].right()< offset){
winds.shift();}var lastWind = winds[winds.length-1];if(lastWind.right()- offset < width){var p =wind(lastWind.right(), // start location
random(-height/3, height),100);
winds.push(p);}}if(counter <= time *23& counter > time *19){houses4flooding(.1,420);text("flooding",50,15); //display water over houses, use loops for houses
}if(counter <= time *30& counter > time *23){push();fill(0,0,255);rect(0,0,800,800);pop();for(var i =0; i <40; i++){bacteriaWater(bacteria[i]);
bacteria[i].x = bacteria[i].x + bacteria[i].dx;pop();}text("an absense of sanitation and bacteria-rich flood waters caused a public emergency",50,15); //bacteria in water
}if(counter <= time *34& counter > time *30){image(peopleImg, size1 +200,150, size1 *5, size2 *5);image(womenImg, size1 *7+200,150, size1 *5, size2 *5);fill(0);text("30,000 people seeking shelter under New Orleans Super Dome",50,15); //people and women
}if(counter <= time *39& counter > time *34){image(peopleImg, size1 +200,150, size1 *5, size2 *5);image(womenImg, size1 *7+200,150, size1 *5, size2 *5);fill(0);text("and 25,000 people seeking shelter under the Convention Center",50,15); //people and women
}if(counter > time *39){text("click the shift key to return to map to explore more",50,15);}}functionharvey(){fill(180)rect(0,0, width, height);fill(255);translate(0, height/3);textSize(12);textFont('Georgia');if(counter <= time *5){text("Hurricane Harvey",50,15);text("August 25-31, 2017",50,30);//show map of area
image(harveyImg,0,-320,800,1151.22);}if(counter <= time *9& counter > time *5){push();fill(0);people2(8,11,9,1,-200,225);text("Loss of Life: 89",50,15); //loop many people dome
pop();}if(counter <= time *14& counter > time *9){text("12.5ft storm surge",50,15); //show with people
stormSurge(420,800,120);}if(counter <= time *19& counter > time *14){houses4flooding(.1,420);text("extreme rainfall caused massive flooding",50,15); //houses and water
}if(counter <= time *23& counter > time *19){fill(0);drawPeopleScale(150,300,20,50,.006);text("displacing over 30,000",50,15);}if(counter <= time *23.5& counter > time *23){fill(0);drawHouseScale(500,400,.05);text("destroying over 200,000 households and businesses.",50,15); //houses
}if(counter <= time *27.5& counter > time *23.5){text("Harvey flooded 800 waste-water treatment facilities",50,15); //treatment facility
image(wasteFacilityImg,100,100,600,339);}if(counter <= time *34& counter > time *27.5){push();fill(0,0,255);rect(0,0,800,800);pop();for(var i =0; i <40; i++){bacteriaWater(bacteria[i]);
bacteria[i].x = bacteria[i].x + bacteria[i].dx;pop();}text("spreading sewage and toxic chemicals into flooded areas",50,15); //bacteria in water
}if(counter <= time *41& counter > time *34){image(sickbedImg,-20,-300,800,1151.2);text("disruption to water supplies and power systems caused water borne illness",50,15); //sick bed
}if(counter > time *41){text("click the shift key to return to map to explore more",50,15);}}functionirma(){fill(180)rect(0,0, width, height);fill(255);translate(0, height/3);textSize(12);textFont('Georgia');if(counter <= time *5){text("Hurricane Irma",50,15);text("September 6-12, 2017",50,30);//show map of area
image(irmaImg,0,-300,800,1151.22);}if(counter <= time *9& counter > time *5){push();fill(0);people2(5,26,6,4,20,325);text("Loss of Life: 134",50,15); //loop many people
pop();}if(counter <= time *14& counter > time *9){text("severe wind",50,15); //wind but faster
for(var i =0; i < winds.length; i++){var p = winds[i];rect(p.x - offset, p.y, p.w,10);}
offset +=70;if(winds.length >0& winds[0].right()< offset){
winds.shift();}var lastWind = winds[winds.length-1];if(lastWind.right()- offset < width){var p =wind(lastWind.right(), // start location
random(-height/3, height),100);
winds.push(p);}}if(counter <= time *19& counter > time *14){text("five tornadoes formed in South Florida causing more damage",50,15);tornadoes();}if(counter <= time *24& counter > time *19){text("max wind sustained was 185 mph for 37 hours",50,15); //faster faster wind
for(var i =0; i < winds.length; i++){var p = winds[i];rect(p.x - offset, p.y, p.w,10);}
offset +=99;if(winds.length >0& winds[0].right()< offset){
winds.shift();}var lastWind = winds[winds.length-1];if(lastWind.right()- offset < width){var p =wind(lastWind.right(), // start location
random(-height/3, height),100);
winds.push(p);}}if(counter <= time *28& counter > time *24){text("1.5 million people lost power",50,15); //power lines
powerlines();}if(counter <= time *28.6& counter > time *28){drawHouseScale(500,266,.05);fill(0);text(" and 133,000 homes were affected",50,15); //homes
}if(counter > time *28.6){text("click the shift key to return to map to explore more",50,15);}}functionstartText(){fill(255);translate(0, height/3);textSize(12);textFont('Georgia');if(counter <= time *3){text("Climate Change is ruining our planet, and we are the ones to blame.",50,15);}if(counter <= time *5& counter > time *3){//image here
text("seas are rising,",50,15);risingSeas(3,420);}if(counter <= time *7& counter > time *5){push();risingTemperature();pop();text("tempetures are rising,",50,15);}if(counter <= time *10& counter > time *7){image(hurricaneImg,0,-200,800,609,23);push();fill(145);text("and hurricanes are becoming more intense.",150,15);pop();}if(counter <= time *15& counter > time *10){push();risingSeas(.1,420);drawHouseOG();pop();text("hurricanes are and will cause extreme flooding",50,15);}if(counter <= time *20& counter > time *15){ //function here
text("and intense wind;",50,15);for(var i =0; i < winds.length; i++){var p = winds[i];rect(p.x - offset, p.y, p.w,10);}
offset +=50;if(winds.length >0& winds[0].right()< offset){
winds.shift();}var lastWind = winds[winds.length-1];if(lastWind.right()- offset < width){var p =wind(lastWind.right(), // start location
random(-height/3, height),100);
winds.push(p);}}if(counter <= time *25& counter > time *20){ //image here
text("causing massive coastal damage.",50,15);coastalRise();}if(counter > time *25){ //20 seconds to choose hurricane before intro restart
image(mapImg,0,-450,800,1151.22);text("KeyPress to discover the destruction of some of the last two decades worst hurricanes.",50,-215);fill(0,76,153);text("press up arrow on keyboard to see statistics of Hurricane Sandy",50,-200);fill(0,153,153);text("press down arrow on keyboard to see statistics of Hurricane Irma",50,-185);fill(0,153,0);text("press right arrow on keyboard to see statistics of Hurricane Katrina",50,-170);fill(102,102,0);text("press up left on keyboard to see statistics of Hurricane Harvey",50,-155);circlesForMap();}}functiondraw(){background(180);push();startText();pop();if(changeHurricane ==1){fill(180)rect(0,0-267, width, height);sandy();}if(changeHurricane ==2){fill(180)rect(0,-267, width, height);katrina();}if(changeHurricane ==3){fill(180)rect(0,-267, width, height);harvey();}if(changeHurricane ==4){fill(180)rect(0,-267, width, height);irma();}if(changeHurricane ==5){ //for map
fill(180)rect(0,-height/3+267, width, height);image(mapImg,0,-190,800,1151.22);fill(255);text("KeyPress to discover the destruction of some of the last two decades worst hurricanes.",50,52);fill(0,76,153);text("press up arrow on keyboard to see statistics of Hurricane Sandy",50,67);fill(0,153,153);text("press down arrow on keyboard to see statistics of Hurricane Irma",50,82);fill(0,153,0);text("press right arrow on keyboard to see statistics of Hurricane Katrina",50,97);fill(102,102,0);text("press up left on keyboard to see statistics of Hurricane Harvey",50,112);push();translate(0,267);circlesForMap();pop();}
counter+=1}functionkeyPressed(){
counter =0;if(keyCode == UP_ARROW){
changeHurricane =1;}if(keyCode == RIGHT_ARROW){
changeHurricane =2;}if(keyCode == LEFT_ARROW){
changeHurricane =3;}if(keyCode == DOWN_ARROW){
changeHurricane =4;}if(keyCode == SHIFT){
changeHurricane =5;}} //Links to info used:
//https://www.c2es.org/content/extreme-weather-and-climate-change/
//https://www.dosomething.org/us/facts/11-facts-about-hurricane-sandy
//https://www.britannica.com/event/Hurricane-Katrina
//https://www.lamar.edu/_files/documents/resilience-recovery/grant/recovery-and-resiliency/hurric2.pdf
//https://www.weather.gov/mfl/hurricaneirma
//https://www.worldvision.org/disaster-relief-news-stories/2017-hurricane-irma-facts