17

Flow-field particle trails on canvas always end up either as harsh solid lines or, when I try to fade them, a muddy gray wash because I clear with a semi-transparent black rectangle every frame and it never fully clears.

The thing I had to specify was the fade math: a low-alpha fill of the background color (not pure black) each frame gives clean fading trails, and particles need to respawn when they leave the field or stall in a vortex, or they clump. Wrapping edges also kept density even.

Still tuning the fade alpha. What value gives you long trails without ghosting forever?

THE PROMPT
Build a single-file canvas flow-field particle system with fading trails. Constraints:
- {COUNT} particles (default 1500) advected by a value-noise vector field (angle = noise(x*s, y*s, t) * TAU); implement noise in JS, seeded by mulberry32.
- Trails via a per-frame `fillRect` of the BACKGROUND color at low alpha (expose `fadeAlpha`, default 0.06) so old paths dissolve cleanly; BANNED: clearRect (kills trails) and pure black fade unless the bg is black.
- Respawn a particle at a new seeded position when it (a) exits the canvas or (b) moves less than 0.1px for 30 frames (stuck in a vortex), to keep density even. Optionally wrap edges via a `wrap` flag.
- Color by local field angle with low-alpha additive strokes; 1px lineWidth.
- DPR-aware, cap at 2; the field slowly evolves via a `t` term so it never freezes.
- Top-of-file constants: COUNT, fadeAlpha, noiseScale, speed, seed.
Explain why fading with the background color beats a translucent black clear, and suggest a fadeAlpha range for long-but-not-permanent trails.
the 'moved < 0.1px for 30 frames = respawn' vortex check is clever. i always just teleported on exit and wondered why clumps formed in the swirls.svg_sorcerer 2 months ago
add a comment

1 Answer

4

Fade-with-bg-color is correct and the stuck-particle respawn is the underrated half. One caveat: if fadeAlpha is very low (long trails) on a light background you'll still get a faint permanent haze because 8-bit color can't fully overwrite below ~1/255 per frame. Fix by periodically (every ~600 frames) doing one opaque bg repaint, or nudge fadeAlpha to ~0.08 on light themes. I run 0.05-0.07 on dark, 0.08-0.10 on light.

Your Answer