Based on Dan Shiffman’s Perlin Noise Flow Field Coding Challenge.
Try it out yourself here and subscribe to The Coding Train for some truly great creative coding videos!
Background
It is 1983. Your name is Ken Perlin. You’re frustrated with the blocky nature of computer graphics of the day. You invent an algorithm to make things better.
Perlin Noise is the result. It’s…
a technique used to produce natural appearing textures on computer generated surfaces for motion picture visual effects.
In essence, it’s a way to generate “similar” random numbers, and p5.js uses Perlin Noise for its noise function.
Perlin noise is a random sequence generator producing a more natural ordered, harmonic succession of numbers compared to the standard random() function.
In this project, we use it to create a 2D field of vectors, each pointing in a similar, but different, direction as its neighbouring vectors:
We then sprinkle several thousand particles over the top, and have their velocities affected by the vectors. Depending on how we draw the particles during animation, we can generate some pretty cool stuff.
Examples
White Particles
Coloured Comets
White Web
Coloured Web
Try It!
Try it out yourself here.