var anxiety;    //sound for computer anxiety
var sing;       //sound for birds singing
var doorclose;      //sound for door closing
var alarm;      //sound for the clock
var squish;     //sound for the virus
var drawer;

function preload() {                                          //loading sounds
    anxiety = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2021/11/Anxiety.wav");
    sing = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2021/11/birds.wav");
    doorclose = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2021/11/doorclose.m4a");
    alarm = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2021/11/clock.wav");
    squish = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2021/11/squish.wav")
    drawer = loadSound("https://courses.ideate.cmu.edu/15-104/f2020/wp-content/uploads/2021/11/drawer.wav")

}

function soundSetup() { 
                            //setting the volume for each sound
   anxiety.setVolume(1);
   sing.setVolume(0.2);
   doorclose.setVolume(1);
   alarm.setVolume(1);
   squish.setVolume(1);
   drawer.setVolume(1);

}


var virus = [];       //array of "germs"
var painted = [];   //paint on the wall
var x = [];
var y = [];
var reliefBubbles = [];
var landscape = [];     //array that creates hills
var rock = [];      //array that creates rock
var trees = [];     //trees on the close side of the road
var trees2 = [];    //trees on the far side of the road
var cars = [];      //cars on the road
var flocks = [];    //flocks of birds

var bx = 180;       //bird coordinates and
var by = 180; 
var bdx = 0; 
var bdy= 0;
var textX = 100;    //the scrolling text on the TV 
var germShot = -1;      //which germ has been "shot" with the syringe
var r = 40;    //radius of clock
var theta = 0;  // angle of rotation (starting) for clock
var c = 10;     //to move the chart
var count = -10;    //to control where the germs "stop" on the screen
var EamonnX = 100;  //The x location of me as I walk  
var opacity = 255;
var size = 10;
var noiseParam = 0;
var noiseStep = 0.03;       //extremity of the slopes



function setup() {
    createCanvas(400,300);
    background(220);
    frameRate(5)
    noStroke();

    fill(136,238,143);          //first scene background
        rect(0,0,400,height);

    t1 = makeTurtle(380,200);       //constructing turtles for the computer anxiety
    t2 = makeTurtle(380,200);
    t3 = makeTurtle(380,200);
    t4 = makeTurtle(380,200);
    t5 = makeTurtle(380,200);
                                   //setting the color and weight
    t1.lowerPen();          
    t1.setColor(color(0));
    t1.setWeight(random(1,3));
    t2.lowerPen();
    t2.setColor(color(0));
    t2.setWeight(random(1,3));
    t3.lowerPen();
    t3.setColor(color(0));
    t3.setWeight(random(1,3));
    t4.lowerPen();
    t4.setColor(color(0));
    t4.setWeight(random(1,3));
    t5.lowerPen();
    t5.setColor(color(0));
    t5.setWeight(random(1,3));

    noStroke();

    for(var i=0;i<=width/5;i++){        //creating hills
        var n= noise(noiseParam);       //picks value 0-1
        var value = map(n,0,1,150,250);        //scales it to the canvas size

        landscape.push(value);      //adds to array
        noiseParam+=noiseStep;      //moves to the right for the next point in the array
   }


    for(var i=0;i<=width/5;i++){        //creating rocks  
        var n2= noise(noiseParam);       //picks value 0-1
        var value2 = map(n2,0,1,250,300);        //scales it to the canvas size

        rock.push(value2);      //adds to array
        noiseParam+=noiseStep;      //moves to the right for the next point in the array
    }


                                    //plotting the starting objects
    for (var i = 0; i < 30; i++){      
        var Tx = random(width);
        var Ty = random(280,height);
            trees[i] = makeTree(Tx,Ty);
    } 
    for (var i = 0; i < 30; i++){
        var Tx2 = random(width);
        var Ty2 = random(240,260);
            trees2[i] = makeTree(Tx2,Ty2);
    } 
    for (var i = 0; i < 2; i++){    
        var Fx = random(width);
        var Fy = random(0,200);
            flocks[i] = makeFlock(Fx,Fy);
    } 
 
    for (var i = 0; i < 10; i++){
        var Cx = random(width);
            cars[i] = makeCar(Cx);
    }

    useSound();
}


function draw() {
                            //storyboard for the animation
    if(frameCount > 0 & frameCount<=100){
        openingScene();
    }

    if(frameCount>100 & frameCount<=200){
        anxiety.stop();
        sceneTwo();
    }
    if(frameCount==100){
        squish.play();
    }

    if(frameCount>200 & frameCount<=380){
        sceneThree();
        squish.stop();  
    }
    if(frameCount==200){
        alarm.play();
    }

    if(frameCount>380){
        alarm.stop();
        sing.play(); 
        finalScene();
    }

    if(frameCount==380){
        sing.play(); 
    }

    if(frameCount>1000){
        sing.stop();
    }
}

function openingScene(){        
    Window(100,50);             //drawing the room
    bed(0,200);
    chair(270,190);
    laptop(350,210);
    Eamonn(295,160);

    if(frameCount>20){      //initializing the computer anxiety
        push();
            computerAnxiety();
        pop();
    }

    if(frameCount==20){
         anxiety.play();
    }
    
    desk(340,210);

    bird();
    fill(255);       //white
        rect(147.5,50,5,150);     //frames
        rect(100,122.5,100,5);
}

                            //functions for the first scene
function Window(x,y){
    push();
        translate(x,y);
            fill(155,245,245);    //light blue
                rect(0,0,100,150);      //glass
            fill(255);       //white
                rect(47.5,0,5,150);     //frames
                rect(0,72.5,100,5);
    pop();
}

function bed(x,y){
    push();
        translate(x,y);
            fill(10,95,193);      //dark blue 
                rect(0,0,100,height,10);      //beds
                rect(200,0,200,height,10);
    pop();
}

function chair(x,y){
    push();
        translate(x,y);
            fill(255);        //white
                rect(0,0,8,110);      //chair
                rect(0,55,55,8);
                rect(55,55,8,60);
    pop();
}

function desk(x,y){
    push();
        translate(x,y);
            fill(236,188,75);     //yellow-brown
                rect(0,0,75,100);
            fill(131,92,3);     //dark brown
                rect(-227,0,75,100)
            fill(166,123,21);   //light brown
                rect(-220,10,60,30);
            fill(131,92,3);     //dark brown
                ellipse(-190,25,10,10);       //knob

            if(mouseX>110 & mouseX<180 && mouseY>220 && mouseY<250 && mouseIsPressed){       //if mouse is pressed on drawer, open it
                fill(0);        //black
                   rect(-217,10,54,30);     //inside of drawer
                fill(166,123,21);   
                   rect(-220,20,60,30);
                fill(131,92,3);
                   ellipse(-190,35,10,10);      //knob
            }
    pop();
}

function laptop(x,y){
    push();
        translate(x,y);
            fill(150);    //gray
                rect(1,-2,30,3);               //laptop keyboard
                quad(30,0,30,3,43,-20,41,-23);    //screen
    pop();
}

function Eamonn(x,y){
    push();
        translate(x,y);
            fill(0);      //black
                rect(-10,65,65,20,10);      //legs
                rect(35,65,20,75,10);
            fill(186);  //gray
                rect(32,130,30,10,10);      //shoe
            fill(255,220,200);      //beige
                ellipse(2,0,29);        //head
                rect(-2,0,8,20);        //neck
            fill(242,201,69);       //golden brown
                ellipse(-6,0,13,27);        //hair
                ellipse(4,-10,27,10);
            fill(176,58,58);        //maroon
                rect(-13,20,30,60,15);      //shirt
            fill(176);      //gray
        push();
            rotate(radians(-80));       //reaching out to laptop
                rect(-40,5,15,50,15);   //arm
        pop();
            fill(255,220,200);      //beige
                ellipse(47,41,15);      //head

    pop();

}


function bird(){
    push();
        if(mouseX>90 &mouseX<190 &&mouseY>50 &&mouseY<190){      //is mouse is on window, show bird
            bdx = mouseX-bx;        //"easing" the bird
            bdy= mouseY-by; 
            bx = bx + 0.1*bdx; 
            by = by + 0.1*bdy; 
        fill(138,102,18);       //dark brown
            triangle(bx,by-5,bx,by+5,bx+20,by+random(-5,5));        //wings
            triangle(bx,by-5,bx,by+5,bx-20,by+random(-5,5));
        fill(213,99,12);        //red brown
            triangle(bx+1,by-13,bx+1,by-8,bx+11,by-10);     //beak
        fill(182,139,54);       //dark brown
            ellipse(bx,by,12,15);       //head
        fill(138,102,18);       //light brown
            ellipse(bx,by-10,10,10);
        }
    pop();
}

function computerAnxiety(){
    var EamonnHeadX = 295;      //coordinates of my head
    var EamonnHeadY = 160;
    t1.forward(random(1,3));    //move at varying speeds
    t2.forward(random(1,3));
    t3.forward(random(1,3));
    t4.forward(random(1,3));
    t5.forward(random(1,3));


        t1.turnToward(EamonnHeadX, EamonnHeadY, 80);    //move toward my head
        t2.turnToward(EamonnHeadX, EamonnHeadY, 20);
        t3.turnToward(EamonnHeadX, EamonnHeadY, 50);
        t4.turnToward(EamonnHeadX, EamonnHeadY, 60);
        t5.turnToward(EamonnHeadX, EamonnHeadY, 70);
        t1.left(random(-1, 1));     //to make the movement erratic
        t2.left(random(-1, 1));
        t3.left(random(-1, 1));
        t4.left(random(-1, 1));
        t5.left(random(-1, 1));
}


function sceneTwo(){
    fill(255,200,104);      //orange
        rect(0,0,width,height);     //background
    Television(70,50);      
    fill(161,105,9);        //brown
        rect(45,235,300,100);     //desk
    chart(135,65);
    TVAnxiety();
    syringe();

    if (mouseIsPressed & (germShot > -1)) {       //if mouse is pressed on germ, remove it from array
        virus.splice(germShot,1);
    }
}

function Television(x,y){
    push();
        translate(x,y);
            stroke(0);
            strokeWeight(10);
            fill(166,250,255);        //light blue
                rect(0,0,250,150);        //screen
                rect(115,150,10,20);      //stand (stroke color)
                rect(25,175,200,5);       //stand
            fill(252,49,49);      //red
            noStroke();
                rect(5,115,240,15);       //news banner
            textSize(10);
            fill(255);      //white
                text("CORONAVIRUS RISING IN US",textX,127);
                    textX-=5;        //move text
                    if(textX<5){        //reset text if reaches end of TV
                        textX = 100;
                }

    pop();
}

function chart(x,y){
    push();
          translate(x,y);
              fill(255);        //white
              strokeWeight(2);
              stroke(0);
                  rect(0,0,120,90);     //chart background
                  line(10,20,10,80);        //axis
                  line(10,80,100,80);
             fill(255,0,0);     //red
             textSize(20);
                 text("CASES", 30,20);
             strokeWeight(5);
                 var ttl = makeTurtle(12,78);       //create a turtle
                     ttl.setWeight(5);
                     ttl.setColor(color(255,0,0));      //red
                     ttl.left(45);      //making graph line
                     ttl.forward(30);
                     ttl.right(90);
                     ttl.forward(15);
                     ttl.left(90);
                     ttl.forward(c);
                         c+=2       //chart is going up
    pop();
}

function TVAnxiety(){
    if(frameCount % 4 == 0){       //every 4 frames, make new germ
        virus.push(makeGerm(200,150));
      }

    for(var i=0;i<virus.length;i++){        //move and show germs
        virus[i].show();
        virus[i].move();
      }

        count+=1;
    }

function makeGerm(startX,startY){               //germ constructor
    var germ = {x: startX,
                y:startY,
                dx: random(-10,10),     //speeds
                dy:random(-10,10),
                breadth:random(20,40),      //width of germ
                color:color(0),
                moving:true,       
                show: showGerm,
                move: moveGerm
            }
    return germ;
}

function showGerm(){        //germ drawing
    push();
        fill(6,158,31);     //dark green
        ellipse(this.x,this.y,this.breadth,this.breadth);       //germ body

        var t=makeTurtle(this.x,this.y)     //make a turtle for each germ
        t.setWeight(5);
        t.setColor(color(6,158,31));        //dark green

        for(var i=0;i<7;i++){               //creating the "spikes"
            t.forward(this.breadth-5);      //one spike
            t.raisePen();
            t.back(this.breadth-5);     //going back to center, turning
            t.right(60);
            t.lowerPen();
        }
    pop();
}

function moveGerm(){

    if(this.moving==true){      //move germ diagonally
        this.x += this.dx;
        this.y += this.dy;
      }

    if(this.x>width - count || this.x<0+count || this.y>height-count || this.y<0+count){      //if it hits a boundary, defined by a count
        this.moving=false;
      }
}

function syringe(){
    push();
        rectMode(CENTER);
        translate(mouseX,mouseY);
        rotate(radians(45));
        fill(220);      //light gray
            rect(0,0,20,50);        //bottle
        rectMode(CORNER);
            rect(-5,25,10,5);       //cap
            rect(-10,25,20,2);
        fill(247,131,236);      //pink
            rect(-10,0,20,25);      //syringe liquid
        strokeWeight(2);
        stroke(220);        //gray
            line(0,-25,0,-50);      //needle
    pop();
}


function sceneThree(){
    fill(250,240,191);      //beige
         rect(0,0,width,height);        //background
    paint();
    clock(300,100);
    fill(164,115,1);        //brown
          rect(0,250,width,height);     //floor
      fill(245,217,152);        //white-beige
          rect(width-20,0,20,height);       //wall
    table(180,160);
    fill(121,61,2);     //dark brown
        rect(375,115,5,155);        //door(closed)

    push();
        frameRate(20)

        if(frameCount<=320){        //animating me walking
            if(frameCount%4 ==0){       //alternating animations
                EamonnWalk(EamonnX,130);
            }else{
                EamonnStand(EamonnX,130);
            }
            EamonnX+=2      //moving me
        }

        if(frameCount>=320 & frameCount<340){      //reaching out to the door
            arm();
            EamonnStand(335,130);
        }

        if(frameCount>330 & frameCount<360){
            fill(121,61,2);     //dark brown
                rect(315,115,60,155);       //door(open)
                fill(232,219,108);      //gold
                ellipse(325,200,9,9);       //knob
        }

        if(frameCount==310){
            doorclose.play();
        }
       
    pop();
}
                                 //functions for scene three
function EamonnStand(x,y){             
    push();
        translate(x,y);
            fill(255,220,200);        //beige
                ellipse(0,0,29);      //head
                rect(-4,0,8,20);      //neck
            fill(242,201,69);       //golden brown
                ellipse(-6,0,13,27);        //hair
                ellipse(4,-10,27,10);
            fill(176,58,58);        //maroon
                rect(-13,20,25,60,15);      //shirt
            fill(0);        //black    
                quad(-13,70,12,70,9,130,-10,130);       //leg
            fill(176);      //gray
                rect(-8,20,15,50,15);       //arm
            fill(255,220,200);      //beige
                ellipse(-1,70,15);      //hand
            fill(186);      //gray
                rect(-13,130,30,10,10);     //shoe
    pop();
}


function EamonnWalk(x,y){
    push();
        translate(x,y);
            fill(255,220,200);
                ellipse(0,0,29);
                rect(-4,0,8,20);
            fill(242,201,69);
                ellipse(-6,0,13,27);
                ellipse(4,-10,27,10);
            fill(176,58,58);
                rect(-13,20,25,60,15);
            fill(0);
                quad(-13,70,12,70,-5,130,-24,130);      //legs
                quad(-13,70,12,70,25,130,5,130);
            fill(176)
                rect(-8,20,15,50,15);
            fill(255,220,200)
                ellipse(-1,70,15)
            fill(186,186,186);
                rotate(radians(5));     //rotated shoes
                    rect(-15,130,30,10,10);
                rotate(radians(-10));
                    rect(-7,130,30,10,10);
    pop();
}

function arm(){
    push();
        fill(176);
            rotate(radians(-35));
                rect(180,320,15,50,15);     //arm reaching out to door
    pop();

    fill(255,220,200);       //beige
        ellipse(366,196,15);     //hand
}



function clock(x,y){
    push();
        translate(x,y);
        var shake = random(-3,3);       //to shake the clock
            fill(0);   
                ellipse(0+shake,0+shake,50,50);     //clock
            fill(255);
                ellipse(0+shake,0+shake,r,r);
        frameRate(20);
            var clockX = r/2 * cos(radians(theta));
            var clockY = r/2 * sin(radians(theta));
            stroke(0);
                line(0+shake, 0+shake, clockX, clockY);       //clock hand
                theta +=10;     //turn the hand
    pop();
}

function table(x,y){
    push();
        translate(x,y);
        fill(121,61,2);     //brown
            rect(0,0,60,70);        //body
            rect(0,70,10,30);       //legs
            rect(50,70,10,30);
    pop();
}

function paint(){           //draw function for paint object
   
    push();
        x.push(mouseX);     //draw  a line to where the mouse is
        y.push(mouseY);


        for (var i=0; i < x.length-1; i++) {
            strokeWeight(map(mouseY,0,height,0,10));        //chamge stroke weight with y position
            stroke(color(random(255),random(255),random(255)));     //change color randomly
            line(x[i],y[i],x[i+1],y[i+1]);      //draw line from one position to next (mouse positions)
    }
    pop();
}

                                //functions for the final scene
function finalScene(){
    sunset(2);
    fill(255,252,229);      //white-yellow
        ellipse(200,200,50,50);     //sun
    hills();
    fill(189);      //gray
        rect(0,260,width,20);       //road

    removeFlock();
    newFlock();

    removeCar();
    newCar();
                                       //showing and moving objects
    for(var i=0;i<trees2.length;i++){
        trees2[i].show();
    }  
    for(var i=0;i<cars.length;i++){
        cars[i].show();
        cars[i].move();
    }                              
    for(var i=0;i<trees.length;i++){
        trees[i].show();
    }
   for(var i=0;i<flocks.length;i++){
        flocks[i].show();
        flocks[i].move();
    }

 

    fill(240,221,159,60);    //opaque orange
        rect(0,0,width,height);   //create haze

        rocks();
        relief();
        Eamonn3(260,200);
        textSize(20);
        fill(0,0,255);
        text("THE END",300,100);

}


function sunset(size) {
    var green=215;
    var blue=238;
    var red=141

    for (var y = size/2; y < height + 50; y += size) {      //nested loop for grid
        for (var x = size/2; x < width + 50; x += size) {
            fill(red,green,blue);
            rect(x, y, size, size);      
        }
    red += (200/(width/size));      //create gradient
    green +=(100/(height/size));
    blue -=(50/(height/size));
    }
}

function makeTree(startX,startY){      //tree constructor
    var tree = {x: startX,
                y:startY,
                breadth:5,
                color: color(random(130,200),random(100,150),0),
                show: showTree
            }
    return tree;
}

function showTree(){
    push();
         translate(this.x, this.y);        //appear at width,280
             fill(121,90,5);     //gray
                 rect(0,-20,this.breadth,20);      //draw railing markers
             fill(this.color);
                 ellipse(2,-30,20,20);      //leaves
    pop();   
}

function removeCar(){               //remove car from  array once out of sight
    var carsToKeep = [];
        for (var i = 0; i < cars.length; i++){
            if (cars[i].x > 0) {
                carsToKeep.push(cars[i]);
            }
        }
    cars = carsToKeep; 
}


function newCar() {     //create a new car at a given probability
    var newCarChance = 0.05; 
        if (random(0,1) < newCarChance) {
            cars.push(makeCar(width));      //create new car at the edge
   }
}

function moveCar(){
    this.x += this.speed;   //mpve cars
}  

function showCar(){     
    push();
        noStroke();
        translate(this.x, 260);   
        fill(this.color)            
            rect(0,-7,this.breadth,this.height);        //body of car

        if(this.speed>0){
            rect(25,0,10,10);        //car facing right
          }else{
              rect(-10,0,10,10);        //car facing left
          }

        fill(0);       //black
            ellipse(5,10,10,10);       //wheels
            ellipse(25,10,10,10);
    pop(); 
    
}

function makeCar(startX){
       var car = {x: startX,
                  breadth:25,
                  height:random(15,20),
                  speed: random(-5,5),
                  color: color(random(0,255),random(0,255),random(0,255)),
                  move: moveCar,
                  show: showCar
            }
    return car;
}

function moveFlock(){
    this.x += this.speed;       //move horizontally
    this.y -= this.speed/2;
} 


function removeFlock(){
    var flocksToKeep = [];
        for (var i = 0; i < flocks.length; i++){
            if (flocks[i].x > 0) {
                flocksToKeep.push(flocks[i]);
            }
        }
    flocks = flocksToKeep; 
}

function newFlock() {
    var newFlockChance = 0.01; 
        if (random(0,1) < newFlockChance) {
            flocks.push(makeFlock(0,random(0,200)));
        }
} 

function showFlock(){
    push();
          stroke(0);
          translate(this.x,this.y);
              for(var i=0;i<this.numBirds;i++){
                    line(0+(2*i)+random(-1,1),0+(2*i),5+(2*i),5+(2*i));     //wings of birds
                    line(5+(2*i),5+(2*i),10+(2*i),0+(2*i)+random(-1,1));
              }
      pop();    
}

function makeFlock(startX,startY){
    var flock = {x: startX,
                 y: startY,
                 numBirds: random(3,7),
                 speed:2,
                 move: moveFlock,
                 show: showFlock
            }
    return flock;
}

function hills(){
    beginShape();
    noStroke();
        fill(60,131,67);        //green
            for (i=0;i<width/5; i++){
                curveVertex(i*5,landscape[i])       //creates slopes by connecting two points
                curveVertex((i+1)*5,landscape[i+1]);
   
            }

            curveVertex(width,height);      //stable values that create the green fill
            curveVertex(0,height);
    endShape(CLOSE);        //end shape and fill it
}

function rocks(){
    beginShape();
    noStroke();
        fill(129);        //gray
            for (i=0;i<width/5; i++){
                curveVertex(i*5,rock[i])       //creates slopes by connecting two points
                curveVertex((i+1)*5,rock[i+1]);
   
}

            curveVertex(width,height);      //stable values that create the gray fill
            curveVertex(0,height);
    endShape(CLOSE);        //end shape and fill it
}

function relief(){
    if(frameCount % 10 == 0){       //every 4 frames, make new Bubble
        reliefBubbles.push(makeBubble(260,200));
      }

    for(var i=0;i<reliefBubbles.length;i++){        //move and show Bubbles
        reliefBubbles[i].show();
        reliefBubbles[i].move();
      }
}

function makeBubble(startX,startY){     //bubble constructor
    var bubble = {x: startX,
                y:startY, 
                opacity:255,
                size:10,
                show: showBubble,
                move: moveBubble
            }
    return bubble;
}

function showBubble(){
    push();
        fill(220,this.opacity);     //light gray
        ellipse(this.x,this.y,this.size,this.size);       //germ body
    pop();
}

function moveBubble(){
    this.size+=1;       //grow bubbles
    this.opacity-=3;        //fade 
}



function Eamonn3(x,y){  
    push();
        translate(x,y);
            fill(255,220,200);        //beige
                ellipse(0,0,40,40);       //head
                rect(-8,12,15,15);        //neck
            fill(242,201,69);     //golden brown
                ellipse(0,-2,38,35);      //hair
            push();
                fill(0);
                rotate(radians(50));      //legs in criss cross
                    rect(63,0,25,70,15);
                rotate(radians(-100));
                    rect(-87,0,25,70,15)
            pop();
                fill(176,58,58);
                    rect(-23,25,45,70,15);
    
    pop();
}


function mousePressed(){
    if(frameCount<100){                     //play drawer sound if mouse is pressed on drawer
        if(mouseX>110 & mouseX<180 && mouseY>220 && mouseY<250){ 
        drawer.play();
        }
    }

       germShot = -1;
    for (var i = 0; i < virus.length; i++) {
        var d = dist(mouseX, mouseY,
                      virus[i].x, virus[i].y)
        if (d < virus[i].breadth) {     //if clicked within a given germ
            germShot = i;       //pass this index to the splice function
        }
    }


}
                                        //turtle code, courtesy of Tom Cortina


function makeTurtle(tx, ty) {
    var turtle = {x: tx, y: ty,
                  angle: 0.0, 
                  penDown: true,
                  color: color(128),
                  weight: 1,
                  left: turtleLeft, right: turtleRight,
                  forward: turtleForward, back: turtleBack,
                  lowerPen: turtleLowerPen, raisePen: turtleRaisePen,
                  goto: turtleGoTo, angleto: turtleAngleTo,
                  turnToward: turtleTurnToward,
                  distanceTo: turtleDistTo, angleTo: turtleAngleTo,
                  setColor: turtleSetColor, setWeight: turtleSetWeight,
                  face: turtleFace};
    return turtle;
}

function turtleLeft(d) {
    this.angle -= d;
}


function turtleRight(d) {
    this.angle += d;
}


function turtleForward(p) {
    var rad = radians(this.angle);
    var newx = this.x + cos(rad) * p;
    var newy = this.y + sin(rad) * p;
    this.goto(newx, newy);
}


function turtleBack(p) {
    this.forward(-p);
}


function turtleLowerPen() {
    this.penDown = true;
}


function turtleRaisePen() {
    this.penDown = false;
}


function turtleGoTo(newx, newy) {
    if (this.penDown) {
      stroke(this.color);
      strokeWeight(this.weight);
      line(this.x, this.y, newx, newy);
    }
    this.x = newx;
    this.y = newy;
}


function turtleDistTo(x, y) {
    return sqrt(sq(this.x - x) + sq(this.y - y));
}


function turtleAngleTo(x, y) {
    var absAngle = degrees(atan2(y - this.y, x - this.x));
    var angle = ((absAngle - this.angle) + 360) % 360.0;
    return angle;
}


function turtleTurnToward(x, y, d) {
    var angle = this.angleTo(x, y);
    if (angle < 180) {
        this.angle += d;
    } else {
        this.angle -= d;
    }
}


function turtleSetColor(c) {
    this.color = c;
}


function turtleSetWeight(w) {
    this.weight = w;
}


function turtleFace(angle) {
    this.angle = angle;
    this.angle %= 360;
}

var boats = [];     //arrays to hold respective objects
var clouds = [];
var umbrellas = [];
var planes = []; 
var buildings = [];
var railings = [];
var people = [];
var towels = [];
var landscape = [];     //array that creates slope of shoreline
var noiseParam = 0;     
var noiseStep = 0.005;      //defines extremity of shoreline slope


function setup() {
    createCanvas(480,300); 
    
    for (var i = 0; i < 3; i++){        //make a certain amount of (object) to start out, at random locations within a constraint
        var rx = random(width);
        var ry = random(80,150)
            boats[i] = makeBoat(rx,ry);
    }

    for (var i = 0; i < 3; i++){
        var Cx = random(width);
        var Cy = random(0,60)
            clouds[i] = makeCloud(Cx,Cy);
    }

    for (var i = 0; i < people.length; i++){
        var Tx = random(width);
        var Ty = random(250,300)
            towels[i] = makeTowel(Tx,Ty);
    }
    for (var i = 0; i < people.length; i++){
        var Px = random(width);
        var Py = random(250,300)
            people[i] = makePerson(Px,Py);
    }

    for (var i = 0; i < 5; i++){
        var Ux = random(width);
        var Uy = random(250,300)
            umbrellas[i] = makeUmbrella(Ux,Uy);
    }
    
    for (var i = 0; i < 15; i++){
        var Bx = random(width);
            buildings[i] = makeBuilding(Bx);
    }

    for (var i = 0; i < 0.9; i++){
        var Px = random(width);
        var Py = random(0,20)
            planes[i] = makePlane(Px,Py);
   }
    

    for(var i = 0;i <= width / 5;i++){    
        var n = noise(noiseParam);       //picks value 0-1
        var value = map(n,0,1,50,height);        //scales it to the canvas size

            landscape.push(value);      //adds to array
            noiseParam += noiseStep;      //moves to the right for the next point in the array
   }
    
    frameRate(5);
}



function draw() {
    background(3,220,245);

    fill(13,66,212,230);    //dark blue
        rect(0,height / 4,width,height);      //body of water   
    fill(227,232,164,175);  //pale beige
        rect(0,height / 4-7,width,7);    //distant shoreline

                    //call the functions to spawn and despawn respective obejcts
    removeBoat();         
    newBoat(); 

    removeCloud();
    newCloud();

    removeUmbrella();

    removePlane();
    newPlane();

    removeBuilding();
    newBuilding();

    removeRailing();
    newRailing();

    removePerson();

    removeTowel();
  
   
                                                //call the move and show functions to continually draw and redraw objects after updated coordinates
    for (var i = 0; i < clouds.length; i++){
        clouds[i].move();
        clouds[i].show();
    }

    for (var i = 0; i < buildings.length; i++){
        buildings[i].move();
        buildings[i].show();
     }

    for (var i = 0; i < boats.length; i++){
        boats[i].move();
        boats[i].show();
    }
   

    displayHorizon();

     for (var i = 0; i < towels.length; i++){
        towels[i].move();
        towels[i].show();
    }

    for (var i = 0; i < people.length; i++){
        people[i].move();
        people[i].show();
    }

    for (var i = 0; i < umbrellas.length; i++){
        umbrellas[i].move();
        umbrellas[i].show();
    }


    for (var i = 0; i < planes.length; i++){
       planes[i].move();
       planes[i].show();
     }

    fill(159,159,159);
        rect(0,height-50,width,40);
    fill(110,110,110);
        rect(0,height-45,width,30);


    for (var i = 0; i < railings.length; i++){
       railings[i].move();
       railings[i].show();
     }    
}

                        //functions to remove an object from a displayed array once "out of sight"
function removeBoat(){
    
    var boatsToKeep = [];    //the boats that should still be displayed
    for (var i = 0; i < boats.length; i++){
        if (boats[i].x + boats[i].breadth > 0) {    //if the boat is closer than it's width to the edge
            boatsToKeep.push(boats[i]);     //add this boat to the boats that will be displayed
        }
    }
    boats = boatsToKeep; // only display the baots currently being kept
}

function removeCloud(){
    var cloudsToKeep = [];
    for (var i = 0; i < clouds.length; i++){
        if (clouds[i].x + clouds[i].breadth > 0) {
           cloudsToKeep.push(clouds[i]);
        }
   }
    clouds = cloudsToKeep; 
}

function removeUmbrella(){
    var umbrellasToKeep = [];
    for (var i = 0; i < umbrellas.length; i++){
        if (umbrellas[i].x + umbrellas[i].breadth > 0) {
           umbrellasToKeep.push(umbrellas[i]);
        }
    }
    umbrellas = umbrellasToKeep; 
}

function removePlane(){
    var planesToKeep = [];
    for (var i = 0; i < planes.length; i++){
        if (planes[i].x + 150 > 0) {
           planesToKeep.push(planes[i]);
        }
   }
    planes = planesToKeep; 
}

function removeBuilding(){
    var buildingsToKeep = [];
        for (var i = 0; i < buildings.length; i++){
            if (buildings[i].x > 0) {
                buildingsToKeep.push(buildings[i]);
        }
   }
    buildings = buildingsToKeep; 
}

function removeRailing(){
    var railingsToKeep = [];
        for (var i = 0; i < railings.length; i++){
            if (railings[i].x > 0) {
                railingsToKeep.push(railings[i]);
        }
   }
    railings = railingsToKeep; 
}

function removePerson(){
    var peopleToKeep = [];
        for (var i = 0; i < people.length; i++){
            if (people[i].x > 0) {
               peopleToKeep.push(people[i]);
        }
   }
    people = peopleToKeep; 
}

function removeTowel(){
    var towelsToKeep = [];
        for (var i = 0; i < towels.length; i++){
            if (towels[i].x > 0) {
               towelsToKeep.push(towels[i]);
        }
   }
    towels = towelsToKeep; 
}

                    //functions to create new objects that come into sight

function newBoat() {

    var newBoatChance = 0.009;      //the chance that a new boat will appear
    if (random(0,1) < newBoatChance) {      //activate probability
        boats.push(makeBoat(width,random(100,150)));        //add a new boat if the porbability condition is met
    }
}
function newCloud() {

    var newCloudChance = 0.001; 
    if (random(0,1) < newCloudChance) {
        clouds.push(makeCloud(width,random(0,60)));
    }
}


function newPlane() {

    var newPlaneChance = 0.003; 
    if (random(0,1) < newPlaneChance) {
        planes.push(makePlane(width, random(0,50)));
   }
}

function newBuilding() {

    var newBuildingChance = 0.1; 
    if (random(0,1) < newBuildingChance) {
        buildings.push(makeBuilding(width));
   }
}

function newRailing() {

    var newRailingChance = 0.8; 
    if (frameCount % 2 == 0 & random(0,1) < newRailingChance) {    //spawn every two frames, if probability condition is met
        railings.push(makeRailing(width));
   }
}

                        //functions to move the objects across the screen
function moveBoat() {
    this.x += this.speed;       //add a speed value to the the x position to chance it every frame
}

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

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

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

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

function movePerson(){
  this.x += this.Xspeed;
  this.y += this.Yspeed/3;       //move very slightly in Y direction
} 

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

                                //functions to show (object) by drawing it at the requested coordinates
function showBoat() {               

    var floorHeight = 10; 
    push();
    translate(this.x, this.y);      //plot the drawing at the the coordinates given
    noStroke(); 
    for (var i = 0; i < this.nFloors; i++) {
        fill(this.color,this.y*2);  //random color, with varying opacity based on y value (distance from viewer)
            rect(0, -15 - (i * floorHeight), this.breadth-10*i, 10);        //the boat levels
        if(this.nFloors == 3){
            fill(255,this.y*2);     //white, varying opacity
                rect(3,-15-(i*floorHeight), this.breadth-12*i,7)        //to make a "yacht"
    }     
        if(this.nFloors == 2){
            fill(161,227,238,this.y*2);     //light blue, varying opacity
                rect(5,-13-(floorHeight),this.windowBreadth,7);     //window
        }
        if(this.nFloors == 1){
            strokeWeight(5);
            stroke(this.color,this.y*2);        //rnadom color of boat, varying opacity
                line(7,0-(floorHeight),-6,-15-(floorHeight));   //fishing gig
            strokeWeight(2);
                line(-6,-15-(floorHeight),random(-12,-16),5-(floorHeight));     //fishing line
        }

    }
    pop();
}

function showCloud(){

    var cloudHeight = 10;       //height of a cloud
    var cHeight = this.nClouds * cloudHeight;       //height dpends on how many clouds
    fill(255,200);      //pale white
    noStroke();
    push();
    translate(this.x, this.y);      //appear at width, and random y in a constraint
        for (var i = 0; i < this.nClouds; i++) {
             ellipse(0, -15 - (i * cHeight), this.breadth-10, 30);      //draw cloud
        }
    pop();

 }

function showUmbrella(){

    var umbrellaHeight = 10; 
    noStroke();
    push();
    translate(this.x, this.y+15);       //appear at width, random y between shoreline and height(adjusted to ensure no umbrellas in water)
    noStroke(); 
        fill(255);      //white
            rect(0,0, this.breadth, this.height);       //umbrella stand
        fill(this.color);   //random color
        rotate(radians(this.angle));    //turn at different angles
            arc(0,10,40,40,180,TWO_PI);     //umbrella dome
    pop();
}

function showPlane(){
    
    push();
        translate(this.x, this.y);      //appear at width, random y within constraint
        noStroke(); 
        scale(this.scale);      //scale randomly
            fill(220,this.scale*400);       //opacity deoends on size
                ellipse(50,42.5,10,30);     //plane body and wings
                ellipse(50,50,50,15);
                ellipse(50,60,10,30);
            fill(50,this.scale*400);     //dark gray, varying opacity
                ellipse(33,47,4,4);     //cockpit window
                    
                for(var x=39;x < 55;x+=4)     //plane windows
                    ellipse(x,50,4,4);

        strokeWeight(1);    
        stroke(0,this.scale*400);      //black
            line(55,57.5,110,57.5);     //flag ropes
            line(55,42.5,110,42.5);
    fill(this.color);   //random color
    noStroke();
        rect(110,37.5,45+random(-2,2),25);  //flag, moving
    pop();
}

function showBuilding(){
    
   // var floorHeight = 2;        //height of a floor
    //var buildingHeight = this.nFloors * floorHeight;        //building height depends on how many floors
    fill(this.color);     
    
    push();
        noStroke();
        translate(this.x, 70);      //appear at width,70 (far shoreline)
            rect(0, -10, this.breadth, this.height*2);         //draw building
    pop();
    
}

function showRailing(){
    
    push();
         translate(this.x, 280);        //appear at width,280
         fill(200,200,200);     //gray
         stroke(0);     //black
             rect(0, -20,this.breadth,20);      //draw railing markers
    pop();
    
}

function showPerson(){

    push();
        translate(this.x, this.y+20);       //appear at width, and a random heught between shoreline and bottom of canvas(adjusted to ensure nobody in the water)
            fill(this.skinColor);    //random brown tone   
                ellipse(0,-5,5,5);        //head
        rectMode(CENTER);
            fill(this.shirtColor);      //random color
                rect(0,10,this.breadth,this.height);       //body
            fill(this.pantsColor);      //random color
                rect(0,25,this.breadth,this.height);       //legs 
    pop();
}

function showTowel(){

    push();
       translate(this.x, this.y+30);        //appear at width, random y between shoreline and height  
           fill(this.towelColor);       //random color
               rect(0,0,this.breadth,this.height);     //draw towel
    pop();
}

                                    //constructors for each object

function makeBoat(startX,startY) {
    var boat = {x: startX,      //where it gets translated to
                y:startY,
                breadth: round(random(20,40)),  //it's width
                windowBreadth: random(5,10),    //window width  
                speed: random(-2,-0.1),     //how fast it moves across canvas
                nFloors: round(random(1,3)),    //how many floors there are 
                color: random(150,255),     //color of boat
                move: moveBoat,     //functions to move and show the boat
                show: showBoat}
    return boat;
}

function makeCloud(startX,startY){
    var cloud = {x: startX,
                y:startY,
                breadth: round(random(60,100)),
                speed: random(-0.7,-0.3),
                nClouds: round(random(1,3)),
                move: moveCloud,
                show: showCloud}
   return cloud;
}

function makeUmbrella(startX,startY){
    var umbrella = {x: startX,
                y:startY,
                breadth: round(random(2,4)),
                speed: round(random(-5,-4.99)),
                height: random(25,30),
                color: color(random(0,255),random(0,255),random(0,255)),       //color of hood
                angle: random(-20,20),      //angle of hood rotation
                move: moveUmbrella,
                show: showUmbrella
            }
    return umbrella;
}

function makePlane(startX,startY){
    var plane = {x: startX,
                y:startY,
                scale: random(1 / 4,1),       //size of plane
                speed: random(-7,-5),
                color: color(random(0,255),random(0,255),random(0,255)),
                move: movePlane,
                show: showPlane
            }
    return plane;
}

function makeBuilding(startX){
       var building = {x: startX,
                       breadth: 10,
                       height:10,
                       speed: -1.0,
                       color: random(50,200),
                       //distance: random(100,200),
                       //nFloors: round(random(2,8)),
                       move: moveBuilding,
                       show: showBuilding
            }
    return building;
}

function makeRailing(startX){
    var railing = {x: startX,
                   breadth:10,
                   speed: -20,
                   move: moveRailing,
                   show: showRailing
            }
    return railing;
}

function makePerson(startX,startY){
      var person = {x: startX,
                    y:startY,
                    breadth: random(5,8),
                    height: random(14,17),
                    skinColor: color(random(200,250),random(100,150),random(20,100)),
                    shirtColor: color(random(0,255), random(0,255),random(0,255)),
                    pantsColor: color(random(0,255), random(0,255),random(0,255)),
                    Xspeed: random(-7,-4),
                    Yspeed: random(-0.5,0.5),
                    move: movePerson,
                    show: showPerson}
   return person;
}


function makeTowel(startX,startY){
      var towel = {x: startX,
                    y:startY,
                    breadth: random(10,20),
                    height: random(5,15),
                    towelColor: color(random(0,255), random(0,255),random(0,255)),
                    speed: -5,
                    move: moveTowel,
                    show: showTowel}
   return towel;
}




function displayHorizon(){
landscape.shift();      //removes the first array element

    n = noise(noiseParam);       //selecting a noise value
    value = map(n,0,1,50,height);       //plotting it onto the canvas by mapping

landscape.push(value);      //adding it to the lanscape array
noiseParam+=noiseStep;      //adding step to parameter

push();
    beginShape();
        noStroke();
            fill(227,232,164);        //green
                for (i=0;i<width/5; i++){
                    var newUmbrellaChance = 0.001;      //frequencies for objects
                    var newPersonChance = 0.003;
                    var newTowelChance = 0.002;
                    var r = random(0,1);     //predictor

                if (r < newUmbrellaChance){
                    umbrellas.push(makeUmbrella(width,random(landscape[i],height)));                //construct an object between slope line and the bottom of the canvas
                }
                if(r<newPersonChance){
                    people.push(makePerson(width,random(landscape[i],height)));
                }
                if(r<newTowelChance){
                    towels.push(makeTowel(width,random(landscape[i],height)));
                }
                

    curveVertex(i*5,landscape[i])       //creates slopes by connecting two points
    curveVertex((i+1)*5,landscape[i+1])   

    
}

    curveVertex(width,height+50);      //stable values that create the green fill
    curveVertex(0,height+50);
endShape(CLOSE);        //end shape and fill it
pop();
}

var angle = 0;		//gear turn
var t = 34;		//gear translate
var eSize = 10;		//ball sizes, center gear
var ballY = 409;		//front ball Y position
var recX = 7*t; 		//top piston X translation
var RecX = 7*t;			//bottom piston X tranlation 
var recY=10.5*t;		//pistons Y translation
var dir = 1; 		//top piston direction
var direction = 1;		//bottom piston direction
var speed = 2;			//piston speed
var recSize =  18;		//piston length
var BallY = 125;		//middle ball Y position
var windowSize = 25;	//window size
var Bally = 300;	//furthest ball start
var bright = 0;


function setup() {
    createCanvas(500, 409);
    background(220);
    text("p5.js vers 0.9.0 test.", 10, 15);
}

function draw() {
	background (210,146, 6);		//orange brown
	push();
	if(mouseIsPressed){
		if(mouseButton == RIGHT){		//if the right button is pressed
			background(210 - mouseY/2, 146 - mouseY/2, 6 - mouseY/2);		//gets darker with higher Y
				if(mouseY > height/2){		//if the mouse Y is greater half the height
			fill(255);		//stars
				ellipse (100,200,1,1);
				ellipse (200,100,5,5);
				ellipse (300,100,3,3);
				ellipse (300,200,5,5);
				ellipse (300,300,3,3);
				ellipse (150,50,5,5);
				ellipse (420,120,2,2);
				ellipse (200,100,5,5);
				ellipse (150,150,5,5);
				ellipse (180,220,2,2);
				ellipse (300,200,1.5,1.5);
				ellipse (300,250,1,1);
				ellipse (450,100,2,2);
				ellipse (100,289,5,5);
				ellipse(50,70,2.5,2.5);
				ellipse (190,120,2.4,2.4);
				ellipse (100,289,5,5);
				ellipse(50,70,2.5,2.5);
				ellipse (200,60,1.2,1.2);
				ellipse(90,90,2,2);
				ellipse (230,200,2.4,2.4);
				ellipse (460,60,5,5);
				ellipse(440,100,2.7,2.7);
				ellipse (250,250,2.4,2.4);
				ellipse (260,200,3,3);
				ellipse(240,220,2.1,2.1);
				ellipse(300,110,1.7,1.7);
				ellipse (280,190,2.3,2.3);
				ellipse (290,140,3.1,3.1);
				ellipse(215,210,2,2);
				ellipse (400,90,2.3,2.3);
				ellipse (410,120,1.5,1.5);
				ellipse(420,50,2,2);
			}
			if(mouseY < height/2){ 		//if mouse Y is lower than the height
				fill(255,255,117);
				ellipse(0,mouseY,60,60);		//sun
			}
		}
	}
pop();
push();
				fill(0,0,0,200);
rectMode(CORNER);
	var m = max(min(mouseX, 250), 0);
	var size = m * 350.0 / 400.0;
				fill(0,0,0,height - mouseY);
	rect(10,height/2-recSize*1.5,75,500);		//left chimney
	rect(0,height/2,size,500);		//left building
size = 350-size;
				fill(0,0,0,mouseY+50);
	rect(110+m*190/400,height/2-recSize*2,size,500);		//back building
		var ballWidth = max(min(mouseY, 100), 0);
	rect(110+m*190/400,height/2-recSize*4,ballWidth,37);		//back chimney
	
	if(BallY < 0){		//if ball goes past 0
		BallY = height/2-recSize*4;		//reappear at height of back chimney
}

	BallY = BallY-1;	//move up by 1 point 
		ellipse(110+m*190/400+ballWidth/2,BallY,ballWidth,-ballWidth);		//middle ball

	if(Bally < 0){		//if ball goes past 0
		Bally = 250;		//reset ball height to 250
}

	Bally = Bally-2	;	//move up by 2 points
			fill(0,0,0,mouseX);		//opacity changes with mouseX
			if(mouseY > 200){			//if mouse Y is greater than half the height
				fill(210,146, 6);		//fill changes to background (disappears)
			}

		ellipse(380,Bally,height / 4 - ballWidth,height / 4 - ballWidth);	//right ball
			fill(0,0,0);


rectMode(CENTER);		//rectangles oriented by center point

			fill(150);
rect(recX,recY + 5,3.2*recSize,1 / 2*recSize);		//top piston still
rect(RecX,recY + 25,3.5*recSize,1 / 2*recSize);		//bottom piston still

if(mouseX < 1.5*t & mouseY < 1.5*t){		//if mouse is in the top left corner
	if(recX > width-220 || recX < width-266){		//piston range
	dir =- dir; 		//top piston bounces
}
	if(RecX > width-220 || RecX < width-266){		//piston range
	direction = -direction;		//bottom piston bounces
}
	fill(150);		//light gray

push();
if(mouseIsPressed){
	if(mouseButton == LEFT){		//if left mouse button pressed
	ballY = ballY-20;		//ball speed up to 20 points 
	speed = 10;		//pistons speed up by factor of 10
	angle += 4;		//angle doubles
}
}
else{
	speed = 2;		//speed reset to 2

}
pop();
	
push();
	recX += dir*speed		//piston move
		rect(recX,recY+5,3.2*recSize,1 / 2*recSize);		//top piston
	RecX += -direction*speed;		//piston move	
		rect(RecX,recY+25,3.5*recSize,1 / 2*recSize);		//bottom piston
}
pop();

push();
	translate (6.7*t, 11*t);		//last piston
if(mouseX < 1.5*t & mouseY < 1.5*t){		//first gear in place
	rotate(radians(angle));	//spin rate
}
			fill(150);
		rect(0,0,50,50);		//gear part
		quad (t,0,0,t,-t,0,0,-t)		//gear part
			fill(50);		//dark gray
		ellipse(0,0, eSize, eSize);		//gear center
pop();	

push();
	translate(t,6.7*t);		//first piston
if(mouseX < 1.5*t & mouseY < 1.5*t){
	rotate(radians(-angle));
}
			fill(150);
		rect(0,0,50,50);	
		quad (t,0,0,t,-t,0,0,-t)
			fill(50);
		ellipse(0,0, eSize, eSize);	

pop();

		rectMode(CORNER);

			fill(150)
		rect(width-220,height-200,220,200);		//front building
		rect(width-100,height-250,50,100);		//front chimney
			fill(175,129,3);		//gray-orange
		rect(width-205,height-180,windowSize, windowSize*2);		//top row windows
		rect(width-165,height-180,windowSize,windowSize*2);
		rect(width-125,height-180,windowSize,windowSize*2);
		rect(width-40,height-180,windowSize,windowSize*2);
		rect(width-205,height-120,windowSize, windowSize*2);		//middle row windows
		rect(width-165,height-120,windowSize,windowSize*2);
		rect(width-125,height-120,windowSize,windowSize*2);
		rect(width-40,height-120,windowSize,windowSize*2);
		rect(width-205,height-60,windowSize, windowSize*2);		//bottom row windows
		rect(width-165,height-60,windowSize,windowSize*2);
		rect(width-125,height-60,windowSize,windowSize*2);
		rect(width-40,height-60,windowSize,windowSize*2);

push();

angle += 2
			fill(150);		
	translate(mouseX,mouseY);		//cursor gear
	rotate (radians(angle));
		rectMode(CENTER);
	noStroke();
		rect(0,0,50,50);
		quad (t,0,0,t,-t,0,0,-t)
pop();

			fill(50);
		ellipse(mouseX,mouseY,eSize,eSize);		//cursor gear center 

			fill(150);
	rectMode(CENTER);
	noStroke();

push();
	translate(t,2.9*t);		//first gear

if(mouseX < 1.5*t & mouseY < 1.5*t){
	rotate(radians(-angle))
}
		rect(0,0,50,50);	
		quad (t,0,0,t,-t,0,0,-t)
			fill(50);
		ellipse(0,0, eSize, eSize)
pop();

push();
	translate(1.5*t,4.8*t);		//second gear
if(mouseX < 1.5*t & mouseY < 1.5*t){
	rotate(radians(angle))
}
			fill(150);
		rect(0,0,50,50);	
		quad (t,0,0,t,-t,0,0,-t)
			fill(50);
		ellipse(0,0, eSize, eSize)
pop();

push();
	translate(1.5*t,8.6*t);		//third gear

if(mouseX < 1.5*t & mouseY < 1.5*t){
	rotate(radians(angle))
}
			fill(150);
		rect(0,0,50,50);	
		quad (t,0,0,t,-t,0,0,-t)
			fill(50);
		ellipse(0,0, eSize, eSize)
pop();

push();
	translate(t,10.5*t);		//fourth gear

if(mouseX < 1.5*t & mouseY < 1.5*t){
	rotate(radians(-angle))
}
			fill(150);
		rect(0,0,50,50);	
		quad (t,0,0,t,-t,0,0,-t)
			fill(50);
	ellipse(0,0, eSize, eSize)
pop();

push();
	translate (2.9*t, 11*t)		//fifth gear

if(mouseX < 1.5*t & mouseY < 1.5*t){
	rotate(radians(angle))
}
			fill(150);
	rect(0,0,50,50);	
		quad (t,0,0,t,-t,0,0,-t)
			fill(50);
	ellipse(0,0, eSize, eSize)
pop();

push();
	translate (4.8*t, 10.5*t)		//sixth gear

if(mouseX < 1.5*t & mouseY < 1.5*t){	
	rotate(radians(-angle))
}
			fill(150);
		rect(0,0,50,50);	
		quad (t,0,0,t,-t,0,0,-t)
			fill(50);
		ellipse(0,0, eSize, eSize)
pop();

push();
			fill(125);
if(mouseX<1.5*t & mouseY<1.5*t){
if(ballY<0){
	ballY = 409;
}
ballY = ballY-2;		//moves up by 2 points
fill(150);
	ellipse(width-75,ballY,eSize*3,eSize*3)		//front ball

	
}

}

var boats = [];     //arrays to hold respective objects
var clouds = [];
var umbrellas = [];
var planes = []; 
var buildings = [];
var railings = [];
var people = [];
var towels = [];
var landscape = [];     //array that creates slope of shoreline
var noiseParam = 0;     
var noiseStep = 0.005;      //defines extremity of shoreline slope


function setup() {
    createCanvas(480,300); 
    
    for (var i = 0; i < 3; i++){        //make a certain amount of (object) to start out, at random locations within a constraint
        var rx = random(width);
        var ry = random(80,150)
            boats[i] = makeBoat(rx,ry);
    }

    for (var i = 0; i < 3; i++){
        var Cx = random(width);
        var Cy = random(0,60)
            clouds[i] = makeCloud(Cx,Cy);
    }

    for (var i = 0; i < people.length; i++){
        var Tx = random(width);
        var Ty = random(250,300)
            towels[i] = makeTowel(Tx,Ty);
    }
    for (var i = 0; i < people.length; i++){
        var Px = random(width);
        var Py = random(250,300)
            people[i] = makePerson(Px,Py);
    }

    for (var i = 0; i < 5; i++){
        var Ux = random(width);
        var Uy = random(250,300)
            umbrellas[i] = makeUmbrella(Ux,Uy);
    }
    
    for (var i = 0; i < 15; i++){
        var Bx = random(width);
            buildings[i] = makeBuilding(Bx);
    }

    for (var i = 0; i < 0.9; i++){
        var Px = random(width);
        var Py = random(0,20)
            planes[i] = makePlane(Px,Py);
   }
    

    for(var i=0;i<=width/5;i++){    
        var n= noise(noiseParam);       //picks value 0-1
        var value = map(n,0,1,50,height);        //scales it to the canvas size

            landscape.push(value);      //adds to array
            noiseParam+=noiseStep;      //moves to the right for the next point in the array
   }
    
    frameRate(5);
}



function draw() {
    background(3,220,245);

    fill(13,66,212,230);    //dark blue
        rect(0,height/4,width,height);      //body of water   
    fill(227,232,164,175);  //pale beige
        rect(0,height/4-7,width,7);    //distant shoreline

                    //call the functions to spawn and despawn respective obejcts
    removeBoat();         
    newBoat(); 

    removeCloud();
    newCloud();

    removeUmbrella();

    removePlane();
    newPlane();

    removeBuilding();
    newBuilding();

    removeRailing();
    newRailing();

    removePerson();

    removeTowel();
  
   
                                                //call the move and show functions to continually draw and redraw objects after updated coordinates
    for (var i = 0; i < clouds.length; i++){
        clouds[i].move();
        clouds[i].show();
    }

    for (var i = 0; i < buildings.length; i++){
        buildings[i].move();
        buildings[i].show();
     }

    for (var i = 0; i < boats.length; i++){
        boats[i].move();
        boats[i].show();
    }
   

    displayHorizon();

     for (var i = 0; i < towels.length; i++){
        towels[i].move();
        towels[i].show();
    }

    for (var i = 0; i < people.length; i++){
        people[i].move();
        people[i].show();
    }

    for (var i = 0; i < umbrellas.length; i++){
        umbrellas[i].move();
        umbrellas[i].show();
    }


    for (var i = 0; i < planes.length; i++){
       planes[i].move();
       planes[i].show();
     }

    fill(159,159,159);
        rect(0,height-50,width,40);
    fill(110,110,110);
        rect(0,height-45,width,30);


    for (var i = 0; i < railings.length; i++){
       railings[i].move();
       railings[i].show();
     }    
}

                        //functions to remove an object from a displayed array once "out of sight"
function removeBoat(){
    
    var boatsToKeep = [];    //the boats that should still be displayed
    for (var i = 0; i < boats.length; i++){
        if (boats[i].x + boats[i].breadth > 0) {    //if the boat is closer than it's width to the edge
            boatsToKeep.push(boats[i]);     //add this boat to the boats that will be displayed
        }
    }
    boats = boatsToKeep; // only display the baots currently being kept
}

function removeCloud(){
    var cloudsToKeep = [];
    for (var i = 0; i < clouds.length; i++){
        if (clouds[i].x + clouds[i].breadth > 0) {
           cloudsToKeep.push(clouds[i]);
        }
   }
    clouds = cloudsToKeep; 
}

function removeUmbrella(){
    var umbrellasToKeep = [];
    for (var i = 0; i < umbrellas.length; i++){
        if (umbrellas[i].x + umbrellas[i].breadth > 0) {
           umbrellasToKeep.push(umbrellas[i]);
        }
    }
    umbrellas = umbrellasToKeep; 
}

function removePlane(){
    var planesToKeep = [];
    for (var i = 0; i < planes.length; i++){
        if (planes[i].x + 150 > 0) {
           planesToKeep.push(planes[i]);
        }
   }
    planes = planesToKeep; 
}

function removeBuilding(){
    var buildingsToKeep = [];
        for (var i = 0; i < buildings.length; i++){
            if (buildings[i].x > 0) {
                buildingsToKeep.push(buildings[i]);
        }
   }
    buildings = buildingsToKeep; 
}

function removeRailing(){
    var railingsToKeep = [];
        for (var i = 0; i < railings.length; i++){
            if (railings[i].x > 0) {
                railingsToKeep.push(railings[i]);
        }
   }
    railings = railingsToKeep; 
}

function removePerson(){
    var peopleToKeep = [];
        for (var i = 0; i < people.length; i++){
            if (people[i].x > 0) {
               peopleToKeep.push(people[i]);
        }
   }
    people = peopleToKeep; 
}

function removeTowel(){
    var towelsToKeep = [];
        for (var i = 0; i < towels.length; i++){
            if (towels[i].x > 0) {
               towelsToKeep.push(towels[i]);
        }
   }
    towels = towelsToKeep; 
}

                    //functions to create new objects that come into sight

function newBoat() {

    var newBoatChance = 0.009;      //the chance that a new boat will appear
    if (random(0,1) < newBoatChance) {      //activate probability
        boats.push(makeBoat(width,random(100,150)));        //add a new boat if the porbability condition is met
    }
}
function newCloud() {

    var newCloudChance = 0.001; 
    if (random(0,1) < newCloudChance) {
        clouds.push(makeCloud(width,random(0,60)));
    }
}


function newPlane() {

    var newPlaneChance = 0.003; 
    if (random(0,1) < newPlaneChance) {
        planes.push(makePlane(width, random(0,50)));
   }
}

function newBuilding() {

    var newBuildingChance = 0.1; 
    if (random(0,1) < newBuildingChance) {
        buildings.push(makeBuilding(width));
   }
}

function newRailing() {

    var newRailingChance = 0.8; 
    if (frameCount % 2 == 0 & random(0,1)