Philip Jama

Master
Ratio A
Ratio B
Angle A
Angle B

Interactive Branching Fractals

Recursive Tree Generation with Real-Time Control

Project Overview

This interactive fractal generator creates complex branching tree structures using recursive algorithms and configurable parameters. Unlike traditional static fractals, this implementation provides real-time control over the fractal's growth pattern through five interactive sliders.

Technical Approach:
The algorithm uses recursive depth-first rendering where each branch splits into two child branches with configurable length ratios and angular deviations. The recursion continues until either the minimum branch length is reached or maximum depth is exceeded, creating naturally terminating tree-like structures.

Interactive Parameters:

  • Master - Global scaling factor that influences overall size and branch parameter sensitivity
  • Ratio A/B - Controls the relative length of the two branches at each split point (0.4-0.8 range)
  • Angle A/B - Determines the angular deviation of each branch from its parent (in radians)

Visual Features:
The renderer uses dual-layer visualization - drawing the complete fractal structure in black while overlaying the first few levels in blue to highlight the base branching pattern. This approach helps visualize how simple recursive rules create complex emergent structures.

This project serves as an excellent demonstration of recursive programming concepts, showing how simple mathematical rules can generate intricate natural-looking patterns. The real-time parameter adjustment allows users to explore the relationship between mathematical parameters and visual complexity.

Project Details

Date:

February 2015

Algorithm:

Recursive Depth-First Branching

Parameters:

5 Interactive Controls (Master, Ratios, Angles)

Rendering:

Dual-layer Canvas Visualization

Role:

Designer, Developer

Tags:

JavaScript, Recursion, Interactive, Canvas

Repo:

github.com/pjama/fractals-js