var noiseScale = 0.001;

var Y_AXIS = 1;
var X_AXIS = 2;
var b1, b2, c1, c2;

function setup() {
  var color1 = color(200, 150, 150);
  var color2 = color(50, 50, 150);

  createCanvas(500,500);

  // background(200,150,190);

  setGradient(0, 0, windowWidth, windowHeight, color1, color2, "X");

  for (var i = 0; i < 10; i++) {
    var x = random(windowWidth);
    var y = random(windowHeight);
    noStroke();
    fill(255);
    ellipse(x, y, 5, 5);
    ellipse(x, y, 3, 3);
    ellipse(x, y, 2, 2);
  }
}

function draw() {
  for (var xx = 0; xx < width; xx++) {
    var noiseVal = noise((mouseX + xx) * noiseScale, noiseScale * mouseY * 2);
    fill(200, 80, 100, 40);
    stroke(200, 130, 90, 80);
    rect(xx, noiseVal * 1000, xx / 5, height);
  }
}

function setGradient(x, y, w, h, c1, c2, axis) {
  noFill();
  if (axis == "Y") {
    // Top to bottom gradient
    for (let i = y; i <= y + h; i++) {
      var inter = map(i, y, y + h, 0, 1);
      var c = lerpColor(c1, c2, inter);
      stroke(c);
      line(x, i, x + w, i);
    }
  } else if (axis == "X") {
    // Left to right gradient
    for (let j = x; j <= x + w; j++) {
      var inter2 = map(j, x, x + w, 0, 1);
      var d = lerpColor(c1, c2, inter2);
      stroke(d);
      line(j, y, j, y + h + 50);
    }
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.7.1/p5.min.js