Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Solid Black | Dripping
/*
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);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.8/p5.min.js"></script>

Solid Black | Dripping

See my collection Dripping for more.

  1. Put as many points as the screen is wide at the top of the screen
  2. Draw a line connecting all the points
  3. Increase the y position of each point using Perlin noise
  4. GOTO 20

Using p5.js

A Pen by Johan Karlsson on CodePen.

License.

html, body {
margin: 0;
}
canvas {
display: block;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment