Catalogue / Plate 37← All plates

Weave a cloth thread by thread

Set the stripes, watch a shuttle weave them, take home a yarn list and a price.

37 / WebGL shader · generative · made to order

Sampleton Weavers · made to your settCloth on the loom

Set the stripes. Watch it woven.

Closer

Drag the cloth, or focus it and use the arrow keys. The small map shows where you are.

130 by 170 cm. 780 warp ends, 1020 weft picks.

Start from

Stripes (86 threads to the repeat)

24 threads

Weft repeats the warp, so the cloth is a checkMirror at the pivots, as tartans do

Warp: 24 Fern, 4 Ink, 2 Gorse, 4 Ink, 16 Loch, 4 Ink, 2 Rowan, mirrored at the pivots (86 threads to the repeat).

Weave

Over two, under two, stepping along. Drapes well and shows a diagonal.

Size

Your order sheet

Yarn	Ends	Picks	Length	50 g balls	Cost
Loch	288	382	1089 m	12	£78.00
Fern	222	288	830 m	10	£65.00
Ink	216	280	808 m	9	£58.50
Gorse	36	46	134 m	2	£13.00
Rowan	18	24	68 m	1	£6.50
Loom set-up					£24.00
Weaving, 22,100 square cm					£221.00
Estimated total, including VAT					£466.00

Each colour's yarn is its ends times the length plus 25 cm, plus its picks times the width plus 8 cm, at 0.5 g a metre with 10% to spare, bought in 50 g balls at £6.50. Weaving is £0.01 a square cm. 6 threads to the centimetre. Invented prices, no order is placed.

Remake it

Build one interactive web page: Sampleton Weavers makes blankets and scarves to your sett. Every warp thread lies over or under every weft thread by the rule of the weave, and a shader draws each crossing as a lit thread, so a tartan comes out of the colours meeting rather than being painted on. A shuttle weaves the rows, you slide the cloth about with weight, and the stripes become a yarn list, a price and a printable order sheet.

Set it on an invented business called Sampleton, with its own drawn or generated pictures and no one else's files. It suits: A mill, weaver, upholsterer or soft furnishings maker who sells cloth made to order, where seeing the colours cross is the sale. Do not let it fail the way this kind of piece usually does: A pretty pattern that does not match what would be woven, or a tool with nothing to take away. Here the same weave rules draw the picture and count the yarn, the order sheet is a download, every control is a button, and a browser without WebGL gets the same cloth drawn as plain squares.

It must work with the keyboard, on a phone, with reduced motion respected and no text under 12px. Tell me which libraries you chose and why.

Notes: when it suits, when it does not, how it fails

When it suits: A mill, weaver, upholsterer or soft furnishings maker who sells cloth made to order, where seeing the colours cross is the sale.
When it does not: A truthful colour match on a screen, or a product that is not woven. Dye lots and yarn differ from any picture.
How it fails: A pretty pattern that does not match what would be woven, or a tool with nothing to take away. Here the same weave rules draw the picture and count the yarn, the order sheet is a download, every control is a button, and a browser without WebGL gets the same cloth drawn as plain squares.

Built for Pete's request for something far more impressive: a thread-accurate loom in a fragment shader, used for a real job, with the yarn and the price worked out from the same weave rules as the picture.