Agile Coder Logo
Intermediate

Simple Fractal Tree: Branching Forever

Each branch splits into two smaller ones at an angle. Change the angle and the tree transforms from a bare winter silhouette to a lush summer canopy.

Smruti Ranjan
May 20, 2026
3 min read
#fractals#generative-art#tree#recursion#p5js
Simple Fractal Tree: Branching Forever
p5.js sketch
Advertisement

Fractals are geometric shapes with self-similar patterns that appear regardless of the level of magnification. Fractal trees mimic the branching structures of real trees, where each branch serves as a foundation for smaller branches, creating a seemingly infinite level of detail. These self-replicating patterns give rise to mesmerizing and complex shapes that evoke a sense of wonder and aesthetic appeal.

The Basic Steps involved

  • Start with a trunk (main branch) that will act as the base of the fractal tree.
  • Define the angle between branches and the ratio by which each branch's length reduces compared to its parent branch.
  • Draw a straight line segment to represent the trunk of the fractal tree.
  • Create a recursive function that takes the following inputs: starting point (end of the trunk), length of the branch, angle between branches, and the current recursion depth.
  • Base case: If the recursion depth exceeds a predefined limit, return.
  • Calculate the end point of the new branch using the length and angle parameters.
  • Draw the new branch.
  • Recursively call the function with the new end point, a reduced branch length, an adjusted angle, and an incremented recursion depth.

Here is how we can implement the algorithm

js
let angle = 0;
let slider;

function setup() {
  createCanvas(640, 360);
  slider = createSlider(0, TWO_PI, PI / 4, 0.01);
}

function draw() {
  background(0);
  angle = slider.value();
  stroke(255);
  strokeWeight(2);
  translate(width * 0.5, height);
  branch(100);
}

function branch(len) {
  line(0, 0, 0, -len);
  translate(0, -len);
  if (len > 4) {
    push();
    rotate(angle);
    branch(len * 0.67);
    pop();
    push();
    rotate(-angle);
    branch(len * 0.67);
    pop();
  }
}
↕ click to expand

Some facts about fractal tree

  1. Self-Similarity: One of the defining features of fractal trees is their self-similarity. At each level of branching, the structure closely resembles the whole tree, resulting in an iterative pattern that echoes throughout the entire shape.

  2. Infinite Complexity: While we can visually perceive only a few levels of branching, fractal trees possess infinite complexity, making them both intriguing and challenging to model.

  3. Real-world Applications: Fractal trees find practical applications in various fields. From computer graphics and animation to modeling natural phenomena like lightning and blood vessels, fractals help create realistic and visually stunning representations.

Coding a fractal tree is a fascinating journey into the world of self-similarity and infinite complexity. By using recursion and basic geometric principles, we can create visually stunning representations that echo the beauty of nature's branching structures. As we venture further into the realm of fractals, we discover the harmonious interplay between mathematics and art, unlocking new possibilities in computer graphics, modeling, and creative expression.

Advertisement

Behind-the-build, in your inbox.

New tutorials, book updates, and behind-the-scenes notes from the studio. No schedule, no spam.

Comments

Leave a comment

Comments are moderated before appearing.