Move the pointer across the needles. Click or hold: the polarity flips and a shockwave runs through.
A lattice where every point is a tiny compass needle. Near the pointer the needles turn towards it and lean in; press and the polarity flips, the needles swing away, and a shockwave runs across the field.
- Canvas 2D
- Spring physics
- Vector field
How it works
Every needle has two springs: one holds its angle to a target direction, the other holds its position relative to home. At rest the target is a slowly rolling noise field; near the pointer the two are blended as vectors, so a needle never takes the long way round.
A press starts a ring that travels at 520 pixels a second and kicks the angle and position of every needle it passes over. All of it is plain Canvas 2D, one stroke per colour, so a few thousand needles are easy.
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