🌀 3D Curl Noise Flow Field

Thousands of particles follow a 3D curl noise velocity field rendered on canvas. Curl noise (∇×F) is divergence-free, producing smooth turbulent-looking flows without sinks.

Generative ArtInteractive
Click canvas to scatter particles · P pause · R reset

How it Works

Curl noise is derived by computing the curl (∇×F) of a 3D potential noise field. The key mathematical property is that the divergence of any curl is zero (∇·(∇×F) = 0), making the resulting velocity field divergence-free. This means no "sinks" or "sources" exist in the flow — particle density is preserved everywhere.

In practice, we sample a 3D Perlin/Simplex noise field at slightly offset positions to numerically approximate the partial derivatives needed for the curl. The z-coordinate of the noise lookup advances slowly with time, creating smooth temporal evolution of the 2D flow pattern.

curl(F)_z = ∂F_y/∂x - ∂F_x/∂y
velocity = (∂N(x,y,z)/∂y - ∂N(x,y+e,z)/∂x, ∂N(x+e,y,z)/∂x - ...)
z = time * 0.003 (slow temporal evolution)

Each particle stores its position (px, py) and a lifetime counter. When a particle exits the canvas boundary or exceeds its lifetime, it is reseeded at a random position. The trail fade effect is achieved by overlaying a semi-transparent black rectangle each frame instead of clearing the canvas completely.

Frequently Asked Questions

What is curl noise?

Curl noise is a divergence-free vector field obtained by taking the curl (∇×F) of a potential noise field. Because the curl of any vector field has zero divergence, particles following curl noise never accumulate or disperse — they flow in closed or open trajectories without sinks or sources.

Why is curl noise divergence-free?

By the vector calculus identity ∇·(∇×F) = 0 for any smooth vector field F, the curl is always divergence-free. This mathematical property ensures that the flow field conserves "volume" — no particle density pileups occur, producing naturally smooth turbulent-looking flows.

What is a flow field in generative art?

A flow field is a grid of vectors that steer particles across the canvas. Each particle samples the vector at its current position and moves along it. When the underlying field is derived from noise (Perlin, Simplex, or curl noise), the result is organic, flowing, turbulent-looking art.

What is Perlin noise?

Perlin noise is a gradient noise function invented by Ken Perlin. It produces smoothly interpolated pseudo-random values, making it ideal for natural-looking textures, terrain, and flow fields. The 3D version samples values at three coordinates (x, y, z), allowing time to be encoded as the z-axis.

How does 3D noise enable temporal animation?

By using the simulation time as the third (z) coordinate of the noise function, the flow field evolves smoothly over time without abrupt jumps. As z increases slowly, the 2D slice of the 3D noise field shifts organically, making particles appear to drift and evolve continuously.

What is the difference between Perlin and Simplex noise?

Simplex noise is Ken Perlin's improved version of Perlin noise. It uses a simplex lattice (triangles in 2D, tetrahedra in 3D) instead of a square/cubic grid. This eliminates axis-aligned artifacts, has better computational complexity O(n²) vs O(2^n) in n dimensions, and produces more isotropic results.

How many particles can run in real time?

On a modern GPU-accelerated browser canvas, 3000–8000 particles typically run at 60 fps. This simulation uses 2000–6000 particles depending on the slider setting. Each particle requires one noise evaluation and one canvas draw call per frame, so performance scales linearly with particle count.

What is the trail fade technique?

Instead of clearing the canvas each frame, a semi-transparent black rectangle is drawn over the entire canvas. This causes old particle positions to fade gradually, leaving glowing trails that reveal the flow field structure. The opacity of the fade rectangle controls trail length.

Can curl noise simulate real fluid dynamics?

Curl noise approximates the look of turbulent fluid flow but does not solve the Navier-Stokes equations. Real fluid simulation requires solving PDEs with pressure correction. However, curl noise is computationally cheap, never diverges numerically, and produces aesthetically convincing turbulence for games and generative art.

What is octave layering (fractal noise)?

Octave layering sums multiple noise functions at different frequencies and amplitudes: W(x) = Σ (1/2^i)·noise(2^i·x). Each successive octave doubles the frequency and halves the amplitude, adding finer detail. The result is fractal noise (fBm — fractional Brownian motion), which mimics natural phenomena like clouds and terrain.

About this simulation

Every particle samples a 3D fractal-noise field at four tiny offset points, and curlAt() turns those finite differences into a velocity via ∂Fy/∂x − ∂Fx/∂y — the numerical curl of the noise potential. Because a curl is mathematically guaranteed to be divergence-free, particles never pile up in sinks or vanish into sources, just endlessly swirl, which is why increasing Octaves keeps adding finer turbulent detail without ever breaking the flow.

🔬 What it shows

Thousands of glowing particle trails swirling through a smooth, divergence-free turbulent flow, with the pattern slowly evolving over time as the noise field's z-coordinate advances.

🎮 How to use

Adjust Particles, Speed, Scale and Octaves, choose Trail Fade length and Color Mode, click the canvas to scatter a burst of new particles at that point, or press P/R to pause/reset.

💡 Did you know?

Curl noise is a favourite trick in visual effects and games precisely because it never "diverges" numerically the way real fluid solvers can — you get convincing turbulence with none of the instability risk of solving the Navier-Stokes equations.

Frequently asked questions

Why do particles never clump together or empty out an area?

The velocity field comes from taking the curl of a noise potential, and the vector calculus identity div(curl(F))=0 guarantees the resulting flow is divergence-free, so particle density is conserved everywhere.

What does raising Octaves actually add to the flow?

The fbm() function sums progressively higher-frequency, lower-amplitude noise layers for each added octave, layering finer turbulent detail on top of the large-scale swirls without changing the overall flow direction.

What happens when I click on the canvas?

Clicking spawns 200 fresh particles scattered in a random radius around the cursor, replacing existing particles first before appending new ones, letting you inject a visible burst into the flow.

How does the simulation animate the pattern over time without it looking the same?

Simulation time feeds into the z-coordinate of the 3D noise lookup, so each frame samples a slightly different slice through the noise volume, producing smooth continuous evolution rather than a static or looping pattern.

What does the Trail Fade setting actually change?

Instead of clearing the canvas, each frame draws a semi-transparent black rectangle over everything; a lower fade opacity leaves long glowing trails while a higher one erases old positions almost instantly.