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;

    }

}