Examples / p5.js Examples / / Bonsai Tree

Bonsai Tree

example p5.js javascript creating-classes genuary

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.

Comments and Questions

Happy Coding is a community of folks just like you learning about coding.
Do you have a comment or question? Post it here!