The Gauge
The story behind The Gauge
Inspired by Bohus Stickning on Wikipedia
Built with Pure WebGL2 · GLSL Fragment Shader · RGBA8 Grid Texture
Techniques Per-stitch directional lighting · Knit V-shape / purl bar rendering · Bresenham line rasterization · Coverage-driven phase progression
Direction Turn a cursor into a knitting needle — interaction as textile craft
Result A growing colorwork fabric that transitions from raw wool to impossibly fine Bohus Stickning patterns
The Story
In 1939, Emma Jacobsson — an Austrian-born botanist married to the governor of Bohuslän — founded a knitting cooperative to help impoverished families in western Sweden. There was no knitting tradition in the region. She invented one.
Jacobsson recruited professional artists to design patterns instead of copying folk traditions. The result was Bohus Stickning: handknitted colorwork at impossibly fine gauge (8.5+ stitches per inch), in angora-wool blends, with patterns named after wildflowers and frost — Rimfrost, Stora Nejlikan, Allvaret. Within years, the cooperative’s work was worn by Ingrid Bergman, Grace Kelly, and Helena Rubinstein. Poverty relief became luxury fashion.
The cooperative closed in 1969. The patterns had become too intricate for the knitters to execute. Beauty outpaced human hands.
The Take
Your cursor is a knitting needle. Move across the canvas and stitches form in your wake — knit stitches (raised V-shapes that catch the light) when you move horizontally, purl stitches (recessed horizontal bars in shadow) when you move vertically. This isn’t metaphor: that’s actually how knit and purl stitches work, distinguished by the direction of the yarn through the loop.
You start with raw wool — a single oatmeal color. As you cover the canvas, new colors unlock: first slate blue, then dusty rose and moss green, then straw gold and deep plum. The cooperative’s full palette emerges through your effort. Pattern names appear as you work: Rimfrost, Stora Nejlikan, Allvaret. Botanical motifs auto-complete near your trails — the designers’ vision growing from your raw input.
Past 88% coverage, the gauge tightens impossibly. Stitch detail dissolves into a pure impressionist color field — the cooperative’s end, when patterns became too difficult for human hands.
The Tech
Grid Architecture. A 128×96 stitch grid stored as an RGBA8 texture: R = stitch type (0=empty, 1=knit, 2=purl), G = palette color index, B = placement age, A = intensity. The CPU manages stitch placement via Bresenham line rasterization with a variable-radius brush (radius 3 → 2 → 1 as coverage increases), then uploads the texture to the GPU each dirty frame via texSubImage2D.
Stitch Rendering. The fragment shader renders each stitch as a micro-surface with directional lighting. Knit stitches use two diagonal ridges forming a V-shape — the yarn legs run from top-left/right to bottom-center, with cross-sectional roundness computed from distance to the ridge centerline. Purl stitches render a horizontal bar with hemisphere cross-section. Both use per-stitch hash noise for fiber texture variation.
Phase System. Coverage fraction drives phase progression: 0% = 2 colors (raw wool + slate blue), 10% = 3 colors, 25% = 4, 45% = full palette. At phase transitions, botanical motifs auto-complete using polar-coordinate petal patterns (sin(angle * 5)). The dissolution phase (88%+) interpolates stitch detail toward pure color values, edge-dissolving each cell from its border inward.
Aspect Correction. The grid maintains its 4:3 aspect ratio across all viewports via UV-space letterboxing/pillarboxing, with 4% padding. Screen-to-grid coordinate mapping inverts the same transform for input handling.
This blog post was AI generated with Claude Code. Authored by Artificial Noodles.