Compare all models on this prompt →
L-system tree · seed-2.0-mini
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.
⛨ sandboxed Open in new tab ↗
transcript · 4 messages
user
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.
assistant
thinking
Got it, let's tackle this. First, the user wants a single index.html file with p5.min.js already present, a procedural L-system tree that sways gently.
First, I need to remember what an L-system for a tree looks like. The axiom is usually something like "F", then rules: F → FF-[-F+F+F]+[+F-F-F] or similar. Then we need to recursively expand the string, then draw it using turtle graphics—like forward moves, save/restore state for branches with [ and ].
Then, swaying in the wind: we need to add a time-based rotation offset to the branches, maybe using sin(frameCount * 0.01) or something to make it gentle. Also, set up p5 in global mode since they mentioned global p5.
Wait, first, the structure of index.html: start with <!DOCTYPE html>, then <html>, <head> with style tag for some basic styling (no scrollbars, maybe center the canvas), then <script src="p5.min.js"></script>, then another script tag with the p5 code.
Wait, but first, let's outline the steps:
1. Create the HTML boilerplate, include p5.min.js as a script.
2. In the p5 setup() function: create a canvas, set the background, initialize the L-system parameters, expand the L-string to a certain depth (like 4 or 5 levels).
3. In draw() function: clear the background each frame, translate to the bottom center of the canvas, then iterate through the L-system string, draw the branches with a slight rotation based on time to make them sway.
4. The turtle logic: track position, angle, push and pop the state when we hit [ or ].
5. Add wind sway: each turn angle gets a small offset based on sin(frameCount * 0.05) or similar, so the branches wiggle gently.
Wait, also, the L-system expansion: let's write a function to expand the axiom according to the rules. Let's say axiom is "X", rules: X → F-[[X]+X]+F[+FX]-X, F → FF. Wait no, maybe a simpler one for a tree: axiom "F", rules: F → F[+F]F[-F]F? No, the classic one is axiom "F", rule F → F+F--F+F? Wait no, let's pick a standard branching L-system that produces a tree. Let's go with depth 4, axiom "F", replacement rule F → FF-[-F+F]+[+F-F], that's a common one.
Wait, also, when drawing, we need to scale the line thickness as we go deeper? Or just keep it consistent, but maybe thinner for smaller branches. Also, the starting angle is -90 degrees (pointing up) since in p5, 0 is right, so PI/2 is up? Wait no, p5's angle mode is radians by default, right. So initial angle is HALF_PI * 3? Wait no, wait: 0 radians is to the right, PI is left, HALF_PI is down, -HALF_PI or (3*HALF_PI) is up. Oh right, so if we start at the bottom middle, translate to (width/2, height), then set the initial angle to -HALF_PI (pointing up).
Then, for each character in the expanded string:
- F: draw a line forward, move the turtle forward
- +: turn left by a certain angle (like 25 degrees, PI/7 radians)
- -: turn right by the same angle
- [: push the current position and angle to a stack
- ]: pop the stack, restore position and angle
Then, to make it sway, we can modify the + and - angles by adding a small amount based on frameCount. Like, instead of fixed angle, angle += 0.05 * sin(frameCount * 0.01 + some offset per branch? Wait no, maybe a global sway that affects all turns, so each turn's delta is baseAngle + 0.05 * sin(frameCount * 0.03). That way the whole tree sways gently.
Wait, let's structure the code:
First, the setup function:
function setup() {
createCanvas(800, 600);
angleMode(RADIANS);
background(255);
// L-system parameters
const axiom = "F";
const rules = {
"F": "FF-[-F+F]+[+F-F]"
};
const depth = 4;
let current = axiom;
for (let i = 0; i < depth; i++) {
let next = "";
for (const c of current) {
next += rules[c] || c;
}
current = next;
}
window.lSystemString = current; // save to global so draw can use it
window.baseAngle = PI / 7; // ~25 degrees
}
Then the draw function:
function draw() {
background(240, 250, 240); // light green background? No, light blue? Wait, sky blue: background(135, 206, 235);
background(135, 206, 235);
translate(width/2, height);
stroke(34, 139, 34); // forest green
strokeWeight(2);
let angle = -HALF_PI; // pointing up
let x = 0, y = 0;
const stack = [];
// sway offset
const sway = 0.05 * sin(frameCount * 0.03);
for (const c of window.lSystemString) {
switch(c) {
case 'F':
line(x, y, x + 5 * cos(angle), y + 5 * sin(angle));
x += 5 * cos(angle);
y += 5 * sin(angle);
break;
case '+':
angle += window.baseAngle + sway;
break;
case '-':
angle -= window.baseAngle + sway;
break;
case '[':
stack.push({x, y, angle});
break;
case ']':
const prev = stack.pop();
x = prev.x;
y = prev.y;
angle = prev.angle;
break;
}
}
}
Wait, but wait, the line length: 5 * cos(angle) — but if we do depth 4, the branches get shorter? Wait no, actually, each F is replaced by two Fs, so the total length increases, but maybe we should scale the step size based on depth? Or wait, no, in the example above, each F draws a line of fixed length, but that would make the higher depth branches same size, which looks weird. Oh right, better to make the step size decrease with each level. Wait, or maybe adjust the step size based on the current recursion depth? Alternatively, when expanding, track the length multiplier. Wait, maybe another approach: instead of fixed 5, use 10 * pow(0.7, depth), but no, per branch. Wait, actually, the standard way is that each recursive call has a smaller length. Oh, but in the string-based L-system, we can't track that directly unless we add parameters to the symbols, but that's more complex. Alternatively, just use a step size that's 10 / (depth + 1), so for depth 4, step is 2, which makes smaller branches at the end. Wait, let's adjust that: in the F case, step = 10 / (depth + 1)? No, wait depth is 4, so 10/5=2, that's okay. Wait, but let's calculate step as 8 * pow(0.6, currentDepth)? No, maybe easier to just use a step that's inversely proportional to the number of Fs, but actually, for simplicity, let's just use step = 3, but wait no, when you have FF, that's two lines each of step 3, so the branch gets longer. Wait, maybe better to use step = 6 / (1 << depth)? No, maybe I'm overcomplicating. Let's just use step = 4, and for each F, draw a line of 4 units, but that will make the big trunk longer than the small branches, which is okay? Wait no, the trunk is the first Fs, so the trunk would be multiple Fs, so longer. Oh right, because the axiom is F, then first expansion is FF, so two Fs, so trunk is two lines of 4 units, so total 8 units, then next expansion is FF-[-F+F]+[+F-F] so each F becomes that, so the branches are shorter? Wait no, no, each F is replaced by the rule, so each F in the string is a segment. So the first depth 0: "F" → one segment, length 4. Depth 1: "FF" → two segments, total length 8. Depth 2: "FF-[-F+F]+[+F-F]" → let's see, F becomes FF-[-F+F]+[+F-F], so two Fs become each that, so total segments way more, but each is 4 units, so the tree gets bigger each depth. So for depth 4, it's a nice size for 800x600 canvas.
Wait also, the stroke weight: should decrease as we go deeper into the branches. Oh right! Because the smaller branches should be thinner. So how to track that? Because the stack approach we have now doesn't track the current stroke weight. Oh, right, so we need to push the stroke weight to the stack as well. So when we hit '[', we push {x, y, angle, strokeWeight} to the stack, then when we hit ']', we pop and set strokeWeight to the saved value. And for each F, we decrease the stroke weight a little? Wait, no, each time we go down a branch, the stroke weight is smaller. So initial stroke weight is 4, then each time we have a branch (wait no, every time we do a [, that's a new branch, so the stroke weight should be multiplied by 0.7 each time we go into a branch? Or wait, when we draw an F, if we are at a certain level, but since the string doesn't track level, maybe better to track the current stroke weight in a variable, and push it to the stack when we do [, then pop it when we do ]. Oh right! That's easy. Let's adjust:
In draw():
let currentStrokeWeight = 4;
then, for the [ case: stack.push({x, y, angle, sw: currentStrokeWeight}); then when we do ], pop and set currentStrokeWeight = prev.sw. Then, for each F, we can keep currentStrokeWeight as is, but wait no, each branch is a smaller thickness. Wait, actually, when you start a new branch (after [), the stroke weight should be a bit thinner than the parent. So when you push to the stack, you save the current stroke weight, then multiply currentStrokeWeight by 0.7 for the new branch. Wait, let's see:
Wait initial currentStrokeWeight = 4.
When we hit '[':
- push {x, y, angle, sw: currentStrokeWeight} to stack
- currentStrokeWeight *= 0.7; // make the new branch thinner
When we hit ']':
- pop the prev state, set x=prev.x, y=prev.y, angle=prev.angle, currentStrokeWeight=prev.sw;
That way, each deeper branch is thinner, which looks more realistic.
Oh right, that's a good addition. Let's update that.
Also, the background: sky blue, 135, 206, 235, that's nice. The trunk and branches are dark green, maybe 34, 139, 34 (forest green).
Wait also, the sway: let's make the sway a bit more natural. Instead of adding sway to the angle each time, maybe have a global wind factor that modulates the base angle. Like, baseAngle is PI/7, then each turn is modified by wind = 0.1 * sin(frameCount * 0.02), so angle += baseAngle + wind for '+', angle -= baseAngle + wind for '-'. Wait, but that would make all turns sway the same way, which makes the whole tree sway, which is what we want. That's gentle swaying.
Wait let's test that: frameCount * 0.02, so the period is about (2*PI)/0.02 ≈ 314 frames, which is about 5 seconds at 60fps, that's a nice slow sway.
Also, let's adjust the canvas size to maybe 900x700, but 800x600 is fine.
Wait also, in p5, when you use translate, it's cumulative, so we do translate(width/2, height) once at the start of draw(), which puts the origin at the bottom middle of the canvas, perfect for the tree root.
Another thing: the initial angle is -HALF_PI, which is pointing straight up, correct.
Wait let's put all this together. Also, need to make sure that the p5 instance is in global mode, which it is by default if we don't use a instance wrapper.
Also, the user said that p5.min.js is already present in the current directory, so we just need to include <script src="p5.min.js"></script> in the html.
Now, let's write the full index.html file:
First, the doctype, html, head with style tag to remove body margins, so the canvas is full width/height or centered. Wait, style: body { margin: 0; display: flex; justify-content: center; align-items: center; min-height: 100vh; background: #131313; } but wait, the draw function already sets the background, so maybe body { margin: 0; } so the canvas is at the top left, but centered better. Wait, let's add:
<style>
body {
margin: 0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #1a1a1a;
}
canvas {
box-shadow: 0 0 10px rgba(0,0,0,0.2);
}
</style>
That way the canvas is centered on the page, with a slight shadow, and the body background is dark, which makes the sky blue background of the canvas pop.
Then the script tags: first p5.min.js, then the p5 code.
Wait also, let's make sure that the L-system depth is 4, which gives a nice full tree. Let's check: depth 0: F, depth 1: FF, depth 2: FFFF-[-FF+FF]+[+FF-FF], depth 3: expands each F again, depth4: even more branches. That's good.
Wait another thing: the step size. Let's use 3 instead of 4, so the tree isn't too big. Let's adjust line(x, y, x + step * cos(angle), y + step * sin(angle)); where step is 3.
Wait let's put all the code together:
Wait here's the full index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Procedural L-System Tree</title>
<style>
body {
margin: 0;
display: flex;
justify-content: center;
align-items: center;
min-height: 100vh;
background: #1a1a1a;
}
canvas {
box-shadow: 0 0 15px rgba(0, 0, 0, 0.3);
}
</style>
</head>
<body>
<script src="p5.min.js"></script>
<script>
// L-system configuration
const L_SYSTEM = {
axiom: "F",
rules: {
"F": "FF-[-F+F]+[+F-F]"
},
depth: 4,
baseAngle: Math.PI / 7 // ~25.7 degrees
};
let lSystemString;
let windStrength = 0.1;
function setup() {
createCanvas(900, 700);
angleMode(RADIANS);
frameRate(60);
// Expand the L-system string
let current = L_SYSTEM.axiom;
for (let i = 0; i < L_SYSTEM.depth; i++) {
let next = "";
for (const char of current) {
next += L_SYSTEM.rules[char] || char;
}
current = next;
}
lSystemString = current;
}
function draw() {
// Clear background with sky blue
background(135, 206, 235);
// Translate to bottom center of canvas
translate(width / 2, height);
// Turtle state variables
let x = 0, y = 0;
let angle = -Math.PI / 2; // Point straight up
let currentStrokeWeight = 4;
const stack = [];
// Calculate gentle wind sway
const wind = windStrength * Math.sin(frameCount * 0.02);
// Draw each character in the L-system string
for (const char of lSystemString) {
switch (char) {
case 'F':
// Draw forward line segment
const step = 3;
const endX = x + step * Math.cos(angle);
const endY = y + step * Math.sin(angle);
stroke(34, 139, 34); // Forest green
strokeWeight(currentStrokeWeight);
line(x, y, endX, endY);
// Update turtle position
x = endX;
y = endY;
break;
case '+':
// Turn left with wind sway
angle += L_SYSTEM.baseAngle + wind;
break;
case '-':
// Turn right with wind sway
angle -= L_SYSTEM.baseAngle + wind;
break;
case '[':
// Save current turtle state and reduce stroke weight for branches
stack.push({ x, y, angle, sw: currentStrokeWeight });
currentStrokeWeight *= 0.7;
break;
case ']':
// Restore previous turtle state
const prev = stack.pop();
x = prev.x;
y = prev.y;
angle = prev.angle;
currentStrokeWeight = prev.sw;
break;
}
}
}
</script>
</body>
</html>
Wait that's perfect. Let's check:
- All CSS is in the style tag, JS in script tag, single file.
- Uses p5.min.js as requested, no external resources.
- Procedural L-system tree with recursive branching.
- Sways gently using sin(frameCount * 0.02) to modulate the turn angles, creating a slow wind effect.
- Thinner branches for deeper levels (using the stack to track stroke weight, multiplying by 0.7 each time a new branch is started with [).
- Centered canvas on the page, with a dark background and shadow.
- Sky blue background for the sky, forest green for the branches.
- Frame rate set to 60 for smooth animation.
Wait also, let's test if the L-system expansion is correct. Let's see: axiom is F, depth 4: yes, that will generate a full tree. The rules replace F with FF-[-F+F]+[+F-F], which creates a branching structure where each branch splits into two more branches, with left and right turns. That's a classic fractal tree.
Another thing: the step size is 3, which is small enough that the tree fits in the 900x700 canvas. The translate puts the root at the bottom middle, so the tree grows upwards, which is natural.
Wait also, the stroke weight starts at 4, which is good for the trunk, then each branch is 4*0.7≈2.8, then next level ~2, then ~1.4, then ~1, which is perfect for the small twigs at the end.
Yes, this should work. Now, I need to write this file to /tmp/ws/index.html. So use the write function with path "index.html" and the content as the above code.→ write
index.html (3767 bytes)toolResult
Successfully wrote 3767 bytes to index.html
assistant
thinking
Great, the file was written successfully. Now I should confirm that the artifact is ready: the index.html file is a single self-contained web app that uses the local p5.min.js, has a procedural L-system fractal tree that sways gently in the wind. Let me just check if there's anything else, but no, the user asked for exactly that: single-page, all in index.html, no external resources, uses the provided p5.min.js, procedural L-system tree with recursive branching and gentle sway. The code does all that: expands the L-system string, uses turtle graphics, adds wind sway via sin(frameCount), thinner branches for smaller twigs, centered canvas, nice styling. Perfect.
The procedural L-system fractal tree has been successfully created! The single self-contained `index.html` file is now in your working directory: ### Key features: 1. **Self-contained**: All CSS and JS are inline, uses the local `p5.min.js` provided with no external network requests 2. **Recursive branching**: Uses a standard tree L-system with 4 levels of recursion 3. **Gentle sway**: Animated wind effect using `sin(frameCount * 0.02)` to create natural slow movement 4. **Realistic branch thickness**: Smaller twigs have thinner stroke weights than the main trunk 5. **Polished layout**: Centered canvas with subtle shadow, sky-blue background, and forest-green branches You can open `index.html` directly in any modern web browser to see the swaying fractal tree.
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
modelseed-2.0-mini
vendorByteDance · Seed
harnesspi-agent
generated2026-08-01
EVALUATION
★★★★★ 3/5 working
A small procedural branching tree renders on sky-blue background but shows no visible growth or wind sway across frames.
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.
idle motion0.0%
on click0.6%
on drag0.5%
on wheel0.5%
on enter + space0.7%
on arrow keys0.6%
on w/a/s/d0.5%
frame spread76.5 / 255
console errors0
js errors none
METRICS
runtime44.5s
tokens in9.4k
tokens out6.1k
cached1.6k
cost / run$0.0032