Posted on: July 25th, 2016 by Peter Balazs No Comments

Let’s talk about trees! …and plants. More precisely: mathematically generated trees! …and plants. Why? This is something a computer would be good at.
We’re going to create things with recursive definition. Now recursive definition of course means something that is defined in terms of itself. In our case it’ll work like this:
We’ll define a branch that has two other branches attached. Since those two attached branches are also defined as branches they also have two branches attached. The two new branches are defined as branches so they also have… You get the idea.

Now in this case this is going to produce an infinite loop, so we’ll need to establish some rules. Namely if a branch reaches a certain number of pixels in length, we’ll stop the loop. Also the branches will get shorter and thinner each iteration.

How are we going to do this? We’re not going to use jQuery for this project. We’ll use P5.js, simply because it works really well with drawing and animation.

Here’s our beautiful tree (by the way, you’ll get a different one every time you refresh the page):

The branches have a random angle between 44.5 – 45.5 degrees, so it looks a little less like a fractal tree. I also added some color and buds for some more treeness 🙂
Why those angles? I tested it with a few variations, these two numbers produced the effect I was looking for.

Hope you liked this little experiment, next time we’ll look at the L-System, and how it can help to grow some digital plants.

Leave a Reply