← Creative
🌳
Fractal Tree Generator
A single recursive function that grows an entire, infinitely-tunable tree from nothing.
🟡 MediumDifficulty
2-3 hoursTime
JavaScript, TypeScriptLanguages
What you're building
A canvas that draws organic, branching trees using nothing but a recursive function calling itself on smaller and smaller branches. Sliders let you tune the branching angle, the number of recursive levels, and the shrink rate live, instantly reshaping the tree from a scraggly bush into a towering oak. It's one of the clearest, most beautiful demonstrations of recursion you'll ever build.
What you'll unlock 🔓
You'll need
- Basic JavaScript
- Understanding of recursion
- Canvas basics
- A code editor
- A browser
🗺️ Build roadmap
01 Draw a single straight branch
→
02 Draw two child branches at an angle from its tip
→
03 Turn it into a recursive function
→
04 Add a depth limit to stop the recursion
→
05 Shrink branch length and width with each level
→
06 Add sliders for angle, depth, and shrink rate
→
07 Add color variation and a randomize button
🔒
Log in to start building
Your first project is free -- create an account to unlock it.
Log in Sign up free