Visualizer

What a visualizer actually is

A visualizer is a picture driven by something real — not an illustration of a thing, but the thing itself, drawn while it happens. The bouncing bars on a stereo and the green line on a hospital monitor are the oldest ones you've met: take a signal nobody can see, and put it where the eye already looks.

The oldest visualizers you have met are the bars that jump on a stereo and the green line on a hospital monitor. Both are the same idea: take a signal nobody can see, and put it somewhere the eye is already good.

The eye is astonishingly good. A person can watch a line for an hour and notice the one second it went wrong, without knowing they were watching. No number on a dashboard does that. That is the whole argument for building one.

The line between a visualizer and a screensaver

It is a single question: if the input stopped, would the picture change? If the answer is no, it is decoration. It may be beautiful decoration, but it cannot tell you anything — and worse, it will keep looking healthy while the thing behind it is dead.

That failure is common and it is expensive. A dashboard that animates on a timer is not neutral. It actively reassures you at exactly the moment you should be worried.

Three rules that survive contact with reality

Motion must mean something

If it moves, something happened. If nothing is happening, it should visibly settle. A scene still dancing with no input is lying to you, and once it has lied once you cannot trust it again.

Colour must not rotate

Pick what each colour means, then never reuse it for something else, however good the alternative looks. The moment two things can both be amber, amber means “something”, which is the same as meaning nothing.

States should differ in kind, not in speed

The easy version of “busier” is “faster”. It reads as one thing turned up rather than as four different things, and from across a room you cannot tell them apart at all. Give each state its own behaviour.

Why these are one file

Each build is a single hand-written HTML file. No build step, no package manager, no framework. Save it, open it, it runs — in five years, on a machine with nothing installed.

That is not nostalgia. A visualizer’s job is to be trustworthy about what it is showing, and every dependency is another thing between you and the picture that can change without asking. It also means the whole thing is readable: the file is the entire program, comments included, and you can see every decision that went into it.

Canvas 2D, one render loop, and arithmetic. That turns out to be enough.

See the builds

Want this running in your own practice? Let's talk.