//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;
function preload() {
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")
}
function particleStep() {
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;
} else if (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;
} else if (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);
}
function particleDraw() {
image(bin,180,290,210,120);
image(gas, this.x, this.y, 40, 40);
}
// create a "Particle" object with position and velocity
function makeParticle(px, py, pdx, pdy) {
p = {x: px, y: py,
dx: pdx, dy: pdy,
age: 0,
stepFunction: particleStep,
drawFunction: particleDraw
}
return p;
}
function countParticle() {
count ++
//count = (count);
}
function gameOver() {
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 = [];
function setup() {
createCanvas(400, 400);
frameRate(10);
}
// draw all particles in the particles array
//
function draw() {
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.
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
function setup() {
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]=new Object();
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
}
function draw() {
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
function fish(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
} else 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);
}
}
//landscape made of sand
function sandscape() {
//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
function coral() {
//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
function fishHook(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
function seaweed(x,height) {
strokeWeight(5);
stroke(0,122,4); //green
fill(0,122,4); //still green
triangle(x,350,x+20,350,x+10,height);
}
function mousePressed() {
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
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);
}
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;
function preload() {
table = loadTable("17goalsdata.csv", "header");
logo = loadImage("logo.png");
}
function setup() {
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");
}
}
function draw() {
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();
}
}
function drawExitButton() {
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();
}
function drawTitle(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);
}
function drawGoals(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);
}
function drawTrapezoid(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);
}
function mousePressed() {
if (d<r1 & d>r2) {
bool = true;
}
if (mouseX>895 & mouseY>485) {
bool = false;
}
}
function menuSelector(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;
function setup() {
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);
}
}
function draw() {
//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
function makeFish() {
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
function drawFish() {
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
function moveFish() {
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
function displayFish() {
for(var i = 0; i < fishes.length; i++) {
fishes[i].move();
fishes[i].draw();
}
}
////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//type garbage1 functions
//garbage1 constructor
function makeGarbage1(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
function garbage1Draw() {
fill(this.fill);
ellipse(this.x, this.y, this.size, this.size);
}
//move garbage1
function garbage1Move() {
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
function garbage1DisplayandMove() {
for(var i = 0; i < garbage1Showing.length; i++) {
garbage1Showing[i].move();
garbage1Showing[i].draw();
}
}
//make new garbage based on probability
function addNewGarbage1() {
var newGarbage1likelihood = 0.01;
if(random(0,1) < newGarbage1likelihood) {
garbage1Showing.push(makeGarbage1(random(50,150), color(random(255))));
}
}
//remove garbage off screen
function removeGarbage1() {
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
function makeGarbage2(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
function garbage2Draw() {
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
function garbage2Move() {
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
function garbage2DisplayandMove() {
for(var i = 0; i < garbage2Showing.length; i++) {
garbage2Showing[i].move();
garbage2Showing[i].draw();
}
}
//remove garbage 2 if off screen
function removeGarbage2() {
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
function addNewGarbage2() {
var newGarbage2likelihood = 0.01;
if(random(0,1) < newGarbage2likelihood) {
garbage2Showing.push(makeGarbage2(random(50,150)));
}
}
////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//make ocean details
//make ocean detail object
function makeOceanDetail(oy, c) {
OceanDetail = {x: 0, y: oy,
speed: random(0.1,0.3),
fill: c,
move: oceanDetailMove,
draw: oceanDetailDraw }
return OceanDetail;
}
//move ocean detail
function oceanDetailMove() {
this.x += this.speed;
}
//drawocean details
function oceanDetailDraw() {
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
function OceanDetailDisplay() {
for(var i = 0; i < oceanDetailShowing.length; i++) {
oceanDetailShowing[i].move();
oceanDetailShowing[i].draw();
}
}
//remove ocean details if off screen
function removeOceanDetail() {
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
function addNewOceanDetail() {
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
function waterChange() {
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
function checkGarbage1Ahead() {
for(var i = 0; i < garbage1Showing.length; i++) {
if(garbage1Showing[i].x > mouseX & garbage1Showing[i].x < mouseX + 10) {
garbage1Showing[i].x = mouseX + 6;
}
}
}
function checkGarbage2Ahead() {
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.
![[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)
