Coding, JavaScript, Milestones

Perlin Noise Flow Field Coding Challenge

I think this is probably the most beautiful coding challenge Simon has completed so far. It’s based on a Perlin noise coding challenge by Daniel Shiffman where you’re asked to create a two-dimensional flow field with the help of the p5.js library, using the z-axis to represent time. Instead of actually writing it in p5, however, Simon created the project on the website (he has recently discovered through GitHub) and saved it online, so the animation he made is available at at his permanent link:

Perlin noise is a type of gradient noise that is used in computer visual graphics to increase the appearance of realism. In this video, Simon talks about the project:

Perlin noise is most commonly implemented as a two-, three- or four-dimensional function, but can be defined for any number of dimensions. An implementation typically involves three steps: grid definition with random gradient vectors, computation of the dot product between the distance-gradient vectors and interpolation between these values. Here are some videos of how Simon completed the coding challenge step by step. The project relies heavily on vectors:

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s