Project 11: Landscape

var waveDetail = 0.003; // detail in shallow wave
var waveSpeed = 0.0002; // speed of waves
var waveDetail2 = 0.002; //detail of mid wave
var waveDetail3 = 0.001; //detail of deep wave
var seaGround = []
var sunset;

function preload() {
    sunset = loadImage("https://i.imgur.com/14AlgbU.png");
    seaweed = loadImage("https://i.imgur.com/JHftB8t.png");
    fish = loadImage("https://i.imgur.com/BFimCOm.png")
}
function setup() {
    createCanvas(600, 400);
    for (var i = 0; i < 5; i ++){
        var rx = random(width);
        var ry = random(10, 50)
        seaGround[i] = makeSeaweed(rx, ry);
    }
    frameRate(15);
}

function draw() {
    background(153, 153, 204);

    image(sunset, 0, 0, 600, 400);
    makeWaves();
    updateSeaweed();
    removeSeaweed();
    image(fish, 300, 200, 300, 200);  
    addSeaweed();

}

function makeWaves() {
    fill(95, 191, 254);
    noStroke();
    beginShape();
    vertex(0, height);
    for (var x = 0; x < width; x++) {
        var t = (x * waveDetail) + (millis() * waveSpeed);
        var y = map(noise(t), 0, 1, height / 8 * 2, height / 8 * 4);
        vertex(x, y);
    }
    vertex(width, height);
    endShape();

    //second wave
    beginShape();
    fill(41, 160, 255);
    vertex(0, height);
    for (var x = 0; x < width; x++) {
        var t2 = (x * waveDetail2) + (millis() * waveSpeed);
        var y = map(noise(t2), 0, 1, 100, 300);
        vertex(x, y);
    }
    vertex(width, height);
    endShape();

    //third wave
    beginShape();
    fill(19, 138, 233);
    vertex(0, height);
    for (var x = 0; x < width; x++) {
        var t3 = (x * waveDetail3) + (millis() * waveSpeed);
        var y = map(noise(t3), 0, 1, 300, height);
        vertex(x, y);
    }
    vertex(width, height);
    endShape();
}

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

function removeSeaweed(){
    var keepSeaweed=[];
    for (var i = 0; i < seaGround.length; i++) {
        if (seaGround[i].x < 600) {
            keepSeaweed.push(seaGround[i]);
        }
    }
}

function addSeaweed(){
    //little probability
    var newSeaweedLikelihood = 0.02; 
    if (random(0,1) < newSeaweedLikelihood) {
        seaGround.push(makeSeaweed(15, 15));
    }
}

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

function displaySeaweed(){
    fill(0);
    stroke(0);
    push();
    translate(this.x, height-300);
    image(seaweed, 0, 0, 400, 320);
    pop();

}

function makeSeaweed(birthLocationX, birthLocationY){
    var seaweeds = {x: birthLocationX,
                y:birthLocationY,
                speed:random(3, 7),
                move: moveSeaweed,
                display: displaySeaweed};
    return seaweeds;
}