Category: SectionC

//global variables
var houseDayImg;
var houseNightImg;
var dayPeriod = 2000;
var numTrees = 4;
var numStars = 20;
var trees = [];
var stars = [];

class Star {
    constructor() {
        this.x = random(width);
        this.y = random(height/4);
    }

    display() {
        fill(255,255,255);
        ellipse(this.x, this.y, 3, 3);
    }
}

class Tree {
    constructor() {
        var choice = random(1);
        if(choice < 0.5){
            this.x = random(width/3);  
        }else {
            this.x = random(2 * width / 3, width - 10); 
        }
        choice = random(1);
        if(choice < 0.5){
            this.color = color(135, 167, 126);  
        }else {
            this.color = color(73, 126, 97);
        }
        this.y = random(280, 300)
        this.w = random(50, 70);
        this.h = random(60, 90);
    }
       
    display() {
        fill(109, 86, 53);
        rect(this.x - 5, this.y + 10, 10, 50);
        fill(this.color)
        ellipse(this.x, this.y, this.w, this.h);
    }
}

function preload() {
    //preload images
    houseDayImg = loadImage("https://i.imgur.com/DguMSkN.png");
    houseNightImg = loadImage("https://i.imgur.com/eXNWSkN.png");
    panelImg = loadImage("https://i.imgur.com/VFf1Rr8.png");
    batteryImg = loadImage("https://i.imgur.com/rw8ScZs.png");
}

function setup() {
    createCanvas(400, 400);
    for(i = 0; i < numStars; i++){ //draw stars at night
        stars.push(new Star())
    }
    
    for(i = 0; i < numTrees; i++){ //draw trees
        trees.push(new Tree())
    }

}

function draw() {
    time = frameCount % dayPeriod;
    bgDark = time;
    batteryLife = (frameCount + dayPeriod / 4) % dayPeriod;
    if (bgDark > dayPeriod/2) {
        bgDark = dayPeriod - bgDark;
    }
    if (batteryLife > dayPeriod/2) {
        batteryLife = dayPeriod - batteryLife;
    }
    background(207 - bgDark / dayPeriod*255*2, 226 - bgDark / dayPeriod*255*2, 243 - bgDark / dayPeriod*255*2);

    //ground
    fill(143-bgDark*(143-66)/dayPeriod*2, 206-bgDark*(206-95)/dayPeriod*2, 0);
    noStroke();
    ellipse(200, 400, 500, 180);
    
    //panel
    image(panelImg, 125, 156, 80, 80);
    
    //battery
    image(batteryImg, 140, -15, 100, 100);
    fill(255 - batteryLife / dayPeriod * 255 * 2, batteryLife / dayPeriod * 255 * 2, 0);
    rect(167, 18, batteryLife / dayPeriod * 61 * 2, 34);
  
    //during daytime
    if (time < dayPeriod/4 || time > dayPeriod*3/4) {
       
       //house
       image(houseDayImg, 130, 200, 130, 130);

    } else { //during nighttime
       
        //house 
        drawStars();
        image(houseNightImg, 130, 200, 130, 130);
   }

    frameCount += 1;

    //function
    drawSun(time);
    drawTrees();
}


function drawSun(time) { 
   push();
   translate(200, 400);
    rotate(frameCount * 2 * PI / dayPeriod);
   fill(255, 206, 59);
   ellipse(0, -300, 70, 70);
   pop();
}

function drawStars() { //draw stars at random locations in the sky when it becomes night and disappear when it becomes daytime again
    for(i = 0; i < stars.length; i++){
        stars[i].display();
    }
}

function drawTrees(){ //draw trees at random locations every time you refresh 
    for(i = 0; i < trees.length; i++){
        trees[i].display();
    }
}

/*Name:Camellia(Siyun) Wang; 
Section: C; 
Email Address: siyunw@andrew.cmu.edu;
Assignment-14;*/

//start page
var page = "start";

//scene1
var meadows = [];
var cows1 = [];
var cows1n = [];
var cows2 = [];
var cows2b = [];
var groups = [];
var horses = [];
var horses2 = [];
var cows3 = [];
var birds = [];
var mountains = [];

//scene2
var meadows2 = [];
var cows12 = [];
var cows1n2 = [];
var cows22 = [];
var cows2b2 = [];
var groups2 = [];
var houses = [];
var houses2 = [];
var birds2 = [];
var mountains2 = [];
var factorys = [];
var skys = [];
var towns = [];

//scene3
var angle = 0;
var ices1 = [];
var ices1n = [];
var ices2 = [];
var ices2b = [];
var ices2c = [];
var ices3 = [];
var bears = [];
var penguins = [];
var factorys2 = [];
var seas = [];
var droughts = [];

function preload(){
    //startpage
    sun = loadImage("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/12/sun.png");
    pre = loadImage("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/12/pre-pic.png");
    indus = loadImage("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/12/industrial-pic.png");
    post = loadImage("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/12/post-pic.png");

    //scene1
    backgroundImage = loadImage("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/12/back.jpeg");
    mountain = loadImage("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/12/mountains.png")
    cow1 = loadImage("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/12/cow1.png");
    cow2 = loadImage("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/12/cow2.png");
    sheeps = loadImage("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/12/sheeps.png");
    horse = loadImage("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/12/horse.png");
    meadow = loadImage("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/12/background.png");
    cow3 = loadImage("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/12/cow3.png");
    bird = loadImage("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/12/birds.png");

    //scene2
    sky = loadImage("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/12/sky.png");
    mountain2 = loadImage("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/12/mountain.png");
    meadow2 = loadImage("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/12/meadow.png");
    house = loadImage("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/12/house.png");
    house2 = loadImage("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/12/house2.png");
    factory = loadImage("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/12/factory-1.png");
    town = loadImage("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/12/town.png");

    //scene3
    sea = loadImage("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/12/sea.png");
    bear = loadImage("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/12/polar-bear.png");
    penguin = loadImage("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/12/penguin.png");
    ice1 = loadImage("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/12/iceburg2.png");
    ice2 = loadImage("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/12/iceburg3.png");
    ice3 = loadImage("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/12/iceburg1.png");
    factory2 = loadImage("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/12/factory.png");
    drought = loadImage("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/12/deforestation.png");
}

function setup() {
    createCanvas(480, 400); 

    //scene1
    //the meadow
    var mea = makeMeadow(1,400);
    meadows.push(mea);
    //the mountain
    var mon = makeMountain(120,50);
    mountains.push(mon);
    //cow1
    var cow1 = makeCow1(150,250);
    cows1.push(cow1);
    //cow1n
    var cow1n = makeCow1n(1100,270);
    cows1n.push(cow1n);
    //cow2
    var cow2 = makeCow2(610,240);
    cows2.push(cow2);
    //group
    var gro = makeGroup(650,280);
    groups.push(gro);
    //horse
    var hor = makeHorse(300,190);
    horses.push(hor);
    //horse2
    var hor2 = makeHorse2(900,150);
    horses2.push(hor2);
    //cow3
    var cow3 = makeCow3(1200,325);
    cows3.push(cow3);
    //bird
    var bird = makeBird(1220,25);
    birds.push(bird);


    //scene2
    //the town
    var town = makeTown(810,-20);
    towns.push(town);
    // the sky
    var sky = makeSky(0,100);
    skys.push(sky);
    //the meadow
    var mea2 = makeMeadow2(1,400);
    meadows2.push(mea2);
    //the mountain
    var mon2 = makeMountain2(1,50);
    mountains2.push(mon2);
    //cow12
    var cow12 = makeCow12(50,220);
    cows12.push(cow12);
    //cow1n2
    var cow1n2 = makeCow1n2(150,200);
    cows1n2.push(cow1n2);
    //cow2
    var cow22 = makeCow22(240,220);
    cows22.push(cow22);
    //group
    var gro2 = makeGroup2(600,260);
    groups2.push(gro2);
    //house
    var hou = makeHouse(550,-20);
    houses.push(hou);
    //house2
    var hou2 = makeHouse2(450,50);
    houses2.push(hou2);
    //factory
    var fac = makeFactory(1050,40);
    factorys.push(fac);
    //bird
    var bird2 = makeBird2(1220,25);
    birds2.push(bird2);


    //scene3
    // the sea
    var se = makeSea(1,1);
    seas.push(se);
    //the bear
    var bea = makeBear(600,150);
    bears.push(bea);
    //the penguin
    var pen = makePenguin(50,200);
    penguins.push(pen);
    //ice1
    var ic1 = makeIce1(1,5);
    ices1.push(ic1);
    //ice1n
    var ic1n = makeIce1n(500,120);
    ices1n.push(ic1n);
    //ice2
    var ic2 = makeIce2(250,200);
    ices2.push(ic2);
    //ice2b
    var ic2b = makeIce2b(890,240);
    ices2b.push(ic2b);
    //ice2c
    var ic2c = makeIce2c(830,220);
    ices2c.push(ic2c);
    //ice3
    var ic3 = makeIce3(550,140);
    ices3.push(ic3);
    //factory
    var fac2 = makeFactory2(1000,0);
    factorys2.push(fac2);
    //the drought
    var dro = makeDrought(2000,0);
    droughts.push(dro);

    frameRate(50);
}

function keyPressed(){
    if(key == "0"){
        page = "start";
    }
    else if(key == "a"){
        page = "scene1";
    }
    else if(key == "b"){
        page = "scene2"
    }
    else if(key == "c"){
        page = "scene3"
    }
}


function draw() {
    //startpage:
    if(page == "start"){
        background(143,188,143);
        var i = 0;
        while(i <= width){
            push();
            translate(90+i,310);
            rotate(radians(angle));
            imageMode(CENTER);
            image(sun, 0, 0, 100,100);
            pop();
            angle += 1;
            i = i+150;
        }
        textSize(25);
        text('How Industrialization Changed Our Life',25,70);
        image(pre,30,125,120,150);
        image(indus,180,125,120,150);
        image(post,330,125,120,150);
        textSize(15);
        text('Pre-Industrial',45,120);
        text('Industrial',210,120);
        text('Post-Industrial',345,120);
         //message at bottom
        fill(0);
        textSize(15);
        text("Please type a to see Pre-Industrial, b to see Industrial,",30, height - 35);
        text("and c to see Post-Industrial. Press 0 to reset", 30, height - 15);
    }

    //scene1
    if(page == "scene1"){
         background(backgroundImage);

        updateAndDisplayMountain();
        removeMountainThatHaveSlippedOutOfView();

        updateAndDisplayHorse2();
        removeHorse2ThatHaveSlippedOutOfView();

        updateAndDisplayMeadow();
        removeMeadowThatHaveSlippedOutOfView();

        updateAndDisplayHorse();
        removeHorseThatHaveSlippedOutOfView();

        updateAndDisplayCow2();
        removeCow2ThatHaveSlippedOutOfView();

        updateAndDisplayBird();
        removeBirdThatHaveSlippedOutOfView();

        updateAndDisplayGroup();
        removeGroupThatHaveSlippedOutOfView();

        updateAndDisplayCow1();
        removeCow1ThatHaveSlippedOutOfView();
        updateAndDisplayCow1n();
        removeCow1nThatHaveSlippedOutOfView();

        updateAndDisplayCow3();
        removeCow3ThatHaveSlippedOutOfView();
    }

    else if(page == "scene2"){
        background(255);
        updateAndDisplaySky();
        removeSkyThatHaveSlippedOutOfView();

        updateAndDisplayHouse2();
        removeHouse2ThatHaveSlippedOutOfView();

        updateAndDisplayMountain2();
        removeMountain2ThatHaveSlippedOutOfView();

        updateAndDisplayFactory();
        removeFactoryThatHaveSlippedOutOfView();

        updateAndDisplayTown();
        removeTownThatHaveSlippedOutOfView();

        updateAndDisplayMeadow2();
        removeMeadow2ThatHaveSlippedOutOfView();


        updateAndDisplayHouse();
        removeHouseThatHaveSlippedOutOfView();

        updateAndDisplayCow22();
        removeCow22ThatHaveSlippedOutOfView();

        updateAndDisplayBird2();
        removeBird2ThatHaveSlippedOutOfView();

        updateAndDisplayGroup2();
        removeGroup2ThatHaveSlippedOutOfView();

        updateAndDisplayCow12();
        removeCow12ThatHaveSlippedOutOfView();
        updateAndDisplayCow1n2();
        removeCow1n2ThatHaveSlippedOutOfView();
    }

    else if(page == "scene3"){
        background(255);

        updateAndDisplaySea();
        removeSeaThatHaveSlippedOutOfView();

        updateAndDisplayFactory2();
        removeFactory2ThatHaveSlippedOutOfView();

        updateAndDisplayDrought();
        removeDroughtThatHaveSlippedOutOfView();

        updateAndDisplayIce1();
        removeIce1ThatHaveSlippedOutOfView();

        updateAndDisplayIce1n();
        removeIce1nThatHaveSlippedOutOfView();

        updateAndDisplayIce2();
        removeIce2ThatHaveSlippedOutOfView();

        updateAndDisplayIce2c();
        removeIce2cThatHaveSlippedOutOfView();

        updateAndDisplayIce2b();
        removeIce2bThatHaveSlippedOutOfView();

        updateAndDisplayIce3();
        removeIce3ThatHaveSlippedOutOfView();

        updateAndDisplayBear();
        removeBearThatHaveSlippedOutOfView();

        updateAndDisplayPenguin();
        removePenguinThatHaveSlippedOutOfView();
    }

    
}



//scene 1: Pre-industrial


//the meadow
function makeMeadow(xm,ym) {
    var M = {
        x: xm, 
        y: ym,
        move: meadowMove,
        speed: -1,
        display: meadowDisplay};
    return M;
}

function meadowMove() {
    this.x += this.speed;
}

function meadowDisplay(xm) {
   image(meadow, this.x, 0,1400,400);
}

function updateAndDisplayMeadow(){
    for(var i = 0; i < meadows.length; i++){
        meadows[i].move();
        meadows[i].display();
    }
}

function removeMeadowThatHaveSlippedOutOfView(){
    for (var i = 0; i < meadows.length; i++){
        if (meadows[i].x == -900) {
            page = "start";
        }
    }
}

//the mountain
function makeMountain(xmo,ymo) {
    var Mo = {
        x: xmo, 
        y: ymo,
        move: mountainMove,
        speed: -1,
        display: mountainDisplay};
    return Mo;
}

function mountainMove() {
    this.x += this.speed;
}

function mountainDisplay(xmo) {
   image(mountain, this.x, 0,1200,430);
}

function updateAndDisplayMountain(){
    for(var i = 0; i < mountains.length; i++){
        mountains[i].move();
        mountains[i].display();
    }
}

function removeMountainThatHaveSlippedOutOfView(){
    for (var i = 0; i < mountains.length; i++){
        if (mountains[i].x < -1440) {
            mountains.shift(mountains[i]);
        }
    }
}

//cow1
function makeCow1(xc1,yc1){
    var C1 = {
        x: xc1, 
        y: yc1,
        move: cow1Move,
        speed: -1,
        display: cow1Display};
    return C1;
}

function cow1Move(){
    this.x +=this.speed;
}

function cow1Display(xc1,yc1){
    image(cow1, this.x, this.y,100,80);
}

function updateAndDisplayCow1(){
    for(var i = 0; i < cows1.length; i++){
        cows1[i].move();
        cows1[i].display();
    }
}

function removeCow1ThatHaveSlippedOutOfView(){
    for (var i = 0; i < cows1.length; i++){
        if (cows1[i].x < -1440) {
            cows1.shift(cows1[i]);
        }
    }
}

//cow1n
function makeCow1n(xc1n,yc1n){
    var C1n = {
        x: xc1n, 
        y: yc1n,
        move: cow1nMove,
        speed: -1,
        display: cow1nDisplay};
    return C1n;
}

function cow1nMove(){
    this.x +=this.speed;
}

function cow1nDisplay(xc1,yc1){
    image(cow1, this.x, this.y,100,80);
}

function updateAndDisplayCow1n(){
    for(var i = 0; i < cows1n.length; i++){
        cows1n[i].move();
        cows1n[i].display();
    }
}

function removeCow1nThatHaveSlippedOutOfView(){
    for (var i = 0; i < cows1n.length; i++){
        if (cows1n[i].x < -1440) {
            cows1n.shift(cows1n[i]);
        }
    }
}



//cow2
function makeCow2(xc2,yc2){
    var C2 = {
        x: xc2, 
        y: yc2,
        move: cow2Move,
        speed: -1,
        display: cow2Display};
    return C2;
}

function cow2Move(){
    this.x +=this.speed;
}

function cow2Display(xc2,yc2){
    image(cow2, this.x, this.y,150,150);
}

function updateAndDisplayCow2(){
    for(var i = 0; i < cows2.length; i++){
        cows2[i].move();
        cows2[i].display();
    }
}

function removeCow2ThatHaveSlippedOutOfView(){
    for (var i = 0; i < cows2.length; i++){
        if (cows2[i].x < -1440) {
            cows2.shift(cows2[i]);
        }
    }
}


//group
function makeGroup(xg,yg){
    var G = {
        x: xg, 
        y: yg,
        move: groupMove,
        speed: -1,
        display: groupDisplay};
    return G;
}

function groupMove(){
    this.x +=this.speed;
}

function groupDisplay(xg,yg){
    image(sheeps, this.x, this.y,150,150);
}

function updateAndDisplayGroup(){
    for(var i = 0; i < groups.length; i++){
        groups[i].move();
        groups[i].display();
    }
}

function removeGroupThatHaveSlippedOutOfView(){
    for (var i = 0; i < groups.length; i++){
        if (groups[i].x < -1440) {
            groups.shift(groups[i]);
        }
    }
}


//horse
function makeHorse(xw,yw){
    var W = {
        x: xw, 
        y: yw,
        move: horseMove,
        speed: -1,
        display: horseDisplay};
    return W;
}

function horseMove(){
    this.x +=this.speed;
}

function horseDisplay(xw,yw){
    image(horse, this.x, this.y,200,200);
}

function updateAndDisplayHorse(){
    for(var i = 0; i < horses.length; i++){
        horses[i].move();
        horses[i].display();
    }
}

function removeHorseThatHaveSlippedOutOfView(){
    for (var i = 0; i < horses.length; i++){
        if (horses[i].x < -1440) {
            horses.shift(horses[i]);
        }
    }
}

//horse2
function makeHorse2(xw2,yw2){
    var W2= {
        x: xw2, 
        y: yw2,
        move: horse2Move,
        speed: -1,
        display: horse2Display};
    return W2;
}

function horse2Move(){
    this.x +=this.speed;
}

function horse2Display(xw2,yw2){
    image(horse, this.x, this.y,200,200);
}

function updateAndDisplayHorse2(){
    for(var i = 0; i < horses2.length; i++){
        horses2[i].move();
        horses2[i].display();
    }
}

function removeHorse2ThatHaveSlippedOutOfView(){
    for (var i = 0; i < horses2.length; i++){
        if (horses2[i].x < -1440) {
            horses2.shift(horses2[i]);
        }
    }
}

//cows3
function makeCow3(xs,ys){
    var S = {
        x: xs, 
        y: ys,
        move: cow3Move,
        speed: -1,
        display: cow3Display};
    return S;
}

function cow3Move(){
    this.x +=this.speed;
}

function cow3Display(xs,ys){
    image(cow3, this.x, this.y,75,75);
}

function updateAndDisplayCow3(){
    for(var i = 0; i < cows3.length; i++){
        cows3[i].move();
        cows3[i].display();
    }
}

function removeCow3ThatHaveSlippedOutOfView(){
    for (var i = 0; i < cows3.length; i++){
        if (cows3[i].x < -1440) {
            cows3.shift(cows3[i]);
        }
    }
}


//birds
function makeBird(xf,yf){
    var F = {
        x: xf, 
        y: yf,
        move: birdMove,
        speed: -2.0,
        display: birdDisplay};
    return F;
}

function birdMove(){
    this.x +=this.speed;
}

function birdDisplay(xf,yf){
    image(bird, this.x, this.y,200,200);
}

function updateAndDisplayBird(){
    for(var i = 0; i < birds.length; i++){
        birds[i].move();
        birds[i].display();
    }
}

function removeBirdThatHaveSlippedOutOfView(){
    for (var i = 0; i < birds.length; i++){
        if (birds[i].x < -1440) {
            birds.shift(birds[i]);
        }
    }
}

//scene 2: Industrial


//the town
function makeTown(xt,yt) {
    var T = {
        x: xt, 
        y: yt,
        move: townMove,
        speed: -1,
        display: townDisplay};
    return T;
}

function townMove() {
    this.x += this.speed;
}

function townDisplay(xt,yt) {
   image(town, this.x,this.y ,700,700);
}

function updateAndDisplayTown(){
    for(var i = 0; i < towns.length; i++){
        towns[i].move();
        towns[i].display();
    }
}

function removeTownThatHaveSlippedOutOfView(){
    for (var i = 0; i < towns.length; i++){
        if (towns[i].x < -1440) {
            towns.shift(towns[i]);
        }
    }
}

//the factory
function makeFactory(xf,yf) {
    var F = {
        x: xf, 
        y: yf,
        move: factoryMove,
        speed: -1,
        display: factoryDisplay};
    return F;
}

function factoryMove() {
    this.x += this.speed;
}

function factoryDisplay(xf,yf) {
   image(factory, this.x, this.y,350,350);
}

function updateAndDisplayFactory(){
    for(var i = 0; i < factorys.length; i++){
        factorys[i].move();
        factorys[i].display();
    }
}

function removeFactoryThatHaveSlippedOutOfView(){
    for (var i = 0; i < factorys.length; i++){
        if (factorys[i].x < -1440) {
            factorys.shift(factorys[i]);
        }
    }
}

// the sky
function makeSky(xs,ys) {
    var S = {
        x: xs, 
        y: ys,
        move: skyMove,
        speed: -1,
        display: skyDisplay};
    return S;
}

function skyMove() {
    this.x += this.speed;
}

function skyDisplay(xb) {
   image(sky, this.x, 0,1800,400);
}

function updateAndDisplaySky(){
    for(var i = 0; i < skys.length; i++){
        skys[i].move();
        skys[i].display();
    }
}

function removeSkyThatHaveSlippedOutOfView(){
    for (var i = 0; i < skys.length; i++){
        if (skys[i].x < -1440) {
            skys.shift(skys[i]);
        }
    }
}

//the meadow2
function makeMeadow2(xm2,ym2) {
    var M2 = {
        x: xm2, 
        y: ym2,
        move: meadow2Move,
        speed: -1,
        display: meadow2Display};
    return M2;
}

function meadow2Move() {
    this.x += this.speed;
}

function meadow2Display(xm2) {
   image(meadow2, this.x, 0,1400,400);
}

function updateAndDisplayMeadow2(){
    for(var i = 0; i < meadows2.length; i++){
        meadows2[i].move();
        meadows2[i].display();
    }
}

function removeMeadow2ThatHaveSlippedOutOfView(){
    for (var i = 0; i < meadows2.length; i++){
        if (meadows2[i].x == -920) {
            page = "start";
        }
    }
}

//the mountain2
function makeMountain2(xmo2,ymo2) {
    var Mo2 = {
        x: xmo2, 
        y: ymo2,
        move: mountain2Move,
        speed: -1,
        display: mountain2Display};
    return Mo2;
}

function mountain2Move() {
    this.x += this.speed;
}

function mountain2Display(xmo2) {
   image(mountain2, this.x, 0,1400,400);
}

function updateAndDisplayMountain2(){
    for(var i = 0; i < mountains2.length; i++){
        mountains2[i].move();
        mountains2[i].display();
    }
}

function removeMountain2ThatHaveSlippedOutOfView(){
    for (var i = 0; i < mountains2.length; i++){
        if (mountains2[i].x < -1440) {
            mountains2.shift(mountains2[i]);
        }
    }
}

//cow12
function makeCow12(xc12,yc12){
    var C12 = {
        x: xc12, 
        y: yc12,
        move: cow12Move,
        speed: -1,
        display: cow12Display};
    return C12;
}

function cow12Move(){
    this.x +=this.speed;
}

function cow12Display(xc12,yc12){
    image(cow1, this.x, this.y,100,80);
}

function updateAndDisplayCow12(){
    for(var i = 0; i < cows12.length; i++){
        cows12[i].move();
        cows12[i].display();
    }
}

function removeCow12ThatHaveSlippedOutOfView(){
    for (var i = 0; i < cows12.length; i++){
        if (cows12[i].x < -1440) {
            cows12.shift(cows12[i]);
        }
    }
}

//cow1n2
function makeCow1n2(xc1n2,yc1n2){
    var C1n2 = {
        x: xc1n2, 
        y: yc1n2,
        move: cow1n2Move,
        speed: -1,
        display: cow1n2Display};
    return C1n2;
}

function cow1n2Move(){
    this.x +=this.speed;
}

function cow1n2Display(xc12,yc12){
    image(cow1, this.x, this.y,100,80);
}

function updateAndDisplayCow1n2(){
    for(var i = 0; i < cows1n2.length; i++){
        cows1n2[i].move();
        cows1n2[i].display();
    }
}

function removeCow1n2ThatHaveSlippedOutOfView(){
    for (var i = 0; i < cows1n2.length; i++){
        if (cows1n2[i].x < -1440) {
            cows1n2.shift(cows1n2[i]);
        }
    }
}



//cow22
function makeCow22(xc22,yc22){
    var C22 = {
        x: xc22, 
        y: yc22,
        move: cow2Move,
        speed: -1,
        display: cow22Display};
    return C22;
}

function cow22Move(){
    this.x +=this.speed;
}

function cow22Display(xc22,yc22){
    image(cow2, this.x, this.y,150,150);
}

function updateAndDisplayCow22(){
    for(var i = 0; i < cows22.length; i++){
        cows22[i].move();
        cows22[i].display();
    }
}

function removeCow22ThatHaveSlippedOutOfView(){
    for (var i = 0; i < cows22.length; i++){
        if (cows22[i].x < -1440) {
            cows22.shift(cows22[i]);
        }
    }
}


//group2
function makeGroup2(xg2,yg2){
    var G2 = {
        x: xg2, 
        y: yg2,
        move: group2Move,
        speed: -1,
        display: group2Display};
    return G2;
}

function group2Move(){
    this.x +=this.speed;
}

function group2Display(xg2,yg2){
    image(sheeps, this.x, this.y,150,150);
}

function updateAndDisplayGroup2(){
    for(var i = 0; i < groups2.length; i++){
        groups2[i].move();
        groups2[i].display();
    }
}

function removeGroup2ThatHaveSlippedOutOfView(){
    for (var i = 0; i < groups2.length; i++){
        if (groups2[i].x < -1440) {
            groups2.shift(groups2[i]);
        }
    }
}


//house
function makeHouse(xh,yh){
    var H = {
        x: xh, 
        y: yh,
        move: houseMove,
        speed: -1,
        display: houseDisplay};
    return H;
}

function houseMove(){
    this.x +=this.speed;
}

function houseDisplay(xh,yh){
    image(house, this.x, this.y,500,500);
}

function updateAndDisplayHouse(){
    for(var i = 0; i < houses.length; i++){
        houses[i].move();
        houses[i].display();
    }
}

function removeHouseThatHaveSlippedOutOfView(){
    for (var i = 0; i < houses.length; i++){
        if (houses[i].x < -1440) {
            houses.shift(houses[i]);
        }
    }
}

//house2
function makeHouse2(xh2,yh2){
    var H2= {
        x: xh2, 
        y: yh2,
        move: house2Move,
        speed: -1,
        display: house2Display};
    return H2;
}

function house2Move(){
    this.x +=this.speed;
}

function house2Display(xh2,yh2){
    image(house2, this.x, this.y,500,500);
}

function updateAndDisplayHouse2(){
    for(var i = 0; i < houses2.length; i++){
        houses2[i].move();
        houses2[i].display();
    }
}

function removeHouse2ThatHaveSlippedOutOfView(){
    for (var i = 0; i < houses2.length; i++){
        if (houses2[i].x < -1440) {
            houses2.shift(houses2[i]);
        }
    }
}


//birds2
function makeBird2(xb,yb){
    var B = {
        x: xb, 
        y: yb,
        move: bird2Move,
        speed: -2.0,
        display: bird2Display};
    return B;
}

function bird2Move(){
    this.x +=this.speed;
}

function bird2Display(xb,yb){
    image(bird, this.x, this.y,200,200);
}

function updateAndDisplayBird2(){
    for(var i = 0; i < birds2.length; i++){
        birds2[i].move();
        birds2[i].display();
    }
}

function removeBird2ThatHaveSlippedOutOfView(){
    for (var i = 0; i < birds2.length; i++){
        if (birds2[i].x < -1440) {
            birds2.shift(birds2[i]);
        }
    }
}


//scene 3: Post-industrial

//the drought
function makeDrought(xd,yd) {
    var D = {
        x: xd, 
        y: yd,
        move: droughtMove,
        speed: -1,
        display: droughtDisplay};
    return D;
}

function droughtMove() {
    this.x += this.speed;
}

function droughtDisplay(xd,yd) {
   image(drought, this.x,this.y ,1000,400);
}

function updateAndDisplayDrought(){
    for(var i = 0; i < droughts.length; i++){
        droughts[i].move();
        droughts[i].display();
    }
}

function removeDroughtThatHaveSlippedOutOfView(){
    for (var i = 0; i < droughts.length; i++){
        if (droughts[i].x == -450) {
            page = "start";
        }
    }
}

//the factory
function makeFactory2(xf2,yf2) {
    var F2 = {
        x: xf2, 
        y: yf2,
        move: factory2Move,
        speed: -1,
        display: factory2Display};
    return F2;
}

function factory2Move() {
    this.x += this.speed;
}

function factory2Display(xf2,yf2) {
   image(factory2, this.x, this.y,1000,400);
}

function updateAndDisplayFactory2(){
    for(var i = 0; i < factorys2.length; i++){
        factorys2[i].move();
        factorys2[i].display();
    }
}

function removeFactory2ThatHaveSlippedOutOfView(){
    for (var i = 0; i < factorys2.length; i++){
        if (factorys2[i].x < -1440) {
            factorys2.shift(factorys2[i]);
        }
    }
}

// the sea
function makeSea(xs,ys) {
    var S = {
        x: xs, 
        y: ys,
        move: seaMove,
        speed: -1,
        display: seaDisplay};
    return S;
}

function seaMove() {
    this.x += this.speed;
}

function seaDisplay(xb) {
   image(sea, this.x, 0,1400,400);
}

function updateAndDisplaySea(){
    for(var i = 0; i < seas.length; i++){
        seas[i].move();
        seas[i].display();
    }
}

function removeSeaThatHaveSlippedOutOfView(){
    for (var i = 0; i < seas.length; i++){
        if (seas[i].x < -1440) {
            seas.shift(seas[i]);
        }
    }
}

//the bear
function makeBear(xb,yb) {
    var B = {
        x: xb, 
        y: yb,
        move: bearMove,
        speed: -1,
        display: bearDisplay};
    return B;
}

function bearMove() {
    this.x += this.speed;
}

function bearDisplay(xb,yb) {
   image(bear, this.x, this.y,200,200);
}

function updateAndDisplayBear(){
    for(var i = 0; i < bears.length; i++){
        bears[i].move();
        bears[i].display();
    }
}

function removeBearThatHaveSlippedOutOfView(){
    for (var i = 0; i < bears.length; i++){
        if (bears[i].x < -1440) {
            bears.shift(bears[i]);
        }
    }
}

//the penguin
function makePenguin(xp,yp) {
    var P = {
        x: xp, 
        y: yp,
        move: penguinMove,
        speed: -1,
        display: penguinDisplay};
    return P;
}

function penguinMove() {
    this.x += this.speed;
}

function penguinDisplay(xp,yp) {
   image(penguin, this.x, this.y,400,400);
}

function updateAndDisplayPenguin(){
    for(var i = 0; i < penguins.length; i++){
        penguins[i].move();
        penguins[i].display();
    }
}

function removePenguinThatHaveSlippedOutOfView(){
    for (var i = 0; i < penguins.length; i++){
        if (penguins[i].x < -1440) {
            penguins.shift(penguins[i]);
        }
    }
}

//ice1
function makeIce1(xc1,yc1){
    var C1 = {
        x: xc1, 
        y: yc1,
        move: ice1Move,
        speed: -1,
        display: ice1Display};
    return C1;
}

function ice1Move(){
    this.x +=this.speed;
}

function ice1Display(xc1,yc1){
    image(ice1, this.x, this.y,400,400);
}

function updateAndDisplayIce1(){
    for(var i = 0; i < ices1.length; i++){
        ices1[i].move();
        ices1[i].display();
    }
}

function removeIce1ThatHaveSlippedOutOfView(){
    for (var i = 0; i < ices1.length; i++){
        if (ices1[i].x < -1440) {
            ices1.shift(ices1[i]);
        }
    }
}

//ice1n
function makeIce1n(xc1n,yc1n){
    var C1n = {
        x: xc1n, 
        y: yc1n,
        move: ice1nMove,
        speed: -1,
        display: ice1nDisplay};
    return C1n;
}

function ice1nMove(){
    this.x +=this.speed;
}

function ice1nDisplay(xc1,yc1){
    image(ice1, this.x, this.y,200,200);
}

function updateAndDisplayIce1n(){
    for(var i = 0; i < ices1n.length; i++){
        ices1n[i].move();
        ices1n[i].display();
    }
}

function removeIce1nThatHaveSlippedOutOfView(){
    for (var i = 0; i < ices1n.length; i++){
        if (ices1n[i].x < -1440) {
            ices1n.shift(ices1n[i]);
        }
    }
}



//ice2
function makeIce2(xc2,yc2){
    var C2 = {
        x: xc2, 
        y: yc2,
        move: ice2Move,
        speed: -1,
        display: ice2Display};
    return C2;
}

function ice2Move(){
    this.x +=this.speed;
}

function ice2Display(xc2,yc2){
    image(ice2, this.x, this.y,200,200);
}

function updateAndDisplayIce2(){
    for(var i = 0; i < ices2.length; i++){
        ices2[i].move();
        ices2[i].display();
    }
}

function removeIce2ThatHaveSlippedOutOfView(){
    for (var i = 0; i < ices2.length; i++){
        if (ices2[i].x < -1440) {
            ices2.shift(ices2[i]);
        }
    }
}


//ice2b
function makeIce2b(xw,yw){
    var W = {
        x: xw, 
        y: yw,
        move: ice2bMove,
        speed: -1,
        display: ice2bDisplay};
    return W;
}

function ice2bMove(){
    this.x +=this.speed;
}

function ice2bDisplay(xw,yw){
    image(ice2, this.x, this.y,200,200);
}

function updateAndDisplayIce2b(){
    for(var i = 0; i < ices2b.length; i++){
        ices2b[i].move();
        ices2b[i].display();
    }
}

function removeIce2bThatHaveSlippedOutOfView(){
    for (var i = 0; i < ices2b.length; i++){
        if (ices2b[i].x < -1440) {
            ices2b.shift(ices2b[i]);
        }
    }
}

//ice2c
function makeIce2c(xw2,yw2){
    var W2= {
        x: xw2, 
        y: yw2,
        move: ice2cMove,
        speed: -1,
        display: ice2cDisplay};
    return W2;
}

function ice2cMove(){
    this.x +=this.speed;
}

function ice2cDisplay(xw2,yw2){
    image(ice2, this.x, this.y,200,200);
}

function updateAndDisplayIce2c(){
    for(var i = 0; i < ices2c.length; i++){
        ices2c[i].move();
        ices2c[i].display();
    }
}

function removeIce2cThatHaveSlippedOutOfView(){
    for (var i = 0; i < ices2c.length; i++){
        if (ices2c[i].x < -1440) {
            ices2c.shift(ices2c[i]);
        }
    }
}


//ice3
function makeIce3(xf,yf){
    var F = {
        x: xf, 
        y: yf,
        move: ice3Move,
        speed: -1.0,
        display: ice3Display};
    return F;
}

function ice3Move(){
    this.x +=this.speed;
}

function ice3Display(xf,yf){
    image(ice3, this.x, this.y,300,300);
}

function updateAndDisplayIce3(){
    for(var i = 0; i < ices3.length; i++){
        ices3[i].move();
        ices3[i].display();
    }
}

function removeIce3ThatHaveSlippedOutOfView(){
    for (var i = 0; i < ices3.length; i++){
        if (ices3[i].x < -1440) {
            ices3.shift(ices3[i]);
        }
    }
}

var plastic = ["https://i.imgur.com/n3n2yAx.png", 
                "https://i.imgur.com/GO1fho6.png",
                "https://i.imgur.com/HTF7LVN.png",
                "https://i.imgur.com/lPCz5Kl.png",
                "https://i.imgur.com/uOAHfcT.png",
                "https://i.imgur.com/714d3E7.png",
                "https://i.imgur.com/mxW1JT4.png",
                "https://i.imgur.com/2diHO2t.png",
                "https://i.imgur.com/YfCSzcQ.png",
                "https://i.imgur.com/TZovsxa.png",
                "https://i.imgur.com/lK07FmR.png"];
var waste1;
var waste2;
var waste3;
var waste4;
var waste5;
var waste6;
var waste7;
var waste8;
var waste9;
var waste10;
var waste11;

var humanfiles = [];
var human = [];
var vehiclefiles = [];
var vehicles = [];
var wheel;
var instruction;

var newBackground = [];
var newCharacter = [];

var c1,c2;
var mode = false;
var instructionMode = true;

function preload() {
    //waste images
    waste1 = loadImage(plastic[0]);
    waste2 = loadImage(plastic[1]);
    waste3 = loadImage(plastic[2]);
    waste4 = loadImage(plastic[3]);
    waste5 = loadImage(plastic[4]);
    waste6 = loadImage(plastic[5]);
    waste7 = loadImage(plastic[6]);
    waste8 = loadImage(plastic[7]);
    waste9 = loadImage(plastic[8]);
    waste10 = loadImage(plastic[9]);
    waste11 = loadImage(plastic[10]);

    //characters
    humanfiles[0] = "https://i.imgur.com/gGl600Z.png";
    humanfiles[1] = "https://i.imgur.com/6yqtw3q.png";

    for (var i = 0; i < humanfiles.length; i++) {
        human[i] = loadImage(humanfiles[i]);
    }

    //vehicle
    vehiclefiles[0] = "https://i.imgur.com/gnO3lJm.png";
    vehiclefiles[1] = "https://i.imgur.com/S1GOMdC.png";

    for (var i = 0; i < vehiclefiles.length; i++) {
        vehicles[i] = loadImage(vehiclefiles[i]);
    }
    wheel= loadImage("https://i.imgur.com/Wkpp7B1.png");
    instruction = loadImage("https://i.imgur.com/QcOMxYC.png");
}
//Factory made of waste
function generateBackground(bx, bdx) {
    var b = {
        x: bx, 
        y:height-75,
        dx: bdx,
        items: random([waste1, waste2, waste3, waste4, waste5, waste6, waste7, waste8, waste9, waste10, waste11]),
        moveFunction: moveBackground,
        drawFunction: drawBackground
    }
    return b;

}

function moveBackground() { //generative landscape
    if (keyIsDown(RIGHT_ARROW)) {
        this.x -= this.dx; 
               
    } else if (keyIsDown(LEFT_ARROW)) {
        this.x += this.dx;
    }
    
}


function drawBackground() {
    var smallSize = 20;
    var bigSize = 30
    push();
    if (this.items == waste1) {
        image(waste1, this.x, 325-waste1.height);
    } else if (this.items == waste2) {
        image(waste2, this.x, 325-waste2.height);
    } else if (this.items == waste3) {
        image(waste3, this.x, 325-waste3.height);
    } else if (this.items == waste4) {
        image(waste4, this.x, 325-waste4.height);
    } else if (this.items == waste5) {
        image(waste5, this.x, 325-waste5.height);
    } else if (this.items == waste6) {
        image(waste6, this.x, 325-waste6.height);
    } else if (this.items == waste7) {
        image(waste7, this.x, 325-waste7.height);
    } else if (this.items == waste8) {
        image(waste8, this.x, 325-waste8.height);
    } else if (this.items == waste9) {
        image(waste9, this.x, 325-waste9.height);
    } else if (this.items == waste10) {
        image(waste10, this.x, 325-waste10.height);
    } else if (this.items == waste11) {
        image(waste11, this.x, 325-waste11.height);
    }

    pop();
    

}

function itemShow() {
    for(var i = 0; i < 100; i++) {
        newBackground[i].moveFunction();
        newBackground[i].drawFunction();
    }
}

//Character skating
function makeSkateCharacter (cx, cdx) {
    var c = {
        x: cx,
        dx: cdx,
        y: height-150,
        movingRight: true,
        stepSkateFunction: stepSkateCharacter,
        drawSkateFunction: drawSkateCharacter
    }
    return c;
}

function stepSkateCharacter () {
    if (keyIsDown(RIGHT_ARROW)) {
        this.movingRight = true;
        if (this.x < width/2) {
            this.x += this.dx;
        } 
    }
}

function drawSkateCharacter () {
    image(vehicles[0], this.x-25, height-80, 70, 25);
    image(human[0], this.x, this.y);

    
}

//Character riding bike
function makeBikeCharacter (mx, wmx, mdx) {
    var m = {
        x: mx,
        wx: wmx,
        dx: mdx,
        y: height-150,
        movingRight: true,
        stepBikeFunction: stepBikeCharacter,
        drawBikeFunction: drawBikeCharacter,
    }
    return m;

}


function stepBikeCharacter () {
    if (keyIsDown(RIGHT_ARROW)) {
        this.movingRight = true;
        push(); //bike wheel rotating
        imageMode(CENTER);
        translate(this.wx+18, this.y+73);
        r+=0.5;
        rotate(r);
        image(wheel, 0, 0, 35, 35);
        pop();
        push();
        imageMode(CENTER);
        translate(this.wx+103, this.y+73);
        r+=1;
        rotate(r);
        image(wheel, 0, 0, 35, 35);
        pop();

        if (this.x < width/2) {
            this.x += this.dx;
        } 

    }

}
var r = 0;

function drawBikeCharacter () {
    if (this.movingRight == true) {
        image(vehicles[1], this.x-40, height-120, 120, 60);
        image(human[1], this.x, this.y);
        
        
    } else {
        push();
        translate(600, 0);
        scale(-1, 1);
        image(vehicles[1], this.x-25, height-80, 200, 100);
        image(human[1], this.x, this.y);
        pop();

    }

}




function setup() {
    createCanvas(600, 400);
    frameRate(15);
    var n = 0;
    for (var i = 0; i < 100; i++) {
        var x = generateBackground(n, 5);
        newBackground.push(x);
        if (newBackground[i].items == waste1) { //placement of each waste factory
            n += waste1.width-2;
        } else if (newBackground[i].items == waste2) {
            n += waste2.width-2;
        } else if (newBackground[i].items == waste3) {
            n += waste3.width-2;
        } else if (newBackground[i].items == waste4) {
            n += waste4.width-2;
        } else if (newBackground[i].items == waste5) {
            n += waste5.width-2;
        } else if (newBackground[i].items == waste6) {
            n += waste6.width-2;
        } else if (newBackground[i].items == waste7) {
            n += waste7.width-2;
        } else if (newBackground[i].items == waste8) {
            n += waste8.width-2;
        } else if (newBackground[i].items == waste9) {
            n += waste9.width-2;
        } else if (newBackground[i].items == waste10) {
            n += waste10.width-2;
        } else if (newBackground[i].items == waste11) {
            n += waste11.width-2;
        }
    }

    var d = makeSkateCharacter(width/2, 3);
    var e = makeBikeCharacter(width/2, width/2-40, 5);

    newCharacter.push(d);
    newCharacter.push(e);
   

}

function draw() {
    var cAmount = 100;
    
    c1 = color(80);
    //gradient color change & fleeting effect on the factory in sustainable future
    c1.setAlpha(10 + 10 * sin(millis() / 1000)); 
    c2 = color(230);
    c4 = color(225,247,255);
    c3 = color(0, 171, 245);
    c3.setAlpha(10 + 10 * sin(millis() / 1000));

    var year = 2050;
    var title = "WHICH FUTURE DO YOU CHOOSE TO LIVE IN?";
  
        
    
    noStroke();
    if (mode) {        
         for(let y=0; y<height; y++){ //gradient background
            n = map(y,0,height,0,1);
            let newc = lerpColor(c3,c4,n);
            stroke(newc);
            line(0,y,width, y);
        }
        fill(255);
        textSize(270);
        text(year, width/2, height-82);
        textSize(25);
        textAlign(CENTER);
        text(title, width/2, height-300);
        itemShow();
        fill(100);
        noStroke();
        rect(0, height-76, width, 76);
        newCharacter[0].stepSkateFunction();
        newCharacter[0].drawSkateFunction();
    } else {
        background(0);
        for(let y=0; y<height; y++){
            n = map(y,0,height,0,1);
            let newc = lerpColor(c1,c2,n);
            stroke(newc);
            line(0,y,width, y);
        }
        fill(255);
        textSize(270);
        text(year, width/2, height-82);
        textSize(25);
        textAlign(CENTER);
        text(title, width/2, height-300);
        itemShow();
        fill(100);
        noStroke();
        rect(0, height-76, width, 76);
        newCharacter[1].drawBikeFunction();
        newCharacter[1].stepBikeFunction();

    }

    if (instructionMode) {
        push();
        imageMode(CENTER);
        image(instruction, width/2, height/2);
        pop();    }

    if (keyIsDown(81)) { //show instruction page
        push();
        imageMode(CENTER);
        image(instruction, width/2, height/2);
        pop();
     } 
    
    
}

//toggle between bike and skate
function keyPressed() {
    if (key == ' ') {
        if (mode == false) {
            mode = true;
        } else if (mode == true) {
            mode = false;
        }
    } 

}

function mousePressed() {
    if (instructionMode == true){
        instructionMode = false;
    }

}

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

}



////////////////////////////////////////////////////////////////////////////////////////////////////////////////