Lab / 30 min build
Curl noise flow field
Thousands of short lines drift along a swirling field that never collects into a single point.
The core
// Cheap smooth noise: a few layered sines, good enough for a flow field.
export function noise(x, y, t) {
return (
Math.sin(x * 1.7 + t) * Math.cos(y * 1.3 - t * 0.7) +
Math.sin((x + y) * 0.9 + t * 0.5) * 0.5
);
}
// Curl of the noise: a direction field that swirls without sinks or sources.
export function curl(x, y, t) {
const e = 0.01;
const dx = (noise(x + e, y, t) - noise(x - e, y, t)) / (2 * e);
const dy = (noise(x, y + e, t) - noise(x, y - e, t)) / (2 * e);
return [dy, -dx];
}
// Move every walker one step along the field; respawn the ones that leave.
export function advance(walkers, w, h, t, scale) {
for (const p of walkers) {
const [vx, vy] = curl(p.x / scale, p.y / scale, t);
p.px = p.x;
p.py = p.y;
p.x += vx * 1.6;
p.y += vy * 1.6;
if (p.x < 0 || p.x > w || p.y < 0 || p.y > h || --p.life < 0) {
p.x = p.px = Math.random() * w;
p.y = p.py = Math.random() * h;
p.life = 80 + Math.random() * 160;
}
}
}How it works
- A smooth noise. Layer a few sines over x, y and time. It isn’t Perlin noise, but it is smooth and costs almost nothing.
- Take the curl. Measure how the noise changes in x and in y, then swap and negate them. The result is a field that swirls without sinks, so lines never pile up in one spot.
- Walk the field. Each walker moves one small step along the field per frame and remembers where it was.
- Draw the step, not the walker. A one-pixel line from the old position to the new one, over a frame that is only slightly faded, builds up the trails.
- Respawn. Walkers that leave the screen or run out of life restart at a random spot, which keeps the density even.
Full source
Get the whole project as a zip
The demo page, every file and the export settings for the reel. It lands in your inbox, along with one new build a week.
You'll get a confirmation email first. One click to unsubscribe.
Make reels like this one
Reel Engine
The render pipeline behind every reel: HTML to MP4 at 1080×1920, 10 effects, 9:16 templates and a setup guide.