![[OLD FALL 2020] 15-104 • Introduction to Computing for Creative Practice](https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2021/08/cropped-notcurrentsemester.jpg){kind=small}
![[OLD FALL 2020] 15-104 • Introduction to Computing for Creative Practice](https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2021/09/stop-banner.png)
This final project was inspired by what’s currently transpiring to aquariums within the country during this pandemic. I’m a huge fan of aquariums and am constantly nervous about how much these vital institutions are struggling to stay afloat while visitors can’t go walk through their physical buildings and admire all of the different marine life. I wanted this project to bring a little awareness to this extremely niche but nevertheless devastated part of the current fabric of the world being heavily impacted by the pandemic.
For this project, the viewer just needs to click on the canvas to cycle through
different facts about COVID-19’s impact on aquariums and marine life. They can also make the aquarist move across the screen and view the passing marine life with their mouse. The visuals and designs of the animals were based off the Monterey Bay Aquarium‘s illustrated advertisements. Each animal moves across the screen at different speeds as the illustrated background moves with them.
If I had more time on this project, I definitely would have added a level of
interactivity with the marine life, whether through animations triggered by clicks or sounds to accompany the piece. I’m pretty proud of how it turned out though.
var teal;
var barColor;
var tankbg;
var kelp;
var sunlight;
var sidewayScroll = 0;
var bgLength = 2100;
var bgHeight = 600;
let turtleCycle = [];
let animatedFrame = 0;
let turtleX = 0;
let time = 0;
let rayY = 0;
let rayX = 0;
var ray;
let seahorseY = 0;
let seahorseX = 0;
var seahorse;
var sharkY = 0;
var sharkX = 0;
var shark;
var orangefishX = 0;
var orangefishY = 0;
var orangefish;
var dx = [];
var c = [];
var x = [];
var y = [];
var employeeLeft;
var employeeRight;
var facts = ["Because the pandemic has reduced tourism, there has been a huge baby sea turtle boom in Florida's beaches.", "Stingrays and other fish have been showing signs of loneliness since the pandemic started due to the lack of visitor interactions.", "An endangered species of seahorse has returned to Dorset in the UK due to the coronavirus lockdown.", "Aquariums around the country are struggling to stay afloat due to COVID-19 closures and lack of financial help from the federal government.", "Many aquariums are now showing exhibits virtually to keep visitors engaged at home."];
var index = 0;
function preload() {
//exhibit images
tankbg = loadImage("tankbg.png");
kelp = loadImage("kelp.png");
sunlight = loadImage("light.png");
//turtle images
turtleCycle[0] = loadImage("turtle-02.png");
turtleCycle[1] = loadImage("turtle-03.png");
turtleCycle[2] = loadImage("turtle-04.png");
turtleCycle[3] = loadImage("turtle-05.png");
turtleCycle[4] = loadImage("turtle-06.png");
turtleCycle[5] = loadImage("turtle-05.png");
turtleCycle[6] = loadImage("turtle-04.png");
turtleCycle[7] = loadImage("turtle-03.png");
//stingray image
ray = loadImage("ray.png");
//seahorse image
seahorse = loadImage("seahorse.png");
//shark
shark = loadImage("shark.png");
//orange fish
orangefish = loadImage("orangefish.png");
//employee
employeeLeft = loadImage("employee_left.png");
employeeRight = loadImage("employee_right.png");
}
function setup() {
createCanvas(600, 450);
//tank setup
teal = color(89, 185, 189);
barColor = color(20, 48, 67);
//fish setup
for (i = 0; i < 100; i++) {
dx[i] = random(-2, 2);
c[i] = color(random(100), random(175), random(100), 50);
x[i] = random(25, width - 25);
y[i] = random(25, height - 25);
}
}
function draw() {
noStroke();
background(teal);
//sunlight
image(sunlight, width/4, 0, 400, bgHeight);
for (i = 0; i < 100; i++) {
fish(x[i], y[i], dx[i], c[i]);
x[i] += dx[i];
if (x[i] > width - 20){
dx[i] = -dx[i];
}
else if (x[i] < 0){
dx[i] = -dx[i];
}
}
//shark
image(shark, sharkX, sharkY, 189.42, 47.7);
sharkX = sharkX + 1;
if (sharkX >= width) {
sharkX = -300;
sharkY = random(200, 400);
}
//scrolling background
image(tankbg, sidewayScroll, -150, bgLength, bgHeight);
image(tankbg, sidewayScroll + bgLength, -150, bgLength, bgHeight);
//sea turtle
image(turtleCycle[animatedFrame], turtleX, 100, 200, 97);
if (time > 13) {
turtleX += 13;
animatedFrame += 1;
if (animatedFrame >= turtleCycle.length) {
animatedFrame = 0;
}
time = 0;
}
time++;
if (turtleX > width) {
turtleX = -500;
}
//orange fish
image(orangefish, orangefishX, orangefishY, 243, 86.3);
orangefishX = orangefishX + 2;
if (orangefishX >= width) {
orangefishX = -600;
orangefishY = random(0, 400);
}
//seahorse
image(seahorse, seahorseX, seahorseY, 25, 45);
image(seahorse, seahorseX + 50, seahorseY + 50, 35, 55);
seahorseX = seahorseX + 0.5;
if (seahorseX >= width) {
seahorseX = -100;
seahorseY = random(0, 400);
}
//scrolling kelp
image(kelp, sidewayScroll, -150, bgLength, bgHeight);
image(kelp, sidewayScroll + bgLength, -150, bgLength, bgHeight);
sidewayScroll -= 1;
if (sidewayScroll <= -bgLength) {
sidewayScroll = 0;
}
//stingray
image(ray, rayX, rayY, 150, 192);
rayY = rayY + 1;
if (rayY >= height) {
rayY = -300;
rayX = random(-400, 100);
}
else {
rayX = rayX + 1;
}
//glass tank bars
fill(barColor);
rect(200, 0, 15, height);
rect(400, 0, 15, height);
//aquarium employee
let canvasEdge = constrain(mouseX, width/4, 400);
if (mouseX < width/2) {
image(employeeLeft, canvasEdge, 300, 82, 172.6);
} else {
image(employeeRight, canvasEdge, 300, 82, 172.6);
}
//pandemic facts
let factsEdge = constrain(mouseX, 50, 400);
fill(255, 200);
rect(factsEdge, 200, 175, 85, 10);
fill(0);
textSize(10);
textFont("Volte");
text(facts[index], factsEdge + 15, 212, 150, 200);
}
//background fish
function fish(x, y, dx, c) {
fill(c);
ellipse(x, y, 20, 10);
if(dx < 0) {
triangle(x+10, y, x+15, y-5, x+15, y+5);
}
else {
triangle(x-10, y, x-15, y-5, x-15, y+5);
}
}
//click to cycle through pandemic facts
function mousePressed() {
index = floor(random(facts.length));
if (index == facts.length) {
index = 0;
}
}
