Window Gazing – Generative Landscape

var trunks = [];
var hills = [];
var mountains = [];
var noiseParam = 0;
var noiseStep = 0.01;
var clouds = [];
function setup() {
    createCanvas(640, 240); 

    //Trunks
    for (var i = 0; i < 10; i++){
        var rx = random(width);
        trunks[i] = makeTrunk(rx);
    }

   //Hills
    for (var i = 0; i <= width; i ++) {
        var n = noise(noiseParam);
        var value = map(n, 0, 1, 0, height*1.5);
        hills.push(value-10);
        noiseParam += noiseStep;
    }

    //Mountains
    for (var i = 0; i <=width/5+1; i++) {
        var n = noise(noiseParam);
        var value = map(n,0,1,height*1/5,height*4/5);
        mountains.push(value);
        noiseParam += noiseStep;
    }

    //Clouds
    for (var i = 0; i < 10; i ++) {
        var cloudX = random(width);
        var cloudY = random(height/2, height);
        clouds[i] = makeClouds(cloudX, cloudY);
    }

    frameRate(60);
}


function draw() {
    background(191,234,255); 

    drawMountains();

    updateAndDisplayClouds();
    removeClouds();
    addNewClouds(); 

    drawHills();

    updateAndDisplayTrunks();
    removeTrunks();
    addNewTrunks(); 

    drawWindow();
}

function drawWindow() {
    //simple code used to draw window that viewer is looking through
    var border = 40
    stroke(141,171,223);
    noFill();
    strokeWeight(border);
    rect(border/2,border/2,width-border,height-border);
    stroke(220);
    strokeWeight(border/2)
    rect((border/2)+20,(border/2)+20,(width-border)-40,(height-border)-40,20);

}

//Updating position and displaying clouds
function updateAndDisplayClouds() {
    for (var i = 0; i < clouds.length; i ++) {
        clouds[i].move();
        clouds[i].display();
    }
}

//if the clouds reach the end of the screen, remove and replace in new array
function removeClouds() {
    var cloudsToKeep = [];
    for (var i = 0; i < clouds.length; i++){
        if (clouds[i].x > 0) {
            cloudsToKeep.push(clouds[i]);
        }
    }
    clouds = cloudsToKeep;
}

//based on set probability, add new cloud into array
function addNewClouds() {
    var newCloudLikelihood = 0.07; 
    if (random(0,1) < newCloudLikelihood) {
        var newcloudX = 640;
        var newcloudY = random(200);
        clouds.push(makeClouds(newcloudX, newcloudY));
    }
}

function makeClouds(CLOUDX, CLOUDY) {
    var cld = {x: CLOUDX,
             y: CLOUDY,
             speed: -5,
             move: cloudMove,
             display: cloudDisplay}
    return cld;
}

//moving clouds
function cloudMove() {
    this.x += this.speed;
}

//drawing of cloud
function cloudDisplay() {
    fill(255); // cream color
    noStroke();
    ellipse(this.x, this.y, 20, 30);
    ellipse(this.x, this.y, 20, 30);
    ellipse(this.x, this.y, 30, 10);
    ellipse(this.x, this.y, 10, 20);
    ellipse(this.x, this.y, 40, 20);
}

//hill drawing using Begin and End Shape
function drawHills() {
    noStroke();
    fill("green");
    
    beginShape();
    vertex(0, height);
    for (i = 0; i <= width/5 + 1; i += 1) {
        vertex(i*5, hills[i]);
        vertex((i+1)*5, hills[i+1]);
    }
    vertex(width, height);
    endShape();

    hills.shift();
    var n = noise(noiseParam);
    var value = map(n, 0, 1, 0, height);
    hills.push(value);
    noiseParam += noiseStep;

}

//Mountains is variantion of hill code
function drawMountains() {
    noStroke();
    fill(161,178,158);
    
    beginShape();
    vertex(0, height);
    for (i = 0; i <= width/5 + 1; i += 1) {
        vertex(i*5, mountains[i]);
        vertex((i+1)*5, mountains[i+1]);
    }
    vertex(width, height);
    endShape();

    mountains.shift();
    var n = noise(noiseParam);
    var value = map(n, 0, 1, 0, height);
    mountains.push(value);
    noiseParam += noiseStep;

}

//trunks in front of window being moved and displayed here
function updateAndDisplayTrunks(){
    for (var i = 0; i < trunks.length; i++){
        trunks[i].move();
        trunks[i].display();
    }
}

//if trunk leaves screen, remove and replace with another
function removeTrunks(){
    var trunksToKeep = [];
    for (var i = 0; i < trunks.length; i++){
        if (trunks[i].x + trunks[i].breadth > 0) {
            trunksToKeep.push(trunks[i]);
        }
    }
    trunks = trunksToKeep; 
}

//small probability of adding new trunk
function addNewTrunks() {
    var probability = 0.08; 
    if (random(0,1) < probability) {
        trunks.push(makeTrunk(width));
    }
}


// moving trunk along window as if "passing"
function TrunkMove() {
    this.x += this.speed;
}
    

// drawing of trunks
function TrunkDisplay() {
    noStroke();
    var tHeight = 0
    fill(102,60,11);  
    push();
    translate(this.x, height);
    rect(0, 0, this.breadth, -height);
    stroke(200); 
    pop();
}

function makeTrunk(birthLocationX) {
    var trnk = {x: birthLocationX,
                breadth: 40,
                speed: -7,
                move: TrunkMove,
                display: TrunkDisplay}
    return trnk;
}