Growing Tree

About this style

Biologist Aristid Lindenmayer introduced L-systems in 1968, a grammar of rewriting rules for describing how plants branch, and The Algorithmic Beauty of Plants (1990), written with Przemysław Prusinkiewicz, made them a staple of computer graphics. A later method, space colonization, published by Adam Runions and colleagues in 2007, grows branches toward scattered points of open space and gives more natural crowns. Branch thickness usually follows a pipe model descended from Leonardo da Vinci's observation that a trunk's cross-section matches the branches above it. Games, generative artists and brands about growth and sustainability use procedural trees to show something becoming.

Make a 10-second generative tree: a seed sprouts, a space-colonization tree grows branch by branch, leafs out, and turns from spring to autumn in front of a seasonal sun.

<inputs>
- Title: "Plant something slow."
- Brand line: "Rookmere Land Trust".
- Months: MAR through OCT, one label per stage of the season.
- Length: 10 seconds.
If I don't give you something, use the default and don't ask.
</inputs>

<direction>
Palette: paper that drifts with the season (spring #EEF0E4, summer #F3EEDA, autumn #F3E5D3, crossfaded); sun disc spring #F2EBB2, summer #F6D877, autumn #F2A65A; ink #2B2520 for trunk, branches, ground line and type; secondary text #7A6F64; leaves bud #CFE29A, spring #9CC95B, summer #4E8A3E and #3D7134, autumn #E3A63A, #D9622B and #A23A26. Flat fills only.
Composition: a 2px ink ground line at y 900 from x 160 to 1760. The tree is rooted at x 1180. The sun disc, 540px across, sits behind the crown at (1180, 470). Crown envelope: an ellipse centered on (1180, 470), 880×600, with nothing above y 150 or left of x 760. Text column at x 160: the title in Instrument Serif 88px, ink, two lines ("Plant something" / "slow.", the second in italic) on baselines y 420 and 510; the brand line in DM Mono 400, 22px, uppercase, tracking 0.12em, #7A6F64, at y 600; the month label in DM Mono 500, 26px, tracking 0.14em, at (160, 980).
Growth: space colonization (Runions et al.), precomputed once at load from a seeded PRNG: 1,600 attractors uniform in the crown envelope, influence radius 140px, kill radius 24px, segment length 8px. The trunk grows straight up from the seed (a seeded 2° lean) until attractors come in range; iterate until none remain or 420 iterations, storing each node's parent and birth iteration in typed arrays.
Time mapping: iteration i appears at 1.0 + 4.4·g(i/I) seconds, with g eased so the trunk rises slowly, the crown floods out, and the last twigs settle. Each new segment extends from its parent across its interval; nothing pops in.
Thickness: a pipe model, r_parent^2.5 = Σ r_child^2.5, tip radius 0.8px, recomputed every frame over the nodes visible at t, so the trunk thickens as the crown grows (cap the base at 20px). Draw segments as round-capped strokes of width 2r.
Wind: each node bends relative to its parent by 0.6°·(depth/maxDepth)·sin(1.1t − 0.004y + φ), accumulated down the hierarchy (forward kinematics), so tips sway up to 10px. Sway eases to zero by 9.0s.
Leaves: about 2,600, two per node within three segments of a tip, alternating sides; each an almond built from two quadratic curves, 14–20px long, angled ±40° off the branch. They bud with easeOutBack (6% overshoot) over 0.4s, base to tip, between 3.6 and 6.0s. Color follows the season per leaf with a seeded offset: bud, spring, summer (6.0–7.0s), autumn (7.0–8.4s), turning first at the crown's edge and top.
Fall: one leaf in ten lets go between 7.6 and 8.4s, drifts down on a sway (x = x0 + 30·sin(2.4τ + φ), turning, accelerating to 120px/s) and lands on the ground line by 8.9s, where it stays.
Seed: a 14px almond seed drops onto the ground line at 0.4s, splits, and the sprout rises with two small seed leaves.
Type motion: title lines rise 24px out of masks (0.6s, cubic-bezier(0.2, 0, 0, 1)), 120ms apart; each new month slides up 14px inside its mask (0.3s); the brand line fades up.
Premium: real branching logic (branches thin at every split, the trunk thickens as the crown fills), leaves timed by position, and a restrained ink-and-sun composition like a printed seasonal poster. Cheap: a recursive Y-fractal with identical angles, green circles for leaves, everything appearing at once.
Banned: symmetric fractal branching, fixed-angle recursive forks, gradients on leaves or branches, drop shadows, outlines on leaves, leaves still falling during the hold, anything flashing more than 3 times per second.
</direction>

<structure>
- 0.0–0.4s: paper; the ground line draws outward from the root point; the pale sun fades up to 40%.
- 0.4–1.2s: the seed drops, splits and sprouts; month "MAR".
- 1.0–2.2s: the trunk rises and the first branches split; title lines rise in from 1.2s.
- 2.2–5.4s: the crown grows by colonization and the trunk thickens; the sun reaches full strength; "APR" at 2.4s, "MAY" at 3.4s, "JUN" at 4.6s.
- 3.6–6.0s: buds open base to tip in spring green.
- 6.0–7.0s: summer: leaves deepen and the sun turns golden; "JUL" at 6.0s, "AUG" at 6.6s.
- 7.0–8.4s: autumn sweeps in from the crown's edge and the sun turns orange; "SEP" at 7.2s, "OCT" at 7.9s.
- 7.6–8.9s: one leaf in ten falls and lands; the brand line fades up at 8.4s; the sway eases to stillness.
- 9.0–10.0s: hold.
Other lengths: stretch the crown growth and the summer first; keep at least 1s of hold.
</structure>

<build>
- One self-contained index.html (inline CSS and JS), a 1920×1080 (16:9) stage scaled to fit the window, designed for 60fps.
- window.seek(t), t in seconds, computes every visual from t alone: no CSS transitions or animations, no setTimeout/setInterval, no state carried between frames, randomness only from a seeded PRNG. Anything cumulative (growth, simulation, particles) is precomputed once at load at a fixed step or solved analytically, so seek can jump to any time. Past the end, hold the last frame.
- Without ?render in the URL, drive seek from requestAnimationFrame so it plays in a browser (loop after a 1s end hold); with ?render, don't start that loop.
- Google Fonts via <link>; await document.fonts.load() for each face before assigning window.seek.
- Engine: Canvas 2D. Precompute the colonization once at load; seek computes visible nodes, thickness, sway, leaves and falling leaves from t.
</build>

<check>
Before showing me, step through one frame per second (t = 0…10): screenshot each and look at it. Fix overlaps, clipped or cramped text, and anything off-style or Banned. Check that the branching looks natural (no tangles, no branch crossing the trunk), the trunk visibly thickens, the crown never touches the text column or a frame edge, leaves cover the twig ends without hiding the trunk, and every fallen leaf is at rest by 9.0s. Confirm seek(10) and seek(11) match, so the final frame holds.
</check>

Ours, and free to use under CC0: copy it, change it, ship it. No credit needed.

Similar prompts

Blueprint Technical Drawing

Made by us

A cyanotype-blue engineering sheet that drafts itself: centerlines, compass-swept gears, hatching and dimension lines a…

Art Deco Gold

Made by us

A symmetrical Art Deco reveal in black and metallic gold: a sunburst fans open, stepped pinstripe frames draw from the…

Op Art Illusion

Made by us

A black-and-white Op Art piece: crisp stripes swell into a bulging lens and slow waves, and the title exists only as a…

Japanese Ma Minimal

Made by us

A quiet Japanese minimalist piece on generated washi paper: a single sumi ensō is brushed on with dry-brush texture, sm…