Chapter 02

Recursion and Fractal Trees

Build a fractal tree from one line segment to a living animated scene.

What you will study

The tree chapter is the deepest interactive sequence. It starts with recursion as a repeated rule, then builds branch drawing, recursive branching, controls, color, composition, and wind.

Learning goals

Read a recursive drawing function
Identify the base case
Use controls to connect parameters to visible structure

Study setup

Prerequisites

Basic JavaScript
Functions
Coordinate systems

Original sources

tree.js

Lesson path

Follow the cards in order, or jump directly from the sidebar. Each lesson keeps the interactive canvas inside the page flow.

Lesson 01

Recursion as a Repeating Rule

Use nested boxes and a call stack to feel what a recursive call does before drawing anything.

Open lesson Open full demo

Lesson 02

Drawing One Branch

Treat one line segment as the smallest unit of the whole tree.

Open lesson Open full demo

Lesson 03

Recursive Branching

Build from one branch to two branches, then to a full recursive structure.

Open lesson Open full demo

Lesson 04

Rotation and Scaling

Use angle and shrink ratio to control the tree silhouette.

Open lesson Open full demo

Lesson 05

Sliders and DOM Controls

Connect drawing variables to live controls.

Open lesson Open full demo

Lesson 06

Color, Depth, and Style

Map recursion depth to color, thickness, and leaves.

Open lesson Open full demo

Lesson 07

Sun, Clouds, and Scene Composition

Compose the tree with sky, sun, clouds, ground, and grass.

Open lesson Open full demo

Lesson 08

Wind and Animation

Use time-based sway to make the tree feel alive.

Open lesson Open full demo

Suggested study path

Read the concept, change one visualizer control, inspect the code fragment, then continue to the next lesson without leaving the notebook page.