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)
