Category: Project-11-Landscape

/*Name:Camellia(Siyun) Wang; 
Section: C; 
Email Address: siyunw@andrew.cmu.edu;*/
//https://imgur.com/DBFXrXh  coral2
//https://imgur.com/nyf5GKY coral1
//https://imgur.com/JXohvV2 group
//https://imgur.com/4hO2HW1 weed
//https://imgur.com/N4zWoA4
//https://imgur.com/J8R7qyD beach

var beaches = [];
var corals1 = [];
var corals1n = [];
var corals2 = [];
var corals2n = [];
var corals2b = [];
var groups = [];
var weeds = [];
var weeds2 = [];
var stars = [];
var fishes = [];
var bubbles = [];
var a; 
var b; 
var c; 
var d; 
var a1;
var b1; 
var c1;
var d1; 

function preload(){
    backgroundImage = loadImage("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/11/back.jpeg");
    coral1 = loadImage("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/11/coral1.png");
    coral2 = loadImage("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/11/coral-2.png");
    group = loadImage("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/11/group.png");
    weed = loadImage("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/11/weeds.png");
    beach = loadImage("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/11/beach.png");
    star = loadImage("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/11/starfish.png");
    fish = loadImage("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/11/fish.png");
    fishschool = loadImage("https://courses.ideate.cmu.edu/15-104/f2021/wp-content/uploads/2021/11/fish-school.png");
}

function setup() {
    a = random(-150,300);
    b = random(-150,300);
    c = random(-150,300);
    d = random(-150,300);
    a1 = random(1,-30);
    b1 = random(1,-30); 
    c1 = random(1,-30);
    d1 = random(1,-30);

    createCanvas(480, 400); 
    //the beach
    var bea = makeBeach(1,400);
    beaches.push(bea);

    //coral1
    var cor1 = makeCoral1(150,200);
    corals1.push(cor1);
    //coral1n
    var cor1n = makeCoral1n(1000,175);
    corals1n.push(cor1n);

    //coral2
    var cor2 = makeCoral2(450,75);
    corals2.push(cor2);
    //coral2n
    var cor2n = makeCoral2n(1300,230);
    corals2n.push(cor2n);
    //coral2b
    var cor2b = makeCoral2b(1330,190);
    corals2b.push(cor2b);

    //group
    var gro = makeGroup(550,140);
    groups.push(gro);

    //weed
    var wee = makeWeed(220,55);
    weeds.push(wee);
    //weed2
    var wee2 = makeWeed2(850,30);
    weeds2.push(wee2);

    var star = makeStar(1200,325);
    stars.push(star);

    var fish = makeFish(1220,25);
    fishes.push(fish);

    var bubble = makeBubble(185,480);
    bubbles.push(bubble);

    frameRate(30);
}

//the beach
function makeBeach(xb,yb) {
    var B = {
        x: xb, 
        y: yb,
        move: beachMove,
        speed: -1.5,
        display: beachDisplay};
    return B;
}

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

function beachDisplay(xb) {
   image(beach, this.x, 0,1400,400);
}

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

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

function addNewBeach(){
    var lastBeaches = beaches[beaches.length - 1];
    if(lastBeaches.x < -900){
        var a = makeBeach(480,400);
        beaches.push(a);
    }
}

//coral1
function makeCoral1(xc1,yc1){
    var C1 = {
        x: xc1, 
        y: yc1,
        move: coral1Move,
        speed: -1.5,
        display: coral1Display};
    return C1;
}

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

function coral1Display(xc1,yc1){
    image(coral1, this.x, this.y,200,200);
}

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

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

function addNewCoral1(){
    var lastCoral1 = corals1[corals1.length - 1];
    if(lastCoral1.x < -900){
        var a = makeCoral1(480,200);
        corals1.push(a);
    }
}
//coral1n
function makeCoral1n(xc1n,yc1n){
    var C1n = {
        x: xc1n, 
        y: yc1n,
        move: coral1nMove,
        speed: -1.5,
        display: coral1nDisplay};
    return C1n;
}

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

function coral1nDisplay(xc1,yc1){
    image(coral1, this.x, this.y,200,200);
}

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

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

function addNewCoral1n(){
    var lastCoral1n = corals1n[corals1n.length - 1];
    if(lastCoral1n.x < -900){
        var a = makeCoral1n(480,175);
        corals1n.push(a);
    }
} 


//coral2
function makeCoral2(xc2,yc2){
    var C2 = {
        x: xc2, 
        y: yc2,
        move: coral2Move,
        speed: -1.5,
        display: coral2Display};
    return C2;
}

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

function coral2Display(xc2,yc2){
    image(coral2, this.x, this.y,200,200);
}

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

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

function addNewCoral2(){
    var lastCoral2 = corals2[corals2.length - 1];
    if(lastCoral2.x < -900){
        var a = makeCoral2(480,75);
        corals2.push(a);
    }
}
//coral2n
function makeCoral2n(xc2n,yc2n){
    var C2n = {
        x: xc2n, 
        y: yc2n,
        move: coral2nMove,
        speed: -1.5,
        display: coral2nDisplay};
    return C2n;
}

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

function coral2nDisplay(xc2n,yc2n){
    image(coral2, this.x, this.y,200,200);
}

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

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

function addNewCoral2n(){
    var lastCoral2n = corals2n[corals2n.length - 1];
    if(lastCoral2n.x < -900){
        var a = makeCoral2n(480,230);
        corals2n.push(a);
    }
}
//coral2b
function makeCoral2b(xc2b,yc2b){
    var C2b = {
        x: xc2b, 
        y: yc2b,
        move: coral2bMove,
        speed: -1.5,
        display: coral2bDisplay};
    return C2b;
}

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

function coral2bDisplay(xc2b,yc2b){
    image(coral2, this.x, this.y,220,220);
}

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

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

function addNewCoral2b(){
    var lastCoral2b = corals2b[corals2b.length - 1];
    if(lastCoral2b.x < -900){
        var a = makeCoral2b(480,190);
        corals2b.push(a);
    }
}

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

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

function groupDisplay(xg,yg){
    image(group, this.x, this.y,350,350);
}

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

function addNewGroup(){
    var lastGroup = groups[groups.length - 1];
    if(lastGroup.x < -900){
        var a = makeGroup(480,140);
        groups.push(a);
    }
}

//weed
function makeWeed(xw,yw){
    var W = {
        x: xw, 
        y: yw,
        move: weedMove,
        speed: -1.5,
        display: weedDisplay};
    return W;
}

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

function weedDisplay(xw,yw){
    image(weed, this.x, this.y,300,300);
}

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

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

function addNewWeed(){
    var lastWeed = weeds[weeds.length - 1];
    if(lastWeed.x < -900){
        var a = makeWeed(480,55);
        weeds.push(a);
    }
}
//weed2
function makeWeed2(xw2,yw2){
    var W2= {
        x: xw2, 
        y: yw2,
        move: weed2Move,
        speed: -1.5,
        display: weed2Display};
    return W2;
}

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

function weed2Display(xw2,yw2){
    image(weed, this.x, this.y,300,300);
}

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

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

function addNewWeed2(){
    var lastWeed2 = weeds2[weeds2.length - 1];
    if(lastWeed2.x < -900){
        var a = makeWeed2(480,30);
        weeds2.push(a);
    }
}

//stars
function makeStar(xs,ys){
    var S = {
        x: xs, 
        y: ys,
        move: starMove,
        speed: -1.5,
        display: starDisplay};
    return S;
}

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

function starDisplay(xs,ys){
    image(star, this.x, this.y,75,75);
}

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

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

function addNewStar(){
    var lastStar = stars[stars.length - 1];
    if(lastStar.x < -900){
        var a = makeStar(480,325);
        stars.push(a);
    }
}

//fish school
function makeFish(xf,yf){
    var F = {
        x: xf, 
        y: yf,
        move: fishMove,
        speed: -3.0,
        display: fishDisplay};
    return F;
}

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

function fishDisplay(xf,yf){
    image(fishschool, this.x, this.y,200,200);
}

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

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

function addNewFishRandomly(){
    var newFishLikelihood = 0.002; 
    if (random(0,2) < newFishLikelihood) {
        fishes.push(makeFish(480,25));
    }
}

//bubbles
function makeBubble(xb,yb){
    var B = {
        x: xb, 
        y: yb,
        yspeed: -3,
        move: bubbleMove,
        speed: -1.5,
        display: bubbleDisplay};
    return B;
}

function bubbleMove(){
    this.x +=this.speed;
    this.y +=this.yspeed;
}

function bubbleDisplay(xb,yb){
    noStroke();
    fill(255);
    ellipse(this.x,this.y,10,10);
    ellipse(this.x+a,this.y+a1,20,20);
    ellipse(this.x+b,this.y+b1,17,17);
    ellipse(this.x+c,this.y+c1,23,23);
    ellipse(this.x+d,this.y+d1,15,15);

}

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

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

function addNewBubbleRandomly(){
    var newBubbleLikelihood = 0.02; 
    if (random(0,2) < newBubbleLikelihood) {
        bubbles.push(makeBubble(185,480));
    }
}

function draw() {
    background(backgroundImage); 

    updateAndDisplayBubble();
    addNewBubbleRandomly();
    removeBubbleThatHaveSlippedOutOfView()

    updateAndDisplayWeed2();
    addNewWeed2();
    removeWeed2ThatHaveSlippedOutOfView();

    updateAndDisplayBeach();
    addNewBeach();
    removeBeachThatHaveSlippedOutOfView();

    updateAndDisplayWeed();
    addNewWeed();
    removeWeedThatHaveSlippedOutOfView();

    updateAndDisplayCoral2();
    addNewCoral2();
    removeCoral2ThatHaveSlippedOutOfView();

    updateAndDisplayFish();
    addNewFishRandomly();
    removeFishThatHaveSlippedOutOfView();

    updateAndDisplayCoral2b();
    addNewCoral2b();
    removeCoral2bThatHaveSlippedOutOfView();
    updateAndDisplayCoral2n();
    addNewCoral2n();
    removeCoral2nThatHaveSlippedOutOfView();

    updateAndDisplayGroup();
    addNewGroup();
    removeGroupThatHaveSlippedOutOfView();

    image(fish,140,100,200,230);

    updateAndDisplayCoral1();
    addNewCoral1();
    removeCoral1ThatHaveSlippedOutOfView();
    updateAndDisplayCoral1n();
    addNewCoral1n();
    removeCoral1nThatHaveSlippedOutOfView();

    updateAndDisplayStar();
    addNewStar();
    removeStarThatHaveSlippedOutOfView();

    
}

//Anthony Pan
//Section C

//objects to create:
    //hills
    //cars
    //road

//hold hills
var hillshowing = [];
//object for hills
var hills;

//hold road1
var road1showing = [];
//object for road1
var road1;

var road2;
var road2showing = [];

//car object
var car;
//array holding car object
var carShowing = [];

//car2 object
var car2;

//array holding car2 objects
var car2Showing = [];

//frame counter
var counter = 0;


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

    //create hills
    for(var i = 0; i < 20; i++) {
        hills = makeHills(i*30, 245);
        hillshowing.push(hills);
    }

    //create road1
    for(var j = 0; j<10; j++) {
        road1 = makeRoad1(j*10, 280);
        road1showing.push(road1);

    }

    //create road2
    for(var k = 0; k<10; k++) {
        road2 = makeRoad2(k*10, 250);
        road2showing.push(road2);
    }

    //create cars on road1
    for(var h = 0; h < 5; h++) {
        car = makeCar(0, round(random(270, 290)), random(2,4));
        carShowing.push(car);
    }

    //create cars on road2
    for(var c = 0; c < 5; c++) {
        car2 = makeCar2(width, round(random(240, 255)), random(-4,-2));
        car2Showing.push(car2);
    }

}


function draw() {
    //sky 
    background(135, 221, 255);

    //sun
    drawSun();

    //hills
    updateandDrawhills();
    removeHillsOffScreen();
    addNewHill();


    //roads2 / upper roads
    fill(156, 117, 95);
    rect(0, 245, width, 40);
    updateandDrawRoad2();
    removeRoad2offScreen();
    addNewRoad2();

    //roads lower/ road1
    fill(0);
    rect(0, 270, width, 40);
    updateandDrawRoad1();
    removeRoad1offScreen();
    addNewRoad1();

    //draw cars on road2
    updateandDrawCar2();
    removeCars2OffScreen();
    addCar2();

    //draw cars
    updateandDrawCar();
    removeCarsOffScreen();
    addNewCar();

    

 
}


//draw sun
function drawSun() {
    fill("lightyellow");
    noStroke();
    circle(90,80, 40);

}

////////////////////////////////////////////////////////////////////////////////////////////////////
//MAKE Car2 Functions

//car 2 constructor
function makeCar2(cx, cy, zoom) {
    var car2 = {x: cx, y:cy,
        speed:zoom,
        r: random(255),
        g: random(255),
        b: random(255),
        move: car2Move,
        draw: drawCar2 }
    return car2;
}

//draw car2 object
function drawCar2() {
    fill(this.r, this.g, this.b);
    rect(this.x, this.y, 20, 10);

    fill(0);
    ellipse(3+this.x, 10+this.y, 4, 4);
    ellipse(this.x + 17, this.y +10, 4, 4);

}

//update and draw car2
function updateandDrawCar2() {
    for(var i = 0; i < car2Showing.length; i++) {
        car2Showing[i].move();
        car2Showing[i].draw();
    }
}

//move car2
function car2Move() {
    this.x += this.speed;
}

//remove car2s that are off screen 
function removeCars2OffScreen() {
    var cars2ToKeep = [];
    for (var i = 0; i < car2Showing.length; i++){
        if (car2Showing[i].x > 0) {
            cars2ToKeep.push(car2Showing[i]);
        }
    }
    car2Showing = cars2ToKeep; // remember the showing cars

}

//make new car2 based on probability 
function addCar2() {
    var newcarlikelihood = 0.03;
    if(random(0,1) < newcarlikelihood) {
         car2Showing.push(makeCar2(width, round(random(240, 255)), random(-4,-2)));
    }
}



////////////////////////////////////////////////////////////////////////////////////////////////////
//MAKE Car Functions

//car constructor
function makeCar(cx, cy, zoom) {
    var car = {x: cx, y:cy,
        speed:zoom,
        r: random(255),
        g: random(255),
        b: random(255),
        move: carMove,
        draw: drawCar }
    return car;
}

//draw car object
function drawCar() {
    fill(this.r, this.g, this.b);
    rect(this.x, this.y, 20, 10);

    fill(0);
    ellipse(3+this.x, 10+this.y, 4, 4);
    ellipse(this.x + 17, this.y +10, 4, 4);

}

//update car position and draw car
function updateandDrawCar() {
    for(var i = 0; i < carShowing.length; i++) {
        carShowing[i].move();
        carShowing[i].draw();
    }
}

//move car
function carMove() {
    this.x += this.speed;
}

//remove cars that are off screen
function removeCarsOffScreen() {
    var carsToKeep = [];
    for (var i = 0; i < carShowing.length; i++){
        if (carShowing[i].x < width) {
            carsToKeep.push(carShowing[i]);
        }
    }
    carShowing = carsToKeep; // remember the showing cars

}

//make new car every 100 frames
function addNewCar() {
    counter +=1;
    if (counter % 100== 0){
        carShowing.push(makeCar(0, round(random(270, 290)), random(2,4)));
    }

}




////////////////////////////////////////////////////////////////////////////////////////////////////
//MAKE ROAD2 Functions

//constructor for road2
function makeRoad2(rx, ry) {
    var road2 = {x:rx, y:ry,
        speed: -0.7,
        move: road2Move,
        draw: drawRoad2 }

    return road2;
}

//draw road2 
function drawRoad2() {
    fill(120);
    rect(this.x, this.y, width, 40);

    for(var i = 0; i < 50; i++) {
        var dx = i * 10;
        fill("yellow");
        rect(this.x + dx, this.y + 10, 6, 2);
    }
}

//update road2 position and draw
function updateandDrawRoad2() {
    for(var i = 0; i < road2showing.length; i++) {
        road2showing[i].move();
        road2showing[i].draw();
    }
}

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

//remove roads off the screen
function removeRoad2offScreen() {
    var road2ToKeep = [];
    for (var i = 0; i < road2showing.length; i++){
        if (road2showing[i].x + width > 0) {
            road2ToKeep.push(road2showing[i]);
        }
    }
    road2showing = road2ToKeep; // remember the showing roads
}

function addNewRoad2() {
    counter +=1;
    if (counter % 17 == 0){
        road2showing.push(makeRoad2(width,250));
    }

}



////////////////////////////////////////////////////////////////////////////////////////////////////
//MAKE ROAD1 FUNCTIONS

//constructor for road1
function makeRoad1(rx, ry) {
    var road1 = {x:rx, y:ry,
        speed: -0.5,
        move: road1Move,
        draw: drawRoad1 }

    return road1;
}


//draw road
function drawRoad1() {
    fill(120);
    rect(this.x, this.y, width, 40);

    for(var i = 0; i < 50; i++) {
        var dx = i * 10;
        fill("yellow");
        rect(this.x + dx, this.y + 10, 6, 2);
    }
}

//update road1 position and draw
function updateandDrawRoad1() {
    for(var i = 0; i < road1showing.length; i++) {
        road1showing[i].move();
        road1showing[i].draw();
    }
}

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

//remove roads off the screen
function removeRoad1offScreen() {
    var road1ToKeep = [];
    for (var i = 0; i < road1showing.length; i++){
        if (road1showing[i].x + width > 0) {
            road1ToKeep.push(road1showing[i]);
        }
    }
    road1showing = road1ToKeep; // remember the showing roads
}

function addNewRoad1() {
    counter +=1;
    if (counter % 25 == 0){
        road1showing.push(makeRoad1(width,280));
    }

}

////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////
//MAKE HILLS FUNCTIONS

//update hill position and draw hill
function updateandDrawhills() {
    for(var i =0; i < hillshowing.length; i++){
        hillshowing[i].move();
        hillshowing[i].draw();
    }

}


//remove hills that have left the screen 
function removeHillsOffScreen(){
    var hillsToKeep = [];
    for (var i = 0; i < hillshowing.length; i++){
        if (hillshowing[i].x +20 > 0) {
            hillsToKeep.push(hillshowing[i]);
        }
    }
    hillshowing = hillsToKeep; // remember the showing hills
}


//make new hill from right side of canvas
function addNewHill() {
    counter +=1;
    if (counter % 25 == 0){
        hillshowing.push(makeHills(width+20,245));
    }
}

//hill constructor
function makeHills(hx, hy) {
    var hills = {x:hx, y:hy, 
        width:random(40, 70), 
        height:random(100, 300), 
        r:0, g:random(115,200), b: random(15, 35),
        speed: -1.0,
        move: hillsMove,
        draw: drawHills }
    return hills;

}

//draw hills
function drawHills() {
    fill(this.r, this.g, this.b);
    ellipse(this.x, this.y, this.width, this.height);
}


//move hill to left
function hillsMove() {
    this.x += this.speed;
}

// Christy Zo
// andrew id: czo
// Section C

var hill = [];
var hill2 = [];
var noiseParam = 0;
var noiseStep = 0.05;
var noiseParam2 = 0;
var noiseStep2 = 0.05

var snowflakePerLayer = 200;
var maxSize = 3;
var gravity = 0.75;
var layerCount = 5;
var snowflakes = [];

var walkImage = [];
var newCharacter = [];
var airplane;
var newPlane = [];

var buildings = [];



function preload() {
    var filenames = [];
    filenames[0] = "https://i.imgur.com/Uz3ltZC.png";
    filenames[1] = "https://i.imgur.com/ofNc4Wv.png";
    filenames[2] = "https://i.imgur.com/7hMA7W6.png";
    filenames[3] = "https://i.imgur.com/3RBTODb.png";
    filenames[4] = "https://i.imgur.com/FliwTsj.png";

    for (var i = 0; i < filenames.length; i++) {
        walkImage[i] = loadImage(filenames[i]);
    }
    airplane = loadImage("https://i.imgur.com/dbPwlhp.png");
}

//airplane 
function makePlane(px, pdx, py, pdy) {
    var p = {x: px, dx: pdx, y:py, dy: pdy,
            stepFunction: stepPlane,
            drawFunction: drawPlane
        }
    return p;
}

function stepPlane() {
    this.x += this.dx;
    this.y += this.dy;

    if (this.x > 480) {
        this.x = 0;
        this.y = 100;
    }
}

function drawPlane() {
    image(airplane, this.x, this.y, 20, 20);
}

//person
function makeCharacter(cx, cdx) {
    var c = {x: cx, dx: cdx,
             // walkingRight: true, 
             imageNum: 0,
             stepFunction: stepCharacter,
             drawFunction: drawCharacter
         }
    return c;
}

function stepCharacter() {
    this.x += this.dx;
    this.imageNum += 1;
    
    if (this.imageNum == 4 ) {
        this.imageNum = 0;
    }

    if (this.x >= 680) { 
        this.x = 200;
    } 
}

function drawCharacter() {
    image(walkImage[this.imageNum], this.x, 430);
    
}

//snowflake update
function updateSnowflake(snowflake) {
    var diameter = (snowflake.l * maxSize) / layerCount;
    if (snowflake.y > height + diameter) {
        snowflake.y = -diameter;
    } else {
        snowflake.y += gravity * snowflake.l * snowflake.mass;
    }
}

//buildings
function updateAndDisplayBuildings(){
    // Update the building's positions, and display them.
    for (var i = 0; i < buildings.length; i++){
        buildings[i].move();
        buildings[i].display();
    }
}

function removeBuildingsThatHaveSlippedOutOfView(){
    var buildingsToKeep = [];
    for (var i = 0; i < buildings.length; i++){
        if (buildings[i].x + buildings[i].breadth > 0) {
            buildingsToKeep.push(buildings[i]);
        }
    }
    buildings = buildingsToKeep; // remember the surviving buildings
}

function addNewBuildingsWithSomeRandomProbability() {
    // With a very tiny probability, add a new building to the end.
    var newBuildingLikelihood = 0.007; 
    if (random(0,1) < newBuildingLikelihood) {
        buildings.push(makeBuilding(width));
    }
}

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

// draw the building and some windows
function buildingDisplay() {
    var floorHeight = 20;
    var bHeight = this.nFloors * floorHeight; 
    fill(255); 
    noStroke; 
    push();
    translate(this.x, height - 40);
    rect(0, -bHeight, this.breadth, bHeight);
    stroke(200); 
    fill(200);
    for (var i = 0; i < this.nFloors; i++) {
        rect(5, -15 - (i * floorHeight), this.breadth - 10, 10);
    }
    pop();
}

function makeBuilding(birthLocationX) {
    var bldg = {x: birthLocationX,
                breadth: 50,
                speed: -1.0,
                nFloors: round(random(2,8)),
                move: buildingMove,
                display: buildingDisplay}
    return bldg;
}


function setup() {
    createCanvas(480, 480);
    noStroke();
    frameRate(20);
    for (i=0; i<width/5+1; i++) {
        var n = noise(noiseParam);
        var value = map(n, 0, 1, 100, height);
        
        hill.push(value);
        noiseParam += noiseStep;

    }


// snowflakes
    for (let l = 0; l < layerCount; l++) {
        snowflakes.push([]);
        for (let i = 0; i < snowflakePerLayer; i++) {
            snowflakes[l].push({
            x: random(width),
            y: random(height),
            mass: random(0.75, 1.25),
            l: l + 1
            });
        }
    }
    for (var i = 0; i < 10; i++){
        var rx = random(width);
        buildings[i] = makeBuilding(rx);
    }

    imageMode(CENTER);

    var d = makeCharacter(50, 1);
    newCharacter.push(d);

    var p = makePlane(10, 5, 100, -1);
    newPlane.push(p);
    
}

function draw() {
    background(0);

    for (let l = 0; l < snowflakes.length; l++) {
        var layer = snowflakes[l];

        for (let i = 0; i < layer.length; i++) {
            var snowflake = layer[i];
            fill(255);
            circle(snowflake.x, snowflake.y, (snowflake.l * maxSize) / layerCount);
            updateSnowflake(snowflake);
        }
    }

    beginShape();
        vertex(0, height);
        for (i=0; i<width/5+1; i++) {
            noStroke();
            fill(200);
            vertex(i*5, hill[i]);
 

        }
        vertex(width, height);
        endShape();

        var n = noise(noiseParam);
        var value = map(n, 0, 1, 100, height);
        hill.shift();
        // append(hill, value);
        hill.push(value);
        noiseParam += noiseStep;
    fill(150);
    rect(0, 430, width, height);


    updateAndDisplayBuildings();
    removeBuildingsThatHaveSlippedOutOfView();
    addNewBuildingsWithSomeRandomProbability(); 


    newCharacter[0].stepFunction();
    newCharacter[0].drawFunction();

    newPlane[0].stepFunction();
    newPlane[0].drawFunction();
    // image(walkImage[1], 100,100);

}