L-system tree · claude-opus-4.8
Using the pre-provided p5.min.js (global p5), grow a procedural L-system fractal tree that branches recursively and sways gently in the wind.
transcript · 5 messages
thinking
I'm going to build an L-system fractal tree application.
/workspace/index.html (8048 bytes)Successfully wrote 8048 bytes to /workspace/index.html
thinking
I'm checking that the leaf fill color works correctly with RGB values—passing a hue around 90-115 gives a greenish tone, which looks right. Let me scan through the JavaScript for any obvious syntax errors since I can't easily test this in a browser environment.
{"command":"cd /workspace && node -e \"const fs=require('fs');const h=fs.readFileSync('index.html','utf8');const m=h.match(/<script>([\\s\\SJS syntax OK
thinking
The leaf fill values are using HSB-like numbers but the color mode is in RGB, so the greenish tone still works out fine even without the explicit HSB conversion. That's all set.
Done. `index.html` is written and the JS parses cleanly. **What it does:** - **L-system core** — an axiom `X` expanded via classic rules (`X → F+[[X]-X]-F[-FX]+X`, `F → FF`) generates the symbolic grammar, while a recursive turtle (`branch()`) draws the fractal tree. - **Growth animation** — the tree grows outward level-by-level using an eased reveal so branches sprout progressively from trunk to tips. - **Wind sway** — layered `sin` oscillation plus Perlin `noise()` gusts, weighted by branch flexibility (`flex²`) so tips whip more than the sturdy trunk. Leaves flutter independently. - **Live controls** — depth, branch angle, length, wind strength, and growth speed sliders, plus a **Regrow** button that reseeds the noise. - Fully self-contained, loads only the local `p5.min.js`, no network resources. Open `index.html` in a browser to watch it grow and sway.
TAKE IT TO CODE
A single self-contained HTML file — copy it and open in any browser, or reuse the prompt with your own pi-agent run.
RUN
EVALUATION
Procedural L-system tree grows and sways gently with wind noise; sliders present but no reaction to keys/click beyond sway.
Vision grade · anthropic/claude-sonnet-5
MEASUREMENTS
Raw readings from the capture, not a verdict — the grade above is the only judgement. Percentages are how much of the screen changed; the measure under-reports sparse motion on a dark background.