<script src="//cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.10/p5.js"></script>

html,
body {
  padding: 0;
  margin: 0;
  background-color: black;
}

var theta = 0,
  step = 0,
  f = 260,
  num = 6;
var layers = [];

function setup() {
   createCanvas(windowWidth, windowHeight-4);
  colorMode(HSB, 360, 100, 100);
  step = (height - 120) / num;
  createScenery();
}

function draw() {
  background('#ffffff');
  for (var i = 0; i < layers.length; i++) {
    var br = map(i, 0, layers.length - 1, 20, 90);
    fill(f, br, 100);
    layers[i].display();
  }
  fill('#ffffff');
  textAlign(RIGHT);
  text("click mouse to change scenery", width - 10, height-30);
  text("type key to change color", width - 10, height-15);
  theta += 0.005;
}

function createScenery() {
  for (var i = 0; i < num; i++) {
    layers.push(new Layer(-20 + i * step, random(1000), i + 1));
  }
}

function Layer(_start, _noize, _speed) {

  var yOff = 0,
    yOff2 = 0;
  var start = _start;
  var noize = _noize;
  var speed = _speed;

  this.display = function() {
    yOff = yOff2;
    noStroke();
    for (var x = 0; x < width; x += 1) {
      var y = start + noise(noize + sin(yOff) * 3) * step * 3.5;
      rect(x,height-50,1,50);
      rect(x, height-50, 1, -height + y);
      yOff += TWO_PI / (width);
    }
    yOff2 = theta * speed;
  }
}

function mouseReleased() {
  background('#ffffff');
  layers = [];
  createScenery();
}

function keyReleased() {
  f = random(250, 360);
  println(f);
}

function windowResized() {
  resizeCanvas(windowWidth, windowHeight-4);
}