Miura-ori, Yoshimura and waterbomb sheets fold with exact rigid-origami kinematics.
In rigid origami every facet is a flat, unstretchable plate and all the motion happens at the creases. Each of these three tessellations has a single degree of freedom, solved in closed form: Miura-ori vertices sit on a lattice whose spacings follow from three length and angle constraints, Yoshimura creases become stacked rings that curl the sheet into a lantern which seals itself shut, and the waterbomb's centers and row boundaries ride two cylinders whose radii and twist follow from a single closed-form relation, so the sheet rolls into a tube of sinking bases. The HUD measures the worst change in any crease length (about 1e-15) and how far any Miura facet bends out of plane. Facets are drawn by a small z-buffered rasterizer with two-sided paper colors, cavity shading, grain stuck to the sheet and creases computed per pixel, over a blurred cast shadow; the inset shows the flat crease pattern with mountains and valleys found from the folded geometry.
Try it. Drag up and down on the sheet to fold and unfold it, and sideways to turn it, or use the fold slider. Pick Miura-ori, Yoshimura or Waterbomb (1, 2, 3) and change the Miura sector angle or the Yoshimura triangle height with the second slider or the left and right keys. Up and down keys fold, Space snaps between flat and folded. Left alone, it folds and unfolds each pattern in turn.
Paste this into Claude Code, Codex or any coding agent to get a simple version running, then take it wherever you like.
Build an animated Miura-ori fold with JavaScript and the HTML canvas element: a sheet of paper that folds and unfolds with exact rigid-origami motion, every facet staying perfectly flat. Put everything in a single index.html file with no libraries or build step, so I can open it directly in a browser.
Start simple:
- Make the flat crease pattern: a grid of vertices (i, j) at x = i * w and y = j * h + (i mod 2) * c, joined into parallelogram facets. Use w = 1, h = 1 and c = w / tan(70 degrees).
- Fold it in closed form. Pick a lift D between 0 and h * sin(70 degrees). Then B = sqrt(h^2 - D^2), C = c * h / B and A = sqrt(w^2 + c^2 - C^2), and the folded vertex (i, j) sits at (i * A, (j mod 2) * D, j * B + (i mod 2) * C), with y pointing up. Check in the console that every edge keeps its flat length.
- Animate D up and down with a smooth ease and a slowly turning camera, project the vertices in perspective and fill the facets back to front by depth.
- Shade each facet by the angle between its normal and a light, using one color for the top side of the paper and another for the back.
Once that works, make it beautiful:
- Paint a warm paper background with a little generated noise and a soft blurred shadow cast by the sheet onto the table.
- Outline facets in a slightly darker tone so the creases read, and show the flat crease pattern in a corner with mountain folds in red and valley folds dashed blue.
- Let me drag up and down to fold, sideways to turn, and add a slider for the sector angle.
Explain the key ideas in short code comments. When you're done, tell me how to open it and suggest three directions I could take it next, such as a Yoshimura pattern that curls into a lantern, a waterbomb tessellation, or a z-buffer so curled sheets draw correctly.
