AI Fractal Tree - Growing Branches in the Wind

This sketch creates a beautiful animated fractal tree that grows from a single trunk into a full branching structure over 10 seconds. The branches sway gently in the wind using sine wave physics, and green leaves appear at the branch tips once the tree is fully grown. A gradient sky and shadow complete the natural scene.

Open in Editor Remix View in Gallery

🎓 Concepts You'll Learn

RecursionFractalsAnimation with millis()Trigonometry (sine, rotation)Color interpolationTransform stack (push/pop)Conditional growth logicWindow responsiveness

🔄 Code Flow

Code flow showing setup, draw, branch, windowresized

💡 Click on function names in the diagram to jump to their code

graph TD start[Start] --> setup[setup] setup --> draw[draw loop] draw --> gradient-loop[Sky-to-Grass Gradient] draw --> shadow[Shadow Ellipse] draw --> growth-logic[Growth Progress Calculation] draw --> tree-transform[Tree Positioning] draw --> thickness-calc[Dynamic Stroke Weight] draw --> branch-line[Draw Branch Segment] draw --> leaf-condition[Leaf Drawing] draw --> recursion-stop[Recursion Termination] draw --> wind-physics[Wind Sway Calculation] draw --> left-branch[Left Branch Recursion] draw --> right-branch[Right Branch Recursion] click setup href "#fn-setup" click draw href "#fn-draw" click gradient-loop href "#sub-gradient-loop" click shadow href "#sub-shadow" click growth-logic href "#sub-growth-logic" click tree-transform href "#sub-tree-transform" click thickness-calc href "#sub-thickness-calc" click branch-line href "#sub-branch-line" click leaf-condition href "#sub-leaf-condition" click recursion-stop href "#sub-recursion-stop" click wind-physics href "#sub-wind-physics" click left-branch href "#sub-left-branch" click right-branch href "#sub-right-branch"

📝 Code Breakdown

`setup()`

setup() runs once when the sketch starts. Here we initialize the canvas size and pre-define colors so we don't recreate them every frame, which is more efficient.

function setup(){
  createCanvas(windowWidth,windowHeight);
  sky=color(180,220,255);grass=color(90,180,90);
}

Line by Line:

createCanvas(windowWidth,windowHeight): Creates a canvas that fills the entire browser window, making the sketch responsive to window size
sky=color(180,220,255): Creates a light blue color and stores it in the sky variable for the gradient background
grass=color(90,180,90): Creates a green color and stores it in the grass variable for the lower part of the gradient

`draw()`

draw() runs 60 times per second. It redraws the entire scene each frame: gradient background, shadow, and the tree at its current growth stage. The key insight is using millis() to animate the growth smoothly over 10 seconds.

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();
}

🔧 Subcomponents:

for-loop Sky-to-Grass Gradient for(let y=0;y<height;y++){stroke(lerpColor(sky,grass,y/height));line(0,y,width,y);}

Draws horizontal lines from top to bottom, interpolating color from sky blue to grass green to create a smooth gradient background

calculation Shadow Ellipse noStroke();fill(0,0,0,40);ellipse(width/2+60,height-25,140,35);

Draws a semi-transparent black ellipse under the tree to create a shadow effect

calculation Growth Progress Calculation let t=min(millis()/growT,1),d=1+floor(t*(maxD-1));full=t>=1;

Calculates how far along the growth animation is (0 to 1), determines current branch depth, and checks if tree is fully grown

calculation Tree Positioning push();translate(width/2,height);

Saves the current transformation state and moves the origin to the bottom-center of the canvas where the tree trunk starts

Line by Line:

for(let y=0;y<height;y++){stroke(lerpColor(sky,grass,y/height));line(0,y,width,y);}: Loops through every pixel row from top to bottom. For each row, it interpolates a color between sky blue and grass green based on position (y/height), then draws a horizontal line with that color. This creates a smooth gradient.
noStroke();fill(0,0,0,40);ellipse(width/2+60,height-25,140,35);: Draws a semi-transparent shadow (black with 40 alpha) as an ellipse near the base of the tree to ground it visually
let t=min(millis()/growT,1): Calculates growth progress: millis() returns milliseconds since sketch started, divided by growT (10000ms) gives a value 0-1, min() caps it at 1 so it doesn't go over
d=1+floor(t*(maxD-1)): Converts growth progress into current branch depth: starts at 1, gradually increases to maxD (8) as the tree grows
full=t>=1: Sets the full variable to true when growth is complete (t reaches 1), which triggers leaf drawing in the branch function
push();translate(width/2,height);: Saves the current transformation state with push(), then moves the drawing origin to the bottom-center of the canvas (where tree starts)
stroke(120,70,20);branch(height*0.25,1,d);: Sets stroke color to brown, then calls the recursive branch function with initial length of 25% of canvas height, starting depth of 1, and current max depth d
pop();: Restores the previous transformation state, undoing the translate so other drawings aren't affected

`branch(len, depth, maxDepth)`

This is the heart of the sketch - a recursive function that calls itself to create fractal branching. Each call draws one branch segment, then creates two child branches at an angle. The recursion stops when depth reaches maxDepth. The wind effect uses a sine wave that changes over time (frameCount) and varies by depth, creating natural-looking sway.

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();
}

🔧 Subcomponents:

calculation Dynamic Stroke Weight strokeWeight(maxDepth-depth+2)

Makes branches thicker at the base (lower depth) and thinner at the tips (higher depth) for a natural look

calculation Draw Branch Segment line(0,0,0,-len)

conditional Leaf Drawing if(depth==maxDepth&&full){fill(40,180,60);noStroke();ellipse(0,-len,10,10);stroke(120,70,20);}

When tree is fully grown and we reach the maximum depth, draws a green leaf circle at the branch tip

conditional Recursion Termination if(depth>=maxDepth)return

Stops the recursion when we've reached the desired branch depth, preventing infinite loops

calculation Wind Sway Calculation let a=PI/5,w=sin(frameCount*0.02+depth*0.1)*0.3

Creates wind effect: a is base angle (36 degrees), w is wind sway that oscillates using sine wave, varying by depth for natural movement

calculation Left Branch Recursion push();translate(0,-len);rotate(a+w);branch(len*0.7,depth+1,maxDepth);

Saves state, moves to branch tip, rotates left by base angle plus wind, then recursively draws a shorter branch

calculation Right Branch Recursion rotate(-2*a);branch(len*0.7,depth+1,maxDepth);

Rotates right by double the base angle (to get the opposite side), then recursively draws the right branch

Line by Line:

strokeWeight(maxDepth-depth+2): Sets line thickness based on depth: deeper branches (higher depth numbers) are thinner, creating a natural taper from trunk to twigs
line(0,0,0,-len): Draws a line from the current position straight up (negative y direction) with length len. This is one branch segment.
if(depth==maxDepth&&full): Checks if we're at maximum depth AND the tree is fully grown. Only then do we draw leaves.
fill(40,180,60);noStroke();ellipse(0,-len,10,10);stroke(120,70,20): Draws a green circle (leaf) at the branch tip. Temporarily removes stroke, draws the circle, then restores the brown stroke for next branches.
if(depth>=maxDepth)return: If we've reached or exceeded maximum depth, exit the function immediately. This stops the recursion.
let a=PI/5,w=sin(frameCount*0.02+depth*0.1)*0.3: a is 36 degrees (PI/5 radians). w is the wind effect: sine wave oscillates between -0.3 and +0.3, using frameCount for animation and depth for variation.
push();translate(0,-len);rotate(a+w);branch(len*0.7,depth+1,maxDepth): Saves transformation state, moves to the branch tip, rotates by base angle plus wind sway, then recursively calls branch with 70% length and increased depth.
rotate(-2*a);branch(len*0.7,depth+1,maxDepth): Rotates by negative double the base angle (moving to the opposite side), then recursively calls branch for the right side.
pop(): Restores the previous transformation state, undoing all the translates and rotates so we're back at the parent branch position.

`windowResized()`

This is a special p5.js function that automatically gets called whenever the window is resized. By calling resizeCanvas(), we ensure the tree always fills the entire window, no matter how the user resizes their browser.

function windowResized(){resizeCanvas(windowWidth,windowHeight);}

Line by Line:

resizeCanvas(windowWidth,windowHeight): Automatically resizes the canvas when the browser window is resized, keeping the sketch responsive to window size changes

📦 Key Variables

maxD number

Maximum branch depth (8) - controls how many levels of branching the tree will have. Higher values create bushier trees.

let maxD = 8;

growT number

Growth time in milliseconds (10000ms = 10 seconds) - controls how long the tree takes to fully grow from trunk to full fractal structure.

let growT = 10000;

sky color

Stores the light blue color (180,220,255) used for the top of the gradient background.

sky = color(180,220,255);

grass color

Stores the green color (90,180,90) used for the bottom of the gradient background.

grass = color(90,180,90);

full boolean

Tracks whether the tree has finished growing (true when growth is complete). Used to determine when to draw leaves.

full = true;

t number

Growth progress value from 0 to 1, calculated as millis()/growT. Represents how far along the animation is (0 = just started, 1 = fully grown).

let t = min(millis()/growT, 1);

d number

Current maximum branch depth for this frame, calculated from growth progress. Starts at 1 and increases to maxD as the tree grows.

let d = 1 + floor(t * (maxD - 1));

a number

Base branching angle in radians (PI/5 = 36 degrees). Controls the angle at which branches split from their parent.

let a = PI/5;

w number

Wind sway amount, oscillates between -0.3 and +0.3 using a sine wave. Creates the gentle swaying motion of branches.

let w = sin(frameCount * 0.02 + depth * 0.1) * 0.3;

🧪 Try This!

Experiment with the code by making these changes:

Change maxD from 8 to 10 or 12 to create a much bushier tree with more branching levels. Try it in the first line: let maxD=12
Modify growT from 10000 to 3000 to make the tree grow much faster (3 seconds instead of 10). Watch how the animation accelerates.
Change the base branching angle by modifying PI/5 to PI/4 or PI/6 in the branch function. This will make branches spread at different angles.
Adjust the wind strength by changing the 0.3 multiplier in the wind calculation to 0.1 (less sway) or 0.5 (more sway): w=sin(frameCount*0.02+depth*0.1)*0.5
Change the leaf color from fill(40,180,60) to fill(255,100,0) to make orange leaves instead of green.
Modify the branch length reduction from 0.7 to 0.8 to create longer, more spread-out branches: branch(len*0.8,depth+1,maxDepth)
Change the sky color in setup() from color(180,220,255) to color(255,100,100) to create a sunset effect with a red sky.

Open in Editor & Experiment →

🔧 Potential Improvements

Here are some ways this code could be enhanced:

PERFORMANCE draw() gradient loop

The gradient is redrawn every frame by looping through every pixel row (height iterations). For a 1080px tall canvas, that's 1080 lines drawn 60 times per second.

💡 Create the gradient once in setup() using createGraphics() or draw it once to a variable, then display it as a background image instead of redrawing it every frame. This would significantly improve performance.

STYLE Variable declarations

Global variables are declared in a single line with commas (let maxD=8,growT=10000,sky,grass,full=false), making it hard to read and understand what each variable does.

💡 Separate each variable declaration on its own line with a comment explaining its purpose: let maxD = 8; // max branch depth let growT = 10000; // growth time in ms

FEATURE branch() function

All branches have the same angle (PI/5) and the same length reduction (0.7). This creates a very regular, geometric tree that doesn't look as natural.

💡 Add randomness to the branching: use random() to vary the angle slightly and the length reduction per branch. For example: let angleVariation = random(-0.2, 0.2); and len*random(0.6, 0.8)

BUG branch() leaf drawing

Leaves are only drawn when depth==maxDepth AND full is true. If maxDepth changes mid-animation (which it does), leaves might appear at different depths on different frames, causing visual flickering.

💡 Store the final maxDepth value when growth completes, then use that stored value for leaf placement instead of the changing maxDepth variable.

Preview

Code flow diagram showing the structure of AI Fractal Tree - Growing Branches in the Wind - Code flow showing setup, draw, branch, windowresized — Code Flow Diagram

🎓 Concepts You'll Learn

🔄 Code Flow

📝 Code Breakdown

Line by Line:

🔧 Subcomponents:

Line by Line:

🔧 Subcomponents:

Line by Line:

Line by Line:

📦 Key Variables

🧪 Try This!

🔧 Potential Improvements

Explore More

p5js AI Cloud IDE

Gallery

User Guide

Preview