Flow Field Particles
The studio's first toy: a few thousand particles drifting along a noise field, where every seed is a one-of-a-kind picture.
参数和种子都在 URL 里——调出好看的效果，复制链接就能让别人看到一模一样的画面。
How to play
- Drag the sliders to tune the particle count, the noise scale (how coarse or fine the texture is), and the speed
- Press R or hit “Regenerate” to draw a new seed and get a completely fresh image
- Press S or hit “Save” to export the current frame as a PNG
- Every parameter and the seed live in the URL — copy the link and send it to anyone; they’ll see exactly what you see
How it works
The whole thing comes down to three steps:
- A deterministic noise field: the seed string is fed into a mulberry32 pseudo-random generator to build a 64×64 grid of random values. Bilinear interpolation smooths it into a continuous scalar field — the same seed always yields the same field.
- From field to angle: the noise value at each position is multiplied by 4π and treated as an angle, turning the whole canvas into a kind of “wind map.”
- Particles ride the wind: each frame, a few thousand particles take a tiny step along the wind direction at their current position, leaving a 1-pixel footprint. Every frame the background is painted over with a 4.5%-opacity black layer, so old trails slowly fade out and the image takes on a silky, satin-like quality.
No libraries — just Canvas 2D and about 150 lines of vanilla JS. Choosing Canvas 2D over WebGL was deliberate: for the first toy I wanted to nail down the plumbing of a toy page — parameters in the URL, reproducible seeds, keyboard shortcuts, graceful performance fallbacks — and leave the shaders for the next one.
It respects prefers-reduced-motion: on devices that ask for reduced motion, there’s no continuous animation — it renders 300 frames’ worth of trails once and holds the still.
On phones the particle count automatically drops to under 1,200.