Create

AI Fractal Tree - Growing Branches in the Wind

52 views ยท Dec 15, 2025

Watch a tree grow from a single trunk into a full fractal structure! Recursive branching creates natural-looking patterns while wind physics make the branches sway gently. Green leaves appear at the tips when fully grown. A beautiful blend of mathematics and nature. Created with xelsed-alpha6-flash.

#xelsedia#xelsedai#generativeart#p5js#creativecoding#fractal#tree#recursion#nature#mathemat
๐Ÿ”€ Remix This ๐Ÿ“– View Docs โ›ถ Full Screen โ† Back to Gallery
๐Ÿ“‹ Embed Code

Copy this code to embed this sketch on your website:

<iframe src="https://p5js.ai/embed/01f7b284-2a45-4222-b20e-bd2fb6405bb1" width="400" height="400" frameborder="0" allow="autoplay" title="AI Fractal Tree - Growing Branches in the Wind"></iframe>

Adjust width and height as needed. Preview embed โ†’

โ“ About This Sketch 3 questions

What visual experience does the AI Fractal Tree sketch provide?

The sketch visually simulates a tree growing from a trunk into a detailed fractal structure, with branches swaying gently in the wind and green leaves appearing at the tips when fully grown.

Is there any interaction available in the AI Fractal Tree sketch?

The sketch is primarily a visual experience with no direct user interaction; however, it dynamically responds to window resizing.

What creative coding concepts are showcased in the AI Fractal Tree sketch?

This sketch demonstrates recursive branching techniques and the application of wind physics to create a naturalistic animation of a growing tree.

๐Ÿ’ฌ AI Chat History 2 messages
๐Ÿ‘ค You
Create a recursive fractal tree that grows over time. Start with a trunk at bottom center. Each branch splits into 2 smaller branches at an angle. Use recursion with depth limit of 8. Tree grows from depth 1 to 8 over 10 seconds using millis(). Add wind effect: branches sway using sin(frameCount * 0.02 + depth * 0.1). Branches are brown (stroke), leaves appear at the tips (small green ellipses) when fully grown. Background is a gradient from light blue (sky) to green (grass). Tree casts a simple shadow. Keep code under 50 lines.
๐Ÿค– AI
```js
// sketch.js
let maxD=8,growT=10000,sky,grass,full=false;
function setup(){
createCanvas(windowWidth,windowHeight);
sky=color(180,220,255);grass=color(90,180,90);
}
function draw(){
for(let y=0;y<height;y++){stroke(lerpColor(sky,grass,y/height));line(0,y,width,y);}
noStroke();fill(0,0,0,40);ellipse(width/2+60,height-25,140,35);
let t=min(millis()/growT,1),d=1+floor(t*(maxD-1));full=t>=1;
push();translate(width/2,height);
stroke(120,70,20);branch(height*0.25,1,d);
pop();
}
function branch(len,depth,maxDepth){
strokeWeight(maxDepth-depth+2);
line(0,0,0,-len);
if(depth==maxDepth&&full){
fill(40,180,60);noStroke();ellipse(0,-len,10,10);stroke(120,70,20);
}
if(depth>=maxDepth)return;
let a=PI/5,w=sin(frameCount*0.02+depth*0.1)*0.3;
push();translate(0,-len);
rotate(a+w);branch(len*0.7,depth+1,maxDepth);
rotate(-2*a);branch(len*0.7,depth+1,maxDepth);
pop();
}
function windowResized(){resizeCanvas(windowWidth,windowHeight);}
```

```html
<!-- index.html -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>p5.js Fractal Tree</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/p5@1.11.3/lib/p5.min.js"></script>
<script src="sketch.js"></script>
</body>
</html>
```

```css
/* style.css */
body {
margin: 0;
padding: 0;
overflow: hidden;
}
canvas {
display: block;
}
```

Notes (brief):
- Background gradient uses `lerpColor` and horizontal `line()` calls.
- Tree growth: depth goes from 1โ†’8 over 10s via `millis()`; leaves only appear when `t >= 1`.
- Wind: each recursion depth sways with `sin(frameCount*0.02 + depth*0.1)` added to the split angle.
- Recursive branching uses `push()/pop()`, `translate()`, and `rotate()` as in the p5 references for [line](https://p5js.org/reference/#/p5/line), [rotate](https://p5js.org/reference/#/p5/rotate), and [sin](https://p5js.org/reference/#/p5/sin).
๐ŸŽฌ Video Preview