Final Project – [OLD FALL 2020] 15-104 • Introduction to Computing for Creative Practice

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.

sketch

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;
    }
}

Leave a Reply Cancel reply