Generative Design · Personal project · 2026

what·ism

Build a poster one layer at a time, and the sheet is read back as the art movement it most resembles. Fifteen movements, drawn live in the browser, in a single HTML file with no build step and no dependencies.

Role
Concept, design and build, solo
Type
Personal project
Timeline
August 2026
Built with
HTML, SVG, Claude Code
Live site
what-ism.net ↗
01

Why

Design history is usually taught as a list — names, dates, a slide of the famous poster. You can pass that and still not be able to tell a Bauhaus sheet from a Swiss one at a glance, because the difference isn’t a fact you memorise. It’s a set of decisions somebody made about a grid, a colour, and how the ink hit the paper.

So I inverted the quiz. Instead of asking what you already know, what·ism hands you a sheet and lets you make those decisions yourself — and then tells you whose company you just put yourself in.

02

How it works

A sheet is eight layers. Three sit on top of it — a mass, a headline, an ornament — and five describe the sheet itself: grid, ink, process, surface, tilt. Every layer is a real control, and every change redraws the poster immediately.

Underneath, each movement is described by four axes: order, ornament, warmth, energy. Your sheet is scored against all fifteen on every edit, so the verdict in the corner is never a quiz result at the end — it moves while you work. Loosen the grid and watch Swiss International give way to Memphis.

The what-ism designer: a layer list on the left, the poster in the centre, and controls plus a live reading on the right.
The designer. Layers left, sheet centre, controls right — and the reading in the lower right, updating on every edit: Arts and Crafts 78%, then Vienna Secession 22%.
03

The problem: every movement was the same poster

The first working version was a failure I could see but not name. All fifteen movements rendered, all fifteen scored correctly, and all fifteen looked like the same poster in different colours. The engine described a movement by four numbers and searched one shared vocabulary for values matching them — which can only ever produce one drawing, recoloured.

Four numbers and one vocabulary can only produce one drawing. Bauhaus and Memphis were the same sheet in another palette.

What was missing wasn’t more vocabulary — a bigger pool just gives two similar targets more ways to match. It was an axis nobody had modelled: how the sheet was physically made. I added six production techniques that emit real geometry rather than recolouring existing geometry — a halftone screen, torn photomontage, a visible setting-out drawing, off-register plates, brushwork, photocopy degradation — and six compositional archetypes underneath them.

The fitter now weights technique heavily enough that it can’t be traded away for a closer numeric fit, because technique is the whole difference between Dada and Swiss-in-another-palette. Fifteen movements now resolve to thirteen genuinely distinct drawings, where before they shared identical structure.

Swiss International The Swiss International reading room: a strict three-column grid of grey text bars behind a single flat block.
Modular columns, flat ink, no ornament, no depth.
Constructivism The Constructivism reading room: diagonal planes and off-register stripes crossing the sheet.
Diagonal composition, off-register plates, overprinting.

Same engine, same eight layers, same four axes — different physical process.

04

Two movements that refused to be different

Memphis and Psychedelic sit within a rounding error of each other on all four axes. Optimising those numbers alone landed both on the same palette, composition and process — correctly, and uselessly.

I made the fitting sequential and gave each movement a memory of what the ones before it had already used, so a later movement is repelled from vocabulary that is taken. The catch was that repulsion needs somewhere honest to go: without a suitability cost on every gene, movements paid for their difference with whichever gene was free, and De Stijl ended up wearing botanical trim. Charging for a bad fit on all of them forced the separation into differences each movement could actually carry. The two now share three of eight visible traits instead of five, and the axis match barely moved.

05

A gallery you can spin

The fifteen movements sit on a sphere rather than in a grid, because the point is that they relate to each other rather than queue up. Each card is a point on a Fibonacci lattice, rotated and projected every frame, taking its scale and stacking order from its own depth — so spinning genuinely brings the back of the set around to the front.

Two decisions carry it. Orientation is an accumulated rotation matrix rather than a yaw and pitch pair, so the sphere turns freely from wherever it sits, with no pole to get stuck at and no angle to clamp. And every motion is scaled by elapsed time rather than counted per frame — before that, a 120 Hz laptop spun it at exactly twice the speed of a 60 Hz phone.

The what-ism gallery: fifteen generated posters arranged on a spinnable sphere, nearer cards larger and sharper.
Fifteen sheets, each one fitted to its movement by the same scorer the designer uses — so a gallery card can never drift away from what the engine believes.
06

The reading room

Opening a movement doesn’t open a page about it. That movement’s own sheet becomes the room — bled to the full viewport, with its history set over it. The text and scrim colours are picked from the artwork’s own luminance, so all fifteen stay legible without a single hand-tuned exception, and all fifteen fit without scrolling.

There is no close button. Double-click or double-tap anywhere and the room closes. That is a deliberate risk, so the room watches for someone who reads as trying to get out — a drag, or three scattered taps — and answers with a line of text under the bar. On a device with no cursor, where a transient prompt is meaningless, the line simply stays up for the whole visit.

The Memphis reading room: the movement's own poster fills the screen while its history is set over it in white.
Memphis. The header takes its ink from the same luminance test, so the bar stays readable over a sheet it has never seen.
07

What I took from it

The lesson I keep coming back to is that the first version wasn’t wrong, it was under-modelled. Everything worked to spec; the spec was just missing the axis that made the difference visible. Adding vocabulary would never have fixed it, and I would have spent a long time adding vocabulary.

The rest of it was about designing constraints rather than outputs. I never drew a single one of these fifteen posters. I described what each movement believes and what the paper can physically do, and let the engine argue itself to a result — which is a very different design job, and one I’d take again.