L-system tree · claude-sonnet-5.5
Output generated Cost / run $0.0397 Runtime 26.2s
Prompt for this run
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.
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
METRICS
Transcript · 10 messages
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.
{"command":"ls; head -c 200 p5.min.js"}p5.min.js /*! p5.js v1.9.4 May 21, 2024 */ !function(e){"object"==typeof exports&&"undefined"!=typeof module?module.exports=e():"function"==typeof define&&define.amd?define([],e):("undefined"!=typeof window?win
{"command":"cat > index.html <<'E'\n<!DOCTYPE html><html><head><meta charset=\"utf-8\"><title>L-System Tree</title>\n<style>html,body{margin{"action":"screenshot"}(no output)
Frame 1, +0ms
[Browser image supplied to model]
{"console":["warning: An iframe which has both allow-scripts and allow-same-origin for its sandbox attribute can escape its sandboxing."],"dom":"L-system tree · click to regrow · move mouse to change wind\nRegrow new tree","images":"attached"}
thinking
The tree seems barely grown, so the screenshot was probably taken too early, and growth speed at that rate takes a few seconds to show — let me grab another screenshot after waiting a bit.
{"action":"screenshot"}Frame 1, +0ms
[Browser image supplied to model]
{"console":["warning: An iframe which has both allow-scripts and allow-same-origin for its sandbox attribute can escape its sandboxing."],"dom":"L-system tree · click to regrow · move mouse to change wind\nRegrow new tree","images":"attached"}
I built the tree in `/tmp/job-wYvdZv/index.html`. It uses the local `p5.min.js` and has no console errors. I checked it with two screenshots. The first, taken right after load, showed only a tiny stump. The second showed a full tree with a brown trunk, olive twigs and pink blossoms. I didn't test the wind sway, the mouse wind control or the regrow button. - **Growth:** The tree is generated by an L-system. A random rule picks how each `X` branches, and each `F` doubles in length. It runs 5 rounds, with a random branch angle of 18–28° and some per-branch jitter. It grows in over about three seconds, easing in and out. - **Wind:** The sway is a mix of slow sine waves, and it increases toward the branch tips. Moving the mouse left or right shifts the wind direction. - **Regrow:** Clicking anywhere on the canvas, or pressing the "Regrow new tree" button, generates a new tree. In the screenshot the tree is quite sparse, with a few clusters of branches rather than a dense crown.