let t = 0;

​

function setup() {

  createCanvas(1920, 1080);

}

​

function draw() {

  if(animate) {

    t += 1;

  }

  drawHeightMapSquash(cos(PI + t/60)/2 + 1/2);

}

​

function keyReleased() {

  if(key === " ") {

    t = 0;

    return;

  }

  animate = !animate;

  if(animate) {

    t = 0;

  }

}

​

function mouseReleased() {

  fullscreen(!fullscreen());

}

​

function drawHeightMapSquash(amt) {

  noiseSeed(895);

  noStroke();

  transparentRect(0, 0.3, "#62A6A9");

  transparentRect(0.3, 0.4, "#D6B69E");

  transparentRect(0.4, 0.5, "#98AD5A");

  transparentRect(0.5, 0.6, "#658541");

  transparentRect(0.6, 0.7, "#477645");

  transparentRect(0.7, 0.8, "#6D7687");

  transparentRect(0.8, 0.9, "#848D9A");

  transparentRect(0.9, 1, "#D2E0DE");  

  fill(200);

  beginShape();

  vertex(0, 0);

  for(let i = 0; i <= width; i ++) {

    const n = noise(i * 0.005);

    let y1 = n * height;

    let y2 = y1 * map(abs(width/2 - i), 0, width/2, 1, 0);

    let y = lerp(y1, y2, amt);

    vertex(i, height - y);

  }

  vertex(width, 0);

  endShape();

  transparentRect(0, 0.3, "#62A6A950");

}

​

function transparentRect(start, stop, col) {

  fill(col);

  let h = height * (stop - start);

  rect(0, height - height * stop, width, h);

}