Compass-drawn Gothic tracery, glazed panes, and colored sunlight pouring across a nave.
The tracery is built rule by rule from compass circles, arcs and straightedge lines repeated by the rose's symmetry: equilateral pointed arches centered on the opposite springing points, overlapping foils whose meeting points become cusps, and in the flamboyant style S-curved bars that make flame-shaped mouchettes around daggers. Stroking those centerlines at moulding width gives the stone. The openings are found by flood fill, folded into one symmetry wedge so mirror-image openings share glass, and glazed with Worley-noise panes, lead came, pearled borders from a distance transform and grisaille matting. Because the camera is level, every plane parallel to the wall projects with only a scale and an offset, so the beam is 34 exact slices of the window's transmission map slid along the sun ray, and the pool on the floor is computed per pixel by tracing each point back along the sun to the glass.
Try it. Drag anywhere to steer the sun: the pool of light follows your pointer (arrow keys work too). Pick a tracery style and a symmetry order from 6 to 24 to watch a new window laid out and glazed, click Glass or press G to reglaze it in another palette, and press Space to replay the construction.
Paste this into Claude Code, Codex or any coding agent to get a simple version running, then take it wherever you like.
Build a glowing Gothic rose window 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. Paint a dark stone background.
- Draw the tracery as stroked centerlines, the way a mason lays out a window with a compass: an outer circle, a hub circle, and n spokes between them (start with n = 12). Write one function that draws a prototype pointing straight up, then rotate it n times with ctx.rotate.
- Over each gap between spokes, add an equilateral pointed arch: two arcs, each centered on the opposite springing point with a radius equal to the span.
- Fill the openings before stroking the stone: draw colored wedges (deep blue, ruby, gold) clipped to the circle, then stroke all the tracery on top in near-black with a thick lineWidth so the bars become stone.
- Animate the construction: draw each rule's arcs progressively over half a second (ctx.arc with a growing end angle) before the glass fades in.
Once that works, make it beautiful:
- Break each opening into small panes with thin dark lead lines (a jittered grid or Voronoi cells) and darken every pane slightly toward its edges, like painted grisaille.
- Add a glow: draw a blurred, downscaled copy of the glass on top with globalCompositeOperation = "lighter".
- Cast the light: draw a stone floor below and copy the glass onto it with an affine transform (squashed vertically and slid sideways), additive and semi-transparent, so a colored pool appears. Let the mouse move the sun, which slides and stretches the pool.
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 foiled circles with cusps, volumetric light beams drawn as stacked translucent copies of the window, or a per-pixel floor that traces each point back along the sun ray to the glass.
