# BREED — generative sculpture gallery

A Three.js breeding gallery for generative art. It shows a 3×3 grid of live 3D sculptures, each built from a small genome. Pick two parents and the app breeds nine children by crossover and mutation, then animates the new generation in.

## Run

There's no build step and no network access is needed. Three.js is included locally as `three.module.min.js`. ES modules don't load from `file://`, so serve the folder over HTTP:

```sh
python3 -m http.server 8000
# open http://localhost:8000/index.html
```

## Controls

| Action | Control |
| --- | --- |
| Pick parent **A**, then parent **B** (breeding starts automatically) | Click two tiles, or press `1`–`9` |
| Deselect a parent | Click it again, or press `Esc` |
| Self-cross: breed a tile with itself (9 mutants) | `Shift` + click, or `Shift` + `1`–`9` |
| Mutation rate (chance that each gene mutates) | **mutation** slider in the header |
| Previous generation (up to 50 back) | **◀ Back** or `Z` |
| New random population | **↻ Random** or `R` |
| Show/hide the genome readouts | **Genome** or `G` |
| Export the whole gallery as PNG (1804×1842, with genome captions) | **⤓ Export PNG** or `E` |
| Export one sculpture as a 1200×1200 PNG | Hover a tile and click its **⤓** button |
| Tilt a sculpture | Move the pointer over its tile |

## Genome

| Gene | Effect |
| --- | --- |
| `shape` | Base primitive: SPHERE, CUBE, TORUS, KNOT, STARKNOT, PILL, VASE, HELIX |
| `freq` | Spatial frequency of the animated simplex-noise displacement |
| `amp` | Displacement amplitude |
| `twist` | Twist around the vertical axis (radians per unit height) |
| `pal` | Colour palette: base hue, saturation and hue spread, giving three colours (shown as swatches) |
| `parts` | Number of orbiting particles (0–3000) |
| `speed` | Speed of animation and rotation |

Each child takes each gene from parent A or B at random. Number genes are sometimes blended between the two parents, and the palette sometimes blends hue along the shorter way round the colour wheel. Each gene can then mutate, with the probability set by the mutation slider.

Value colours in the readout show where a gene came from: amber means parent **A**, cyan means parent **B**, violet means a blend of both. A pink **✦** marks a mutated gene. The name and `#id` are derived from a hash of the genome.

## Notes

- One WebGL renderer draws all nine tiles using scissor viewports. Displacement, twist and normals are computed on the GPU in the vertex shader.
- Geometry is shared between tiles, so breeding only changes shader uniforms and swaps meshes.
- If the frame rate drops below about 50 fps, the render resolution steps down automatically, and steps back up when there's headroom.