Particles

Particles: 262,144
Frame: 0.0 ms
Engine: GPU, transform feedback
Resolution: 0 x 0 at 1x

What you are looking at

262,144 points. Each has a position and a velocity stored on your graphics card, and each has a home it is pulled toward. Move your pointer through them. With the keyboard, focus the canvas, move the pointer with the arrow keys and press Enter to scatter.

How it works

Four forces act on every point. A spring pulls it toward its home. A flow field pushes it along the curl of simplex noise, which has no sources or sinks, so points do not clump. Your pointer, or up to five fingers, pushes or pulls any point within Reach. Drag slows whatever is moving.

The update runs in a vertex shader and writes straight back to a buffer, so JavaScript never sees the positions. Two buffers swap each frame, and the points are drawn from whichever was written last.

The portrait is public/profile.svg drawn to an offscreen canvas at twice its size. Each point picks one of the light pixels at random as its home. The name is drawn the same way in Inter 800 small caps. Galaxy and Lattice are generated from formulas, and None gives the points no home.

Source

Next Shader playground