Flow field, gathering

The Flowing Digits identity rests on one idea: a flowing, unstructured form resolving into a plus symbol. Creativity meeting organisation. It reads well as a static mark, but the idea is fundamentally about movement – something a logo on a page can only imply.

So this is the mark doing the thing the mark describes.

What it does

Particles are scattered across the canvas and pushed along by an invisible field of currents. Every point in space has a direction associated with it, and each particle simply moves the way its current location tells it to. That alone produces the drifting, smoke-like motion – no particle knows anything about any other particle.

Every fourteen seconds the field releases its hold and each particle moves toward an assigned position inside the plus. They hold the shape briefly, then the current takes over again.

How it works

Each particle carries two positions: where the current has pushed it, and where it belongs in the mark. Rendering blends between the two.

position = drift × (1 − gather) + target × gather

When gather is 0 the particle is wherever the flow left it. When it reaches 1 the particle sits exactly on the plus. Everything in between is the transition, and the whole piece is really just that one number being eased from 0 to 1 and back.

Two decisions did most of the visual work:

Additive blending. Where particles overlap, their colours add together rather than covering one another. It costs nothing and it is the entire reason the gathered mark looks dense and lit rather than flat.

An orthographic camera. No perspective distortion, so the mark stays graphic rather than looking like an object receding into space. A perspective camera made it feel like a 3D render of a logo. This feels like a drawing.

The part that didn’t work

The obvious way to build a flow field is to sample some noise at each particle’s position, treat the result as an angle, and push the particle that way. I did that first. It looks convincing for about two seconds.

Then everything collapses. A field built that way has places where flow converges, and once a particle arrives at one it has nowhere else to go. Within a few seconds all four thousand particles had drained onto a single thin arc across the canvas and stopped. Not a subtle degradation – the piece simply emptied itself.

The fix is to take the curl of the noise instead: sample it as a height map, then rotate its slope by ninety degrees so particles travel along the contours rather than down them.

velocity = (∂ψ/∂y, −∂ψ/∂x)

Flow built this way is divergence-free. As much passes out of any small region as passes into it, so there is nowhere for particles to accumulate and the canvas stays evenly populated indefinitely. It is the same property that keeps smoke swirling instead of gathering into a dot.

Worth knowing generally: if a particle system quietly dies, convergence in the field is usually why.

What it cost

Roughly 600KB of JavaScript, which is a lot – so the page you are reading did not load any of it until you scrolled far enough for the canvas to be nearly in view. Until that moment this was an ordinary HTML document.

That constraint shaped the build more than any aesthetic decision. An experiment that makes the rest of the site slow is not a good experiment.

What I would change

The gather is uniform – every particle begins moving at the same instant. Staggering the start by distance from the centre would make the mark assemble outward from the middle, which is closer to how the identity is meant to read.