Learn Flow Fields Step by Step

Start with a simple grid of points, then discover how Perlin noise transforms them into a flowing vector field.

Go to Playground

How to flow fields

Start with a simple black dot grid inside the mini Mac display. This is the first step before the flow field becomes dynamic in the Playground.

Step 1: 2D Plan Grid

Begin with a regular grid of points. This gives you a simple visual foundation for the flow field.

Step 2: Add Vector Directions

Each grid cell gets a random direction vector. This is the first motion layer and looks noisy and chaotic.

Step 3: Perlin Noise

Perlin noise links nearby vectors with small offsets, turning randomness into a smooth, flowing directional field.

Step 4: Particle Flow

Particles move through the grid following the vectors, leaving trails that reveal the resulting flow.