Origami Waves
A website for Origami Waves, a paper artwork of 522 folded pyramids in matte black on a
29 × 18 grid, each open on one side to reveal a smaller pyramid of vivid blue (#007AFF) paper
inside at exactly 75% scale.
- Main page: the artwork in 3-D, exactly as saved in
origami1829-final-vision.blend, with
nothing else in the way. The i button (bottom left) slides in the details and measurements
(in inches). Customize (bottom right) opens the second page.
- Customize page: choose paper colors, pick a pattern style and shape it with three sliders,
let the pattern move slowly like a live stream (pause, go back, save the moment), and save
designs, images and Blender files.
Built with three.js (WebGL 2), TypeScript and Vite. Everything runs in the
browser; nothing is sent anywhere.
Quick start
npm install
npm run dev
Open http://localhost:5173. For a production build (static files in dist/, host anywhere):
npm run build
The live site is deployed on Vercel from the main branch. Requirements: Node 20+ and a browser
with WebGL 2. Blender (4.2+, tested with 5.0.1) is only needed to regenerate assets or to verify
the Blender files.
Using the site
Viewing. Drag with one finger (or the mouse) or twist two fingers to turn the artwork, scroll
or pinch to zoom, right-drag or slide two fingers to move it. Front and Detail
recreate the Blender cameras; Angled shows the artwork tipped back 45°, as if leaning back on an
easel, where the relief reads best. The page never scrolls, so touch gestures always go to the
artwork.
Customize (the page's address ends in #customize, so the browser's back button returns to
the main page):
| Control | What it does |
|---|
| Colors | Pyramids (outside paper), Inside (the nested paper), Board. Each has a set of swatches plus a custom color picker. |
| Pattern style | Original (the artwork as made), Drift, Ripple, Dunes, Crosscurrent, Bloom, Spiral. The small previews show each style in your colors. |
| Intensity | Subtle to bold: how far the pyramids rise, fall and lean. The lowest setting is half strength, so there is always a clear pattern. |
| Scale | Fine to broad: the distance between wave crests. Broad waves let the tips lean farthest. |
| Flow | Gentle to swirling: how much the wave fronts bend and the leans twist. |
| Shuffle | A new variation of the style (new positions, angles and timing). |
| Animate | Starts the slow, continuous motion and shows the play bar. |
| Undo / Redo / Reset | Step through changes, or go back to the original artwork. |
The play bar works like a live stream: pause, jump back 5 seconds, drag through the last
minute, return to Live, or press the bookmark to save the moment you are looking at.
Save design keeps the look (colors, style, sliders, moment) in this browser under My
designs, with a thumbnail; tap one to reopen it. The current look is also remembered between
visits. Save image renders a 3000 × 2000 PNG of the front view. For Blender downloads a
zip with a .glb (File › Import › glTF 2.0) and a script that rebuilds the full scene with
materials, lights and cameras in your colors (instructions in the zip's README).
How the patterns are made
Like the original, every style mixes strong areas, where tips reach far over and rise or drop,
with calmer areas that lean slightly closed and sit a little lower, so the strong areas stand out.
Wave fronts always bend a little (more with Flow), and the lean direction turns gradually across
the board. Each pattern is measured and scaled until its strongest area reaches the limits below,
which keeps every variation bold.
Waves run along every row and column: no wave may travel along a row or column (every one is at
least 25° off both), a gentle undertone of two more oblique waves runs everywhere, and a fine
ripple along the two diagonals (about 4–5 pieces per wave, ±8 mm in height and ±8 mm in lean) keeps
every tip's x, y and height changing from piece to piece. Measured over runs of 5 neighboring
pieces, tips line up (within 3 mm) about 2% of the time, as in the original.
Geometry limits
Every variation stays within limits taken from the original artwork, so pyramids are never too
short, never fall toward the board, never touch their neighbors and never reach into the 2-inch
border of the board:
- tip height 22 to 76 mm (the original: 27 to 71 mm), resting at 49 mm
- sideways lean up to 66 mm (the original reaches about 69 mm)
- neighboring tips differ in lean by at most 38 mm (the original: 37.6 mm); where a pattern is
steeper, only that spot is eased back, smoothly
- all tips inside the board's 2-inch border
These limits are part of how the patterns are built. On top of that, after each change the
complete geometry check runs; if it ever found anything, the pattern would be toned down until
clean. In 10,000 random variations at the most extreme settings it never had to (see
docs/VERIFICATION.md).
여기까지가 README 앞부분입니다. 나머지는 원문에서 읽을 수 있습니다. README 전문 보기 ↗
