A floor loom weaves shaded yarn cloth live from historical drafts you can edit.
The grids around the cloth are a weaving draft as pattern books print it: the threading puts each warp end on a shaft, the tie-up says which shafts each treadle lifts, and the treadling picks a treadle for every pass of the shuttle. Whether an end lies over a pick is tieup[threading[end]][treadling[pick]], a boolean matrix product, and the cloth is that product drawn in yarn: every crossing is two shaded, twisted strands with a soft shadow that dive under wherever a float ends. Below the fell the shed opens, the shuttle runs between the lifted and lowered ends, and the reed beats each pick in. Eight structures are included: overshot coverlets with a thick pattern weft bulging over a thin tabby ground, Monk's Belt, goose-eye and rosepath twills, huck lace, log cabin color-and-weave, a network twill and a 3/1 twill.
Try it. Click or drag in the threading, tie-up or treadling grids to rewrite the draft and the whole cloth reweaves instantly. Click the cloth to flip the tie-up cell behind that crossing, hover it to trace the product, click the color bars to recolor threads, choose a draft (keys 1 to 8 or the left and right arrows) or press R for a random one. Space pauses and the up and down arrows change the speed.
Paste this into Claude Code, Codex or any coding agent to get a simple version running, then take it wherever you like.
Build a weaving draft visualizer 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.
- Store a 4-shaft weaving draft as three arrays: threading (which shaft each warp end is on, for example 1-2-3-4 repeating), a tie-up (a 4x4 grid of which shafts each treadle lifts, for example a 2/2 twill) and treadling (which treadle is pressed for each pick).
- Draw the draft the way weavers do: the threading grid along the top, the tie-up in the top-right corner, the treadling down the right side, and the drawdown in the big area below the threading, aligned cell for cell.
- Fill drawdown cell (end, pick) dark when tieup[threading[end]][treadling[pick]] is true (the warp is on top) and light otherwise.
- Let me click cells in the three draft grids to change them, and redraw the drawdown immediately.
Once that works, make it beautiful:
- Draw each crossing as yarn instead of a flat square: the thread on top is a rounded capsule with a gradient across it (dark edges, a highlight off center), faint diagonal strokes for the twist, and a soft shadow. Where the thread's neighbor along its length goes under, round the end off and darken it so it looks like it dives into the cloth.
- Pre-render those yarn pieces once per color and shape onto small offscreen canvases and stamp them with drawImage.
- Add presets with their own warp and weft colors: straight twill, point twill (threading 1-2-3-4-3-2) for diamonds, and log cabin (plain weave, dark and light threads alternating).
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 animating a shuttle weaving the cloth row by row, adding overshot drafts with a thick pattern weft over a thin tabby, or exporting the draft as a WIF file.
