A drawbridge you can operate, drawn in lines

What it is

Fig 11: a two-leaf lift bridge over a canal, drawn like a plate from an old engineering book. Cars cross it. Boats wait under it. Press Space, or click the small office marked “BRIDGE 11”, and the gates drop, the span clears, and the two leaves rise to 78 degrees. Press B to send a boat. Press L for the lamps. A readout in the corner shows the phase, the angle, how many cars have crossed and how many boats are waiting.

If you try to lower the bridge while a boat is under it, the office refuses: “boat under the span”.

Why I made it

I like machines you can see working. A drawbridge has a clear sequence that everyone understands: stop the cars, lift, let the boat through, lower, go. I wanted to draw that sequence with lines only, and make the lines move.

How it is built

The drawing is SVG made from strings by a small kernel. It is “true isometric, 30 degrees”, and the scale is simple: “10 units is 1 metre”.

Paint order is the depth sort. There is no 3D engine. Things that are further away are drawn first, things that are nearer are drawn later. The static parts sit in fixed groups. The moving parts, cars, boats, leaves and chains, each have a layer that is sorted by x plus y every frame and rewritten only when its text changes. That keeps it cheap.

A leaf is a plane rotated about its hinge. The deck is drawn flat, then the whole plane turns around the hinge line. The chains follow.

A phase machine runs the bridge. The gates drop at 120 degrees a second. Then the span clears. Then the leaves rise at 24 degrees a second until 78. Then the reverse. You can press again mid-move and it reverses from where it is. Cars queue at the stop line and fade out at the edges of the plinth. Boats hold until the phase is “up”.

Design decisions

• One plate, four captions. From the code: “one textbook plate centred in a narrow column; captions sit in the plate’s four corners, operator controls beneath”. The font is IBM Plex Mono.
• Greys plus one accent. The halo of each lamp is at 24% opacity in light mode and 36% in dark mode, because light needs more room on a dark page.
• Lights off means grey. With the lamps off, the windows, the lamps, the headlights and the panel glow all go grey. Nothing is removed, it is just not lit.
• Reduced motion stops the water ripples, the blinks and the transitions.
• The lit windows are seeded. They come from a fixed random seed, so the same windows are lit every time you load the page. A place should look the same when you come back.

Small details

• The boats have names: MARIT, WREN, HALCYON, DE HOOP, OSPREY, GRETA.
• There is a “DOCK 4” and a “QUAY CAFÉ” with a striped awning.
• Headlights are only on in the lane facing you.
• The front-left chain “sits behind boats when raised but in front of cars on the span when closed”. One chain, two places in the sort.
• Tower signals blink while the bridge moves and stay lit when it is up. The gate lamps blink whenever the bridge is not down.

Numbers

Scale 1 to 100. Span 8 metres, clearance 1 metre, masts 6.2 metres. Maximum angle 78 degrees. Seven cars per lane, three boats at most. A boat arrives on its own every 32 to 50 seconds.

What I learned

Sorting by x plus y is enough for a whole diorama if you are careful about what is in which layer. The one chain that has to be in two places taught me that depth is a decision, not a number. I used the same kernel again for a street with a chase on it, Donut Patrol.