How Undergrowth was made

There are no plant drawings in the code. There is only a rule for how a branch turns, a rule for when it splits, and a rule for how it dies. Everything you saw is those three rules arguing.

The organism

The garden is an agent system on a single 2D canvas. Each branch is a tiny object: position, heading, generation, and a life budget. Every frame it:

1. Turns by a sample from a value-noise field (the wander).
2. Bends a few degrees toward the cursor if one is present (the phototropism).
3. Draws a short line segment and spends one unit of life.
4. Sometimes spawns a thinner child branch at ±30–60°.
5. When its life runs out, it blooms: a ring of ellipse petals in the current season's palette, then it is removed.

The canvas is never cleared. Old growth stays forever, like rings in a tree, so the page becomes a painting of its own history. Ten minutes on the page produces a garden nobody else will ever see.

Phototropism in eight lines

const dx = pointerX - b.x, dy = pointerY - b.y;
const d = Math.hypot(dx, dy);
if (d > 40 && d < 520) {
  const target = Math.atan2(dy, dx);
  let diff = target - b.a;            // shortest angular path
  while (diff >  Math.PI) diff -= 2 * Math.PI;
  while (diff < -Math.PI) diff += 2 * Math.PI;
  b.a += diff * 0.028;                // gentle, not obedient
}

The 0.028 factor is the entire personality of the piece. At 0.2 the vines chase your cursor like eels and the magic dies. Growth should acknowledge you, not obey you.

Seasons

A 90-second clock cycles four palettes (spring, summer, autumn, winter). Only new growth takes the current palette, so a mature garden shows its age in color strata. The season, day count, branch and bloom totals run in a small mono HUD, because giving a fiction instrumentation makes it feel observed rather than decorated.

Design decisions

• Death as a feature. Blooms only happen when branches die. The prettiest thing on the page is the failure state.
• Self-healing. If the population drops below six branches, the garden reseeds itself from a random edge. It cannot go extinct.
• Type stays out of the way. Instrument Serif at display size, floating field-note cards with a dark blur backdrop, and no other UI. The organism is the site.
• Pre-growth. The system runs ~400 silent steps before first paint so nobody arrives to an empty page.
• Reduced motion. With prefers-reduced-motion, the garden pre-grows ~2,600 steps into a still botanical print and stops.

Reproduce it

1. Start with one agent: move forward, turn by noise, draw a segment.
2. Add branching with a small probability and a generation cap.
3. Add a life budget and make death do something beautiful.
4. Add one external force the visitor controls. One is enough.
5. Never clear the canvas. Accumulation is the artwork.