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!


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:

Perlin noise 2D field 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.


White Particles

Coloured Comets

White Web

Coloured Web

Try It!

Try it out yourself here.

The Original Coding Challenge by Dan Shiffman @ The Coding Train