A sunny window breaks into radial and ring cracks, then shards tumble and glint.
Ordinary annealed glass fails in two stages: radial cracks race out from the impact and fork whenever the strip of glass between two of them gets too wide, then concentric cracks join neighboring radials in rings that spread farther apart away from the impact. The program grows that structure in polar form, with radials as forking random walks and rings as bowed chords, some of which never crack so cells merge into long daggers. Every cell becomes a rigid shard with a position, velocity, rotation matrix and spin, projected with perspective into the room, bouncing off the sill and settling on the floor. Shading comes from each shard's normal: a Fresnel term for reflection, a thickness edge, and a sun highlight only for glass standing in the beam of light. Tempered glass instead dices into a Voronoi crumble of small cubes.
Try it. Click the glass to strike it; hold or drag before releasing to hit harder. Click again after it breaks for a new pane. T switches between annealed and tempered glass, R installs a new pane, and space toggles extra slow motion.
Paste this into Claude Code, Codex or any coding agent to get a simple version running, then take it wherever you like.
Build a breaking 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 and stays sharp on high-DPI screens. Draw a wall, a window frame, and a simple sky and lawn through the glass.
- When I click the glass, generate a crack pattern around the click point. Shoot out 8 to 14 radial cracks at roughly even angles, each a polyline whose angle wanders a little, long enough to reach past the frame.
- Add concentric rings at radii that grow apart as they go outward (for example each gap 1.3 times the last). Between each pair of neighboring radials, a ring is a slightly bowed chord, with a little random jitter.
- Each cell between two radials and two rings is a polygon. Clip each one to the glass rectangle with Sutherland-Hodgman.
- Animate the cracks growing outward first, then turn each polygon into a shard with a velocity and a spin and let gravity pull it to the floor.
Once that works, make it beautiful:
- Fake 3D: give each shard a rotation matrix and an angular velocity, rotate its corners in 3D, and project them with a simple perspective divide so pieces tumble toward the viewer.
- Shade by the shard's normal: more reflection when it is tilted (Fresnel), and a sharp sun highlight with a little star glint when the normal lines up with the light.
- Show the crack growth and the first burst in slow motion, then ease back to real time.
- Let a few edge pieces stay stuck in the frame, and let shards bounce once and settle flat on the floor.
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 forking radial cracks, a tempered glass mode that crumbles into small cubes, or a beam of sunlight that only lights the shards inside it.
