Generative Branching Tree
L-system inspired tree with continuous growth and regrowth cycles.
What is Generative Branching Tree?
Generative Branching Tree is a free Canvas 2D web effect in the TappyPrism library. L-system inspired tree with continuous growth and regrowth cycles. It is drawn with the Canvas 2D API, which trades some GPU efficiency for the widest possible browser and device support. It ships as a single self-contained HTML file (generative-tree.html) with zero dependencies — no npm package, no framework, no build step. It exposes 2 live parameters — Growth Speed, Branch Depth — adjustable in the browser or at runtime.
Parameters
| Parameter | Key | Range | Default |
|---|---|---|---|
| Growth Speed | GROWTH_SPEED_BASE | 0.003 – 0.025 | 0.008 |
| Branch Depth | MAX_DEPTH | 4 – 14 | 9 |
How to add Generative Branching Tree to your page
- Download the standalone file generative-tree.html and copy its source into your project.
- Or embed it as a background iframe:
<iframe src="https://prism.tappypotato.com/fx/generative-tree.html" style="position:fixed;inset:0;width:100%;height:100%;border:0;z-index:-1" title="Generative Branching Tree"></iframe> - Tune it at runtime with postMessage:
iframe.contentWindow.postMessage({ type: 'param', name: 'GROWTH_SPEED_BASE', value: 0.008 }, '*');
Frequently asked questions
What is Generative Branching Tree?
Generative Branching Tree is a free Canvas 2D web effect in the TappyPrism library. L-system inspired tree with continuous growth and regrowth cycles. It is drawn with the Canvas 2D API, which trades some GPU efficiency for the widest possible browser and device support. It ships as a single self-contained HTML file (generative-tree.html) with zero dependencies — no npm package, no framework, no build step. It exposes 2 live parameters — Growth Speed, Branch Depth — adjustable in the browser or at runtime.
How do I add Generative Branching Tree to my website?
Download the standalone file at https://prism.tappypotato.com/fx/generative-tree.html and copy its source into your page, or embed it as a background iframe: <iframe src="https://prism.tappypotato.com/fx/generative-tree.html" style="position:fixed;inset:0;width:100%;height:100%;border:0;z-index:-1" title="Generative Branching Tree"></iframe>. Tune it live with postMessage, e.g. iframe.contentWindow.postMessage({ type: 'param', name: 'GROWTH_SPEED_BASE', value: 0.008 }, '*').