# Tree Leaves — Harbour Wind Plane Tree

## Preset
**Harbour wind plane tree** — cool and urban, spring rain into orange autumn, broad canopy sway, slick pavement, gust pulses.

## Systems
- Single HTML file with inline Canvas 2D rendering, CSS, and JS
- One heroic rooted plane tree with visible trunk and branching hierarchy
- 5 levels of recursive branching, ~80–120 leaves across the full canopy
- Full seasonal cycle: spring budburst → summer fullness → autumn colour turn + leaf fall → winter bareness → regrowth
- Branch spring physics: hierarchical sway response to wind, thinner deeper branches flex more
- Each leaf individually computed: attached (follows branch endpoint with sway), falling (wind + gravity + tumbling rotation), or settled (ground accumulation with decay)
- Wind system: continuous variable-strength flow with occasional random gusts; user-adjustable intensity and tap/press gust trigger
- Ground layer: dark wet pavement with subtle grain, accumulated fallen leaves visible throughout autumn and winter
- Controls: season auto-cycle, season slider, wind slider, gust button, pause/play, reset to spring, help overlay

## Season Loop (cycle time ~60 seconds at default speed)
1. **Spring** (0.00–0.25): Buds swell and leaves grow from 0 to full size, fresh lime-green canopy
2. **Summer** (0.25–0.50): Full dense deep-green canopy with leaf-size variation across the crown
3. **Autumn** (0.50–0.75): Leaves shift green→yellow→orange→brown; staggered detachment and tumbling fall; ground accumulation thickens
4. **Winter** (0.75–1.00): Bare winter branches, fallen-leaf carpet on ground; ground leaves fade to pale before next spring; ghost rings mark last year's leaf scars

## Visual Direction
- **Sky**: blue-grey gradient (steel at zenith → pale overcast at horizon)
- **Trunk**: warm grey-brown with subtle bark texture (lighter peeling patches)
- **Branches**: tapered polygons, drawn with round caps, darker in winter for silhouette contrast
- **Leaves**: almond-shaped ellipses, sized 6–14 px, seasonally coloured with individual hue offsets
- **Ground**: dark wet pavement with horizontal grain lines and pale reflection highlights
- **Wind**: faint horizontal particle streaks during stronger gusts
- **UI**: glass-morphism panel centred at bottom, light text on semi-transparent backdrop
- **Splash**: centred title, subtitle, pulsing "Tap to begin" with faint tree silhouette watermark
- **Help**: slide-up overlay showing controls legend, dismiss on tap

## Interaction
- Desktop: click/tap canvas to toggle auto-cycle pause; drag on canvas to gust; slider and button controls
- Mobile: touch controls for all sliders; tap canvas to pause; drag canvas for directional gust
- Season slider: manual override of auto-cycle position
- Wind slider: base wind intensity
- Gust button or canvas drag: temporary strong wind pulse
- Reset button: returns to spring with smooth transition