Bonsai Tree

p5.js Tutorials
Tutorials
/
p5.js Tutorials
/
Creating Classes
/
Bonsai Tree
Previous:
Creating Classes

Bonsai Tree

Click here to view this code in the p5 editor, and click here to view the result by itself.

This sketch uses recursion to create a digital bonsai tree. Click a circle to prune it!

I created this for the 18th day of Genuary which had a prompt of “One process grows, another process prunes.” I started by drawing some ideas and then prototyping. I almost gave up, but I eventually landed on an approach that generated new positions randomly, and threw them out if they intersected an existing circle. That’s much more manageable than the complicated trigonometry I originally tried to use!

bonsai tree bonsai tree bonsai tree bonsai tree

Remix Ideas

  • Play with the variables at the top of the sketch to create different designs.
  • Add flowers to your bonsai tree.
  • Add other colors. Maybe try random colors, or autumn colors.
Previous:
Creating Classes

Creating Classes Examples

Fireworks Fireworks

Ooh! Aah!

Bonsai Tree Bonsai Tree

Use recursion to create a digital bonsai tree.

Loopers Loopers

Draw lines that loop around the screen.

Recursive Lines Recursive Lines

Draw lines that draw other lines.

Isometric Cubes Isometric Cubes

Create an isometric grid of cubes.

Ant Colony Ant Colony

Create an ant colony simulation.

Popping Circles Popping Circles

Fill circles with your mouse that pop if they touch.

Campfire Campfire

Remember those quiet evenings.

Parallax Dots Parallax Dots

Show three layers of dots.

Ghosts 👻👻👻 Ghosts 👻👻👻

Boo!

Planets Planets

Show planets orbiting a sun

Circle Packing Circle Packing

Fill the screen with circles without overlapping.

Add Your Own Example Add Your Own Example

Add your own example to Happy Coding.