# Isometric State Machines

> Interactive isometric state machines in HTML

By Mason Hall · 2026-10-26

I love state machines. They're a beautiful abstraction over often complex systems. They afford you the ability to understand a system's *invariants*, and that's key to understanding how it works.

I built these five state machines as isometric figures, and made them fully interactive. Press the buttons, drag to turn it around, zoom in, and flip on see-through to look inside.


## The Antikythera mechanism

The Antikythera mechanism, built around 150–100 BC, has one input, a crank, and every dial is a fixed function of how far you've turned it. One turn of the crank is about 78.6 days. Gear trains turn that into the date, the Moon's position and phase (speeding up and slowing down, as the real Moon does), the four-year cycle of the Games, and the eclipse cycles.

Its whole state is a single number, the crank angle.

[Interactive figure: Antikythera mechanism](https://masonhall.org/isometrics/antikythera.html)

## The Mechanical Turk

The Mechanical Turk was unveiled in Vienna in 1770 as a chess-playing automaton, and toured Europe and America for decades after. The showman opened its cupboards one at a time to show the clockwork, wound it with a key, and the Turk beat almost everyone, Napoleon included.

Click see-through to see how it worked.

[Interactive figure: The Mechanical Turk](https://masonhall.org/isometrics/turk.html)

## The elevator

An elevator is a textbook state machine, and for good reason. Its controller has five states: idle, opening, open, closing and moving. The car only moves when every door is shut and locked.

[Interactive figure: Elevator](https://masonhall.org/isometrics/elevator.html)

## The order

An online order is a state machine with money attached. This one has thirteen states, from cart to refunded, and the front of the machine is the state diagram itself. Try getting into a weird state and see what happens.

[Interactive figure: Order-o-matic](https://masonhall.org/isometrics/orders.html)

## The agent

An AI agent runs a loop too. Here each step of one turn is physical work in one room: receive the request, check the standing context, pull a preference from memory, plan, open a skill, call a tool, read the results, offer options, and remember how it went.

The room's light shows the state: blue when idle, yellow when thinking, green when acting, amber when it's waiting on you, red when you've said no. The only time the agent turns to face you is to ask for approval before it books anything. For agents that spend money, that state matters most.

[Interactive figure: Muse at work](https://masonhall.org/isometrics/muse.html)