`README.md`

64 lines
# Voronoi Shatter

An interactive Voronoi "shatter" effect in a single self-contained HTML file —
no external libraries, no build step. Open `index.html` in any modern browser.

Points scattered on a canvas form Voronoi cells; each cell is a shard with a
radial gradient fill and dark crack edges. Clicking adds a point and the diagram
re-tessellates with a smooth growth animation.

## How it works

The re-tessellation animation is driven by a **power (weighted) Voronoi
diagram**. When a new point is added its cell starts with a large negative
weight (a single point) and eases up to weight 0 (a plain Voronoi cell), so the
new shard grows outward while its neighbours yield ground — a real geometric
tween, not a crossfade.

Each cell is computed by clipping the screen rectangle against the half-plane
bisector to every other site (Sutherland–Hodgman). Sites are visited
nearest-first with an early-out once no remaining site can reach the cell, which
keeps it fast as the point count climbs. The result is exact at rest, where the
final displayed diagram lives.

## Controls

| Action | Mouse / touch | Key |
|---|---|---|
| Add a point (re-shatter) | Click / tap | — |
| Paint many points | Click-drag | — |
| Remove nearest point | Right-click or Shift-click | — |
| Toggle seed points | `Seeds` button | `S` |
| Toggle crack edges | `Cracks` button | `C` |
| Shatter (explode & reassemble) | `Shatter` button | `E` |
| Cycle color palette | `Palette` button | `P` |
| Scatter random points | `Scatter` button | — |
| Undo last point | `Undo` button | `Z` |
| Reset scene | `Reset` button | `R` |
| Clear all | `Clear` button | `X` |
| Save PNG | `Save PNG` button | — |
| Hide / show panel | `Hide` button | `H` |

Palettes: Spectrum, Sunset, Ocean, Ember, Forest, Mono.

## Improvements over the original artifact

- **Shatter/explode** — shards fly outward from center, spin, and reassemble
  (`Sin`-eased 0→1→0), revealing the dark ground between them.
- **Remove points** — right-click/Shift-click deletes the nearest site; the
  neighbour that inherits the void grows into it with the same smooth animation.
- **Drag to paint** multiple points; **undo**, **clear**, **scatter**.
- **Six color palettes**, including a monochrome lightness ramp.
- **Crack-edge toggle**, collapsible control panel, keyboard shortcuts.
- **Save PNG** export (always renders a clean at-rest frame).
- **Performance**: nearest-first cell clipping with a geometric early-out
  (exact at rest), and idle frames skip the render loop entirely.
- **Touch support** via pointer events + `touch-action: none`; responsive panel.

## Verification

Rendered and interaction-tested headlessly with Playwright (Chromium): initial
tessellation fills the canvas, add/remove update the cell count correctly, the
explode animation separates then reassembles the shards, palette cycling and
seed toggle work, and there are **zero console/page errors**.