Robb Doering
All work

Origami Odyssey

Interactive 3D origami instructions, rendered in the browser with Three.js.

Source on GitLab TypeScript · MIT · v0.1.0
Eight numbered stages in reading order. Row one: a source plan or FOLD file; validation into an immutable indexed model; canonical exact-pose schedules; a small catalog manifest. Row two: a lesson pack per model addressed by content id, which crosses from the server into the browser; inside a browser panel, the lesson controller with its pack cache (at most two packs or 1 MiB) and one Three.js viewport that renders on demand; and finally the Astro page with its APIs and SQLite persistence. Cyan stages run on the server side, indigo stages in the browser, and the amber arrow is the network hop that carries the pack. The stages light up in order. browser cache: 2 packs or 1 MiB 1 source plan or FOLD file 2 validate immutable model 3 poses canonical schedules 4 catalog small manifest 5 lesson pack, by content id 6 lesson controller pack cache 7 viewport Three.js, on demand 8 Astro APIs SQLite 16 FOLD fixtures: crane swan lily whale

Origami Odyssey started in 2021 as my project for Georgia Tech's Educational Technology course: could origami instructions be something you navigate, instead of a page of diagrams you squint at? The name comes from Simon and Newell, who described problem solving as an odyssey from one knowledge state to the next.

It has since been rebuilt on Astro and raw Three.js. Every step is an exact folded pose in the FOLD format, the camera stays fixed overhead so the paper behaves like paper, and you can step forward and back through a sequence at your own pace. The catalog has eight lessons, and a headless-browser test walks every one of them.

Origami Odyssey's landing page: the heading "Begin with the paper already in motion" beside a folded yellow paper sailboat.
The Sail Boat lesson one fold from the end, with the final step highlighted in the fold map.
The Sail Boat lesson ten folds in: a fold map listing the steps beside the 3D viewer showing the partly folded paper.