Trees grow by competing for light in a watercolor forest that turns with the seasons.
Each tree is a graph of buds and internodes grown by the self-organizing tree model of Palubicki and colleagues. Once a year every bud casts a pyramid of shadow into a voxel grid, sheared away from the sun, then reads the light left in its own cell; light is summed down to the root, and the Borchert-Honda rule splits the tree's vigor at every fork in favour of the better lit side. A bud grows a shoot as long as its vigor allows, steering between its old heading, the direction of least shadow and gravity, and branches that no longer earn their keep are shed. Nobody draws the crowns: they spread into gaps, lower limbs starve and fall, neighbours lean apart, old trees die and seedlings take hold only where light reaches the ground, all painted as watercolor glazes through spring, summer, autumn and a snowy winter. Behind the trees, sunlight is traced down through the same grid and attenuated by every crown it crosses, so shade pools under the canopy and shafts of light slant through the gaps onto the forest floor.
Try it. Click a tree to fell it and watch its neighbours and new seedlings fill the gap in a short time-lapse. Click the ground to plant a sapling, and drag the sun (or use the arrow keys) to change where the shadows fall and which way the crowns grow. T toggles time-lapse, L shows the shadow voxel grid the buds read, and Space replants the forest.
Paste this into Claude Code, Codex or any coding agent to get a simple version running, then take it wherever you like.
Build a side-view forest where trees grow by competing for light, using JavaScript and the HTML canvas element. Put everything in a single index.html file with no libraries or build step, so I can open it directly in a browser.
Start simple:
- Make a canvas that fills the window and stays sharp on high-DPI screens (scale by devicePixelRatio). Paint a pale sky and a strip of ground.
- Store each tree as a list of nodes: position, parent, growth direction, and whether it still has a bud at its tip and a bud at its side.
- Keep a coarse shadow grid over the scene (cells about 5 pixels). Once per "year", clear it, and for every bud add shadow to the cells below it: a small amount that fades with each row down and spreads one cell wider every two rows.
- Each bud reads its light as 1 minus the shadow in its cell (add back its own contribution). Sum the light from the buds down to the root.
- Give the root vigor proportional to that total and split it at every fork between the main and side branches in proportion to their light (the Borchert-Honda model). A bud with vigor v grows floor(v) new nodes, heading mostly along its old direction, a little upward, and a little toward whichever nearby cell has the least shadow.
- Plant six trees along the ground and run a year every half second, drawing branches as lines.
Once that works, make it beautiful:
- Thicken branches with the pipe model (a branch's width to the power 2.5 is the sum over its children) and paint soft, semi-transparent leaf dabs on the young nodes.
- Drop side branches whose light per node falls below a small threshold, so lower limbs starve and fall.
- Add seasons: fresh green, summer green, autumn colors with falling leaves, bare branches with snow.
Explain the key ideas in short code comments. When you're done, tell me how to open it and suggest three directions I could take it next, such as a draggable sun that shears the shadows, felling trees to watch the gap fill, or seedlings that only sprout where light reaches the ground.
