Solid Black | Dripping

script.babel

/*
  Johan Karlsson (DonKarlssonSan)
*/
let points;
let stepsPerFrame;

function setup() {
  stepsPerFrame = 5;
  createCanvas(windowWidth, windowHeight);
  noFill();
  strokeWeight(3);
  reset();
}

function draw() {
  for (let i = 0; i < stepsPerFrame; i++) {
    stroke(0, 255 - i * 255 / stepsPerFrame);
    drawLine();
  }
}

function reset() {
  background("white");
  resetPoints();
}

function resetPoints() {
  points = [];
  for (let i = 0; i < windowWidth; i++) {
    points.push([i, 0]);
  }
}

function drawLine() {
  beginShape();
  let atLeastOneOnScreen = false;
  points.forEach(p => {
    vertex(p[0], p[1]);
    p[1] += noise(frameCount / 100 + p[0] / 25);
    if (p[1] < windowHeight * 1.1) {
      atLeastOneOnScreen = true;
    }
  });
  endShape();

  if (!atLeastOneOnScreen) {
    reset();
  }
}

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

scripts

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.8/p5.min.js"></script>

solid-black-dripping.markdown

Solid Black | Dripping

See my collection Dripping for more.

10. Put as many points as the screen is wide at the top of the screen
11. Draw a line connecting all the points
12. Increase the y position of each point using Perlin noise
13. GOTO 20

Using p5.js

A Pen by Johan Karlsson on CodePen.

License.

style.css

html, body {
  margin: 0;
}

canvas {
  display: block;
}