What does an invisible current look like if you let a few thousand particles ride it?
Drift fills the screen with particles and lets each one be pushed along by a flow field: an invisible grid of arrows. The arrows come from Perlin noise, which produces smooth, natural-looking randomness, so neighbouring arrows point in similar directions and the particles trace long, rolling curves.
How it works
Every frame, each particle samples the noise at its position, turns that into an angle, and takes a small step in that direction. The canvas is never fully cleared; a faint wash of the background colour is painted over it each frame, so old strokes fade instead of vanishing. That fade is what turns dots into trails.
// angle from noise, then a small step along it
const a = noise(p.x * scale, p.y * scale + time) * Math.PI * 4;
p.x += Math.cos(a) * speed;
p.y += Math.sin(a) * speed;
// fade the old strokes a little instead of clearing
ctx.globalAlpha = trail;
ctx.fillRect(0, 0, width, height);The field also turns slowly over time, so the picture keeps changing even if you never touch it. Particles have a short lifespan and respawn somewhere random, which keeps the canvas evenly covered.
Tuning
Field scale zooms the noise: small values give broad, lazy currents, large ones give tight eddies. Trail controls how quickly old strokes fade. Click the canvas, or press the button, for a brand-new field.
Where this goes on a client site
- Living backgrounds that are never the same twice, at a fraction of the weight of a video.
- Brand textures generated in the brand's own colours.
- Seeded artwork: the same seed always draws the same picture, so it can be printed or shared.