🌳 treegen

readme

get in touch with nature without touching any nature

Open it →

quickstart

Nothing to install and nothing to build. Open index.html, or serve the folder:

python3 -m http.server

npm test        # headless, Node >= 22.12

the canvas

Only the points snap to the lattice. A branch is a straight segment between two of them at whatever angle and length that takes, so nothing staircases.

The stage tints from the horizon outward — sky above, earth below, both fading to nothing as they go. The horizon is set by the first point, so an empty canvas has no ground to show.

toolbar

l-system

how it behaves

Vegetation is rules only. There is no way to place a leaf. Foliage comes from depth, tip-versus-interior, Strahler order and a seeded roll — properties of shape alone, so the same rules apply whether you drew the tree or grew it. Leaves fill whole lattice cells.

Colour runs in two stages. Every object takes a grayscale tone from its position in the graph, knowing nothing about colour; a second stage maps tone onto a swatch. Changing palette never disturbs the design underneath, and fall is stage two re-run against a different swatch list.

The trunk is found, not drawn. From the root, follow the highest Strahler order at every fork. That path bears no foliage.

Seasons run forward in order — spring, summer, fall, winter, then the next year. Each object keeps a stable identity across all four. Winter drops every leaf on a sine path, the swing narrowing as it falls, fading out before the ground line.

Growth extends from the tips, so earlier years survive. Past a Strahler threshold a limb stops bearing foliage and sheds its fine twigs, which come away in winter with the leaves. Mature wood also breaks buds part-way along a limb, at the sprout chance, opening into the widest gap in the wood already leaving that node.

Everything stochastic is seeded. Voronoi sites, the L-system, placement, tone, palette substitution, growth and every leaf's fall each draw from their own named stream, so rolling one never disturbs another and the same seed always gives the same tree.

embedding it

treegen.js is an ES module that boots itself against #treegen markup on its own page. To run it inside something else, take the markup from index.html, load treegen.css, and drive it:

window.__treegenEmbedded = true;   // before the import: don't self-boot
const { initTreegen, destroyTreegen } =
  await import('https://bobbymeyer.github.io/treegen/treegen.js');

initTreegen();        // no-ops when the markup isn't on the page
destroyTreegen();     // before the host removes it

This is how bobbymeyer.com runs it — loaded from this deploy rather than vendored.

files

tech

ES modules, no dependencies, no build. Node >= 22.12 for the tests, which run through node --test: 95 passing.

The engine is DOM-free and the renderer draws through an injected element factory, so the same drawing code runs in the browser and in the tests. The suite writes test/treegen-proof.html, a rendering of all four seasons.

license

MIT.