Move the pointer to stir the flow. Click for a shockwave, hold to pull it in.
Thousands of short-lived strokes drift along a slowly changing noise field. The pointer stirs a whirlpool, pressing pulls the flow in and sends out a shockwave.
- Canvas 2D
- Simplex noise
How it works
The flow comes from 3D simplex noise (x, y and time): one direction vector per cell of a grid. That's a few thousand noise samples per frame — not one per particle — and the particles read the grid bilinearly. The trails come from fading the previous frame towards the background every frame.
Near the pointer, a swirling and a repelling component are added to each particle's velocity; with the button held, the repulsion becomes attraction. All of it is plain Canvas 2D, in three batched draw calls.
Want something like this on your own site?
Motion and WebGL are part of what I do — we'll work out what fits your site while keeping it fast.
Get an estimate