A flow field assigns a direction to every point on the screen. Particles follow those directions and leave fading trails, which turns a grid of numbers into something that looks like wind or water.
How it works
- A seeded noise function gives a smooth value for any point.
- That value becomes an angle, and each particle takes a small step in that direction.
- Every frame paints a nearly transparent layer over the canvas, so old trails fade slowly.
const angle = noise(p.x * scale, p.y * scale + time) * Math.PI * 4;
p.x += Math.cos(angle) * 1.4;
p.y += Math.sin(angle) * 1.4;Press New field for a different seed and palette, and change the particle count with the slider.
Built withJavaScriptCanvas 2D