`README.md`

56 lines
# Living Fractal Tree

A single self-contained HTML file: a recursive fractal tree that **grows on load**,
**sways in simulated wind**, and drops **seasonal leaf particles** (and snow in
winter). Pure `<canvas>` + vanilla JS — no dependencies, no build step.

Open `index.html` in any modern browser.

## Controls

| Control | What it does |
|---|---|
| **Branch depth** slider | Recursion depth (4–12). Changing it regrows the tree. |
| **Wind** slider | Wind strength 0.0–2.0 — affects branch sway *and* particle drift. |
| **Next season** button / press **S** | Advance Spring → Summer → Autumn → Winter. |
| **Auto cycle** button | Toggle automatic ~13s season rotation on/off. |
| **Regrow** button | Replay the growth animation and clear the ground. |

## What each season does

- **Spring** — light greens with pink blossom leaves, a gentle leaf fall.
- **Summer** — dense deep-green canopy, minimal shedding.
- **Autumn** — warm oranges/reds, heavy leaf fall that piles on the ground.
- **Winter** — near-bare branches with **snow** drifting down the whole frame.

Fallen leaves accumulate as a pile along the ground; snow melts away on landing.

## Origin & design notes

This started from **Grok 4.5's** Model Arena attempt at the challenge. That version
had the right idea but three real defects, all fixed here:

1. **Strobing foliage.** Grok rebuilt the entire `leaves` array every frame with
   fresh `Math.random()` offsets, so leaves jittered violently. Here the tree's
   structure comes from a **deterministic seed hash** (`rnd(seed)`), so the shape
   is rock-steady and only the time-based wind animates it.
2. **Blurry on HiDPI.** Grok sized the canvas in CSS pixels. Here the canvas is
   scaled by `devicePixelRatio` and rendered crisp on retina displays.
3. **Frame-rate-dependent motion.** Growth and particles now advance by real
   elapsed time (`dt`), so it looks the same at 30fps or 144fps.

Extensions beyond the original prompt: wind-strength control, manual/auto season
control, distinct winter snow, ground leaf accumulation, cross-fading season sky
colours, and a smoothstep growth ease.

## Structure

Everything is in `index.html`:

- `rnd(seed)` — deterministic hash powering the stable tree shape.
- `branch()` — recursive draw with smoothstep grow-in + per-branch wind sway.
- `drawLeaves()` — foliage at branch tips, colour-blended across seasons.
- `spawnParticles()` / `updateParticles()` — falling leaves or snow, `dt`-timed.
- `drawPile()` — settled leaves on the ground.
- `currentSeason()` — season index + cross-blend from the season clock.