Fold, clamp and dip cloth in indigo, then unfold a crisp symmetric shibori.
The cloth is folded by reflections: an accordion of strips, then the strip folded again into squares, squares halved on the diagonal, or equilateral triangles (only 60 degree triangles reflect onto their neighbors exactly), and composing those reflections maps every point of the cloth to a spot in the packet and a layer in the stack. Dye reaches the stack only through its edges, which every layer shares, and its two faces, which only the outer layers touch, while clamped boards and thread press it shut. A diffusion solver over the packet grid and a few depth buckets, with noise-roughened series conductances, runs while the packet soaks; the leuco indigo comes out yellow-green and oxidizes to blue, and Beer-Lambert absorbance adds up with every dip. The unfold replays the folds backward, turning each flap about its hinge with an affine map that scales the cloth across the crease by cos(angle), and every layer reads its dye through the fold map, slightly misregistered like real cloth.
Try it. Pick a fold (keys 1 to 4), a clamp shape (C) and thread binding (B) for the next cloth. When the packet is clamped, drag on it to move the boards, click the vat or Dip in indigo (D) to dip again and deepen the color, and Unfold (U) to reveal the cloth. Click the finished cloth to fold a fresh one.
Paste this into Claude Code, Codex or any coding agent to get a simple version running, then take it wherever you like.
Build an itajime shibori dyeing toy with JavaScript and the HTML canvas element. 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 a canvas that fills the window, stays sharp on high-DPI screens (scale by devicePixelRatio), and resizes with the window.
- Represent the cloth as a square image, about 400 by 400 pixels, and the folded packet as a small grid, about 64 by 64 cells, of dye concentration.
- Fold the cloth in your head with reflections: an accordion fold into N strips maps a cloth coordinate u to the triangle wave of u with period 2/N, so odd strips are mirrored. Doing it on both axes turns the cloth into an N by N stack of squares.
- Mark a circle in the packet as clamped. Then run a diffusion simulation: every step, each cell moves toward the average of its neighbors, cells on the packet's edge are pulled toward full strength (the dye bath), and clamped cells neither take nor pass dye.
- After a fixed number of steps, color every cloth pixel by looking up its folded cell: white where the concentration is low, deep indigo where it is high.
Once that works, make it beautiful:
- Turn concentration into color with Beer-Lambert absorbance, multiplying white by exp(-absorbance x k) per channel with a larger k for red than blue, and let repeated dips add absorbance so the blue deepens.
- Roughen the diffusion rate with noise so the dye edges feather.
- Add a Dip button and an Unfold button, and animate the unfold: flip the strips open one by one around their crease lines, scaling each flap across the crease by the cosine of its 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 folding into equilateral triangles for hexagonal patterns, showing the yellow-green dye oxidizing to blue, or letting me drag the clamp around before dipping.
