Generative Landscape

var cld = [];
var shl = [];

function setup() {
    createCanvas(480, 320);
    background(200);
    noStroke();
}

function draw() {
    //static background
    fill(57, 16, 115);
    rect(0, 0, 480, 40);
    fill(129, 21, 150);
    rect(0, 40, 480, 40);
    fill(189, 28, 119);
    rect(0, 80, 480, 40);
    fill(224, 47, 31);
    rect(0, 120, 480, 40);
    fill(230, 107, 50);
    rect(0, 160, 480, 40);
    fill(255, 185, 64);
    circle(240, 200, 60);
    fill(179, 161, 91);
    rect(0, 200, 480, 120);

    //cloud code
    if(random() > 0.95) cld.push(makeCloud((random()*120), color(random()*30+220, 220, random()*30+220))); //chance to draw new cloud
    for(let i = 0; i < cld.length; i++) { //draws and updates clouds
      cld[i].drawCloud();
      cld[i].moveCloud();
    }
    if(cld[0].x > 480) cld.shift(); //removes clouds that move too far

    //shell code
    if(random() > 0.85) shl.push(makeShell(random()*200+120, color(random()*255, random()*255, random()*255), random()*3)); //chacne to draw new drawShell
    for(let i = 0; i < shl.length; i++) { //draws and updates shells
      shl[i].drawShell();
      shl[i].moveShell();
    }
    if(shl[0].x > 480) shl.shift(); //removes shells that move too far
}

function makeCloud(ty, tc) {
    var cloud = {x: 0, y: ty, c: tc};
    return cloud;
}

function drawCloud() {
    fill(this.c);
    ellipse(this.x, this.y, 40, 20);
}

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

function makeShell(ty, tc, ts) {
    var shell = {x: 0, y: ty, c: tc, s: ts}
    return shell;
}

function drawShell() {
    fill(this.c);
    if(this.s < 1) circle(this.x, this.y, 20);
    else if(this.s < 2) square(this.x, this.y, 20);
    else triangle(this.x, this.y, this.x+10, this.y+20, this.x+20, this.y);
}

function moveShell() {
    this.x += 10;
}