How this gallery was built

A walk-through 3D gallery that runs in a web browser with nothing to install. One person directed it and an AI wrote it, over three days. This page says what it is made of, how it works, and who did what.

Walk through it

What it is made with

What is worth a closer look

The building designs itself

Nothing about the rooms is drawn by hand. The code takes the number of paintings and works out how many rooms are needed, where the doorways go, and which wall each painting hangs on, under rules: two to a wall, never one alone, none on a wall with a doorway. Add or remove a painting and the building changes to fit. It has been four rooms and it has been thirteen.

No models, no recordings

The visitors, the statues, the fountains, the benches and the frames are all assembled in code from simple solid shapes. The sound of the crowd is noise passed through filters tuned to the pitch of voices; a footstep is a short thud and a click. So the whole experience downloads as code and paintings, and nothing else.

An automatic tour that moves like a person

The tour plans a route through every room, through the middle of each doorway and round every bench, statue and fountain. It gathers and loses speed gradually, the camera follows the route as if on a soft spring so that corners are rounded, and it turns to face the next painting while it is still arriving. The test traces the whole tour at sixty steps a second and confirms that it stops squarely in front of every painting and never passes through a wall or an obstacle.

Pictures arrive as you walk

A painting's image is asked for only when you are near it or can see it through a doorway. The first room is ready in moments however many rooms lie beyond it.

Mirror statues drawn from their equations

Three of the statues are mathematical surfaces in polished metal: z = xy, a hyperbolic paraboloid cut square so that every edge is a straight line; z = xy², a right conoid; and half a sphere, mirrored on both faces. Each is built from its formula, stands on a labelled plinth under its own spotlight, and turns. A fourth is a mirrored pyramid with a brighter capstone and a beam of light rising from its point to the ceiling. In the last room stands a gold pharaoh's mask, striped with lapis and set with rows of turquoise, carnelian and lapis beads, assembled from about four hundred simple shapes.

The reflections are real. The room is photographed in all six directions from where each statue stands, every few seconds, and that picture is what its metal reflects. So the paintings, the lights and the visitors slide across the surfaces as they turn.

A polished floor, and shadows where they belong

The marble floor reflects the room. A mirror lies just under it and the marble is let through a little, so the lit paintings and the walls show in the floor, dimmed, as they do in polished stone. Every frame throws a soft shadow on its wall, every bench, plinth and fountain has one on the floor, and each wall darkens where it meets the floor and the ceiling. None of this is computed lighting. Each is a small effect placed by hand where the eye expects it, which is why it runs smoothly in a browser.

Visitors with joints, faces and things to do

The people in the rooms are built in code: a body turned on a lathe, arms hinged at shoulder and elbow, legs at hip and knee, eyes with an iris, a pupil and a fleck of light, and lids that blink. Each has a part to play. Children point at a painting while a mother keeps an eye on them, a professor holds his chin, a curator talks to a group, a custodian sweeps, and a cynic walks from picture to picture finding fault. They stand where they do not block a painting or the route of the tour, each has a few thoughts that float up in a bubble, and one button takes them all away.

The picture pipeline

The originals are photographs of canvases and are never altered. For the web copies, the build:

• removes each hand-painted signature by copying the plainest nearby piece of the same painting over it and blending the tones, so the repair is the painting's own brushwork;
• adds one consistent signature, in white or in black according to how light the picture is at that spot;
• adds the watermark;
• chooses a frame to suit each painting's overall colour;
• takes a small light-and-dark fingerprint of every picture and stops the build if two works are the same painting photographed twice.

A contact form that does not publish an email address

Messages go to a small server program, which emails them on. The address is known only to the server. The build fails if an email address appears in any page. The form refuses requests from other sites, caps the number of messages a day, and quietly drops automatic form-fillers.

Small screens get a different gallery

Walking through rooms is not practical on a phone, so a phone gets the same paintings as a wall of framed, lit pictures. It is the same page: the 3D starts only where there is room for it and the browser can draw it.

Who did what

Ken Bingham conceived the gallery, directed it and made every decision in it. The paintings are his, made by hand. So are the ideas that give the site its character: rooms with doorways in place of corridors, dim rooms with lit pictures, the visitors and what they think, the cynic, the custodian, the fountains, the mirror statues and how each is cut and turned, the pyramid and its beam of light, the pharaoh's mask, the polished floor, one consistent signature, the centrepiece, and the choice of which paintings hang.

The AI (Claude, made by Anthropic, working as a coding agent) wrote the code, wrote and ran the tests, and reported what it found. It did not originate the ideas. Where it offered a judgement, such as which twenty paintings are the strongest, that was asked for, and the decision stayed with Ken Bingham.

What it took to get it right

It was not right the first time, and most of the quality came from correction.

• Direction in small steps. The gallery was built through 67 messages of direction in its first three days, most of them "not that, this". The first version was a single long hall. Then short hallways with corners. Then, because it still looked like hallways with art and not a gallery, rooms.
• Specific rules from the person who knows galleries. No more than a few paintings in view. Never one painting alone on a wall. The room dim so the pictures stand out. Smooth movement, no jerks. Each was a sentence of direction that became a rule in the code and a check in the tests.
• Measuring, not assuming. After each change a real browser opened the site, walked it, and reported numbers: paintings per wall, whether every painting can be stood in front of, whether the tour ever leaves the floor. A change was not called done until the numbers said so.
• Throwing work away. The first 3D engine was replaced whole when three.js was chosen. The first method of removing signatures left a smear and was replaced by one that reuses the painting's own brushwork. The first z = xy statue was the wrong cut of the surface and was redrawn from a reference picture. The visitors were rebuilt once they were on screen, to give them elbows, knees and proper eyes.
• The eye is the final test. A test can prove that the tour stops in front of every painting. It cannot say whether the gallery feels like a gallery. That judgement was made by a person looking at it, every time.

The direction, in the director's own words

These are some of the 67 messages, and of those that followed, quoted from the record with only the spelling tidied, each with what it changed. None of them is a specification. Each is a person looking at the result and saying what is wrong with it.

What it is not

• The visitors are stylised figures built in code. They have joints and faces, but they are not the sculpted, rigged characters of an animation studio.
• The sound is made by the browser and is plainer than recordings would be.
• The signature repairs hold at viewing size; a few show if you zoom far in.
• The 3D gallery needs a computer-sized screen and a browser with WebGL.

Walk through it All work Contact