TITLE The Drawloom — Cloth from a Diagram PROMPT A generative weaving studio built on the weaver's traditional notation, the draft: a threading (which shaft each warp thread passes through), a tie-up (which shafts each treadle lifts) and a treadling (which treadle is pressed for each weft pick). From these three small grids the cloth (the drawdown) is completely determined. The viewer edits the grids or generates new drafts, and watches the cloth weave itself pick by pick in rendered yarn. Concept: a centuries-old visual programming language, made playable; pattern as computation. Mood: quiet workshop, linen and wool, patient mathematics. Palette: unbleached linen #EFE7D6 ground, indigo #1E3A5F, madder red #A8452C, weld gold #D9A441, iron-black #2A2A2A for grid lines and type. Light page with a woven-paper feel. Warp and weft colours are chosen from these five yarns (default indigo warp, linen weft). Layout (the classical draft layout, which is itself beautiful): cloth drawdown as the large central field; threading grid above it (8 shafts tall × 72 warp ends wide on a desktop, 96 on very wide screens, 48 on tablets, 28 on phones; the number of picks fills the available height); treadling grid to its right (8 treadles wide × picks tall); tie-up in the small square at the upper right where they meet (8×8). Thin iron-black grid lines; filled cells as solid ink squares; every 4th/8th line slightly heavier. Above the threading and beside the treadling are single-row colour bars for warp and weft colour sequences (click or drag to paint stripes with the chosen brush colour). To the left, a narrow column with title and controls; to the right, a narrow "pattern book" column of preset swatch cards (below the draft on medium screens); on phones the draft is scaled to the width and the controls and pattern book move below. Cloth rendering (Canvas): not flat squares: each interlacement drawn as yarn: where the warp is up, a vertical rounded segment of warp colour passes over the weft with a soft highlight along its centre and shadows at both ends where it dives under; where weft is up, a horizontal segment likewise; floats run continuously across cells; slight thickness variation per thread and yarn twist streaks; at the selvedges the weft visibly turns around the edge threads. Below the fell the bare warp ends hang unwoven and fade out as a fringe. A magnifier circle follows the pointer over the cloth showing the interlacement enlarged 4× in a brass linen-tester frame, with a small tag naming the end and pick under the glass; floats longer than 7 threads are flagged in red in the glass and the tag turns red ("float of 9 — will snag"). While the glass is over the cloth, the matching threading column and treadling row are outlined in madder. Signature moment: weaving. The cloth is not just displayed: it is woven: a shuttle (a small boat-shaped wooden shape trailing a weft thread) flies across the fell from side to side, one pick at a time; with each pick the corresponding treadling row lights up in weld gold, the shafts lifted by that treadle (per the tie-up) flash in the threading grid with their cells turning madder, the new weft row appears, and the reed beats it down with a small bounce of the cloth. Speed is adjustable from contemplative (2 picks per second) to a blur; any edit to the draft re-weaves from the changed row at a quick catch-up pace (or, if weaving is paused, repaints at once). On load, a handsome default draft (goose-eye, a 2/2 point twill in indigo and linen) starts weaving at a brisk pace so the first three seconds already show diamonds emerging row by row. Interaction: click/tap or drag in the threading, tie-up and treadling grids to toggle cells (threading enforces one shaft per warp end; treadling one treadle per pick, with a "several treadles to a pick" option); the cloth updates immediately. Preset drafts as labelled swatch cards with tiny previews: plain weave (tabby, checked four and four), 2/2 twill, herringbone, goose-eye, rosepath, a huck-lace-like texture, overshot "honeysuckle"-style figure, shadow weave with alternating colours. Generators: "mirror the threading" (point repeat), "tromp as writ" (treadle as threaded: copy threading to treadling), "random twill family", "advance" (advancing twill), each animating the grid cells as they change in a ripple. Colour: two yarn swatches each for warp and weft (tap a swatch to step through the five yarns) and striping sequences (solid, every other, 4×4 for checks/tartan-like setts, random stripe), plus a five-colour brush for painting the colour bars directly. A "colour / structure" toggle shows the drawdown as yarn colours versus black-and-white interlacement. Transport: pause/weave, "from the top". Export: "save swatch" as PNG via canvas, with a typeset caption. Information panel in small type: a plain-language sentence naming the weave if recognised ("this is a 1/3 broken twill on 4 shafts"), number of shafts and treadles used, repeat size, longest float (in red when over 7), a pick counter, and a short glossary sentence of five terms (warp, weft, shaft, treadle, float) whose definitions are revealed on hover or focus. Typography: title "The Drawloom" in a restrained old-style serif (Garamond-like stack: "Adobe Garamond Pro", "EB Garamond", Georgia) with a subtitle in small caps: "cloth from a diagram"; UI labels in small tracked sans caps; numbers tabular; shaft and treadle numbers along the grid edges in tiny figures, with end and pick counts every eighth line. Optional sound toggle (off by default): the soft wooden clack of shafts and the thump of the beater in time with the weaving, synthesised from filtered noise bursts. Keyboard: grids and colour bars are focusable with a cell cursor (arrows + Space). Reduced motion: cloth renders complete without the shuttle animation. DESCRIPTION A quiet linen-paper workshop page laid out as a classical weaving draft: threading on top, tie-up in the corner, treadling down the right, and a large cloth below that is computed entirely from those three grids. On arrival a wooden shuttle is already flying across an indigo warp, laying linen picks that the reed beats into goose-eye diamonds while the pressed treadle and lifted shafts glow gold in the diagram, making the cause-and-effect of the notation visible. Every thread is rendered as rounded, twisted yarn with highlights, dive-under shadows and looped selvedges, and a brass linen-tester lens enlarges the interlacement and warns in red of floats too long to wear. The left column holds the masthead, loom transport, generators, yarn choices and a plain-language reading of the weave; the right column is a pattern book of eight historical structures, each a tiny computed swatch. VISUAL TECHNIQUES - Classical draft layout drawn on canvas with hairline, 4th and 8th-line grid weights, ink-square cells and tiny tabular edge figures - Procedural yarn rendering from cached sprites: rounded segments with cross-section gradients, twist streaks, end shadows where threads dive under, and continuous floats - Selvedge loops where the weft turns, bare hanging warp below the fell fading into a fringe - Pick-by-pick weaving animation: eased shuttle flight with trailing weft, reed swing, damped spring bounce of the cloth on each beat - Live highlighting of the active treadling row, tie-up column and lifted shafts in weld gold and madder - Back-eased ripple of grid cells when presets or generators rewrite the draft - 4× magnifier in a CSS brass frame (conic gradients, knurled ring, glass highlight) with red long-float warnings - Woven-paper page texture from layered CSS line gradients and generated grain - Pattern-book thumbnails computed from the same draft engine - Garamond-style serif masthead with small caps, tracked sans caps labels, custom shuttle-shaped slider thumb, ink-fill button hovers - Noise-burst synthesis for shaft clack and beater thump (off by default) - PNG export of the full swatch with typeset caption - Reduced-motion mode that renders the finished cloth without shuttle or entrance animation INTERACTION MODEL Click, tap or drag in the threading, tie-up or treadling grids to set cells (one shaft per end, one treadle per pick unless "several treadles to a pick" is on); the cloth re-weaves from the first changed row. Drag along the warp or weft colour bars to paint stripes with the chosen brush yarn; tap the warp and weft swatches to step through yarns and choose solid, 1·1, 4·4 or random striping. Pattern-book cards load eight preset drafts; four generators mirror the threading, treadle as threaded, deal a random twill or build an advancing twill, each rippling through the grids. Pause or resume weaving, restart from the top, and drag the speed slider from two picks a second to a blur; toggle sound, switch between colour and structure views, and save the swatch as a PNG. Move the pointer (or a finger) over the cloth to hold the brass magnifier over it, which also outlines the corresponding threading column and treadling row. Every grid and colour bar is keyboard-focusable with an arrow-key cell cursor and Space to set; the five glossary words reveal definitions on hover or focus.