Colorfigures

Hand-inked, flat-coloured isometric objects you can turn round, see inside and play with. Each figure is one HTML page: a small engine (assets/core.js) plus your figure script, which models the object in 3D and draws it with the engine's shapes. The engine owns the camera (drag to turn, a Turntable and Front view button, arrow keys), the shading (three flat tones by the way a face meets the light, which turns with the viewer), the ink and the cast shadow. scripts/build.py makes the finished page: it inlines the engine and adds zoom, notices, the See-through / Labels switches and the phone layout.

A figure has three looks, all from the same model:

1. The object, closed, as you would see it in a shop: correct from every side, back and underside included.
2. See-through: the case fades to a ghost and the real working parts show inside it, moving with the buttons.
3. Labels: short name tags on the parts, lit in the accent colour while that part is working.

Workflow