Realistic Tree Generation with the Lindenmayer System

Inspiration

I have a fascination for algorithms and I wanted to challenge myself and code the Lindenmayer System with P5.js, a JavaScript client-side library. What fascinated me most about this project was the combination of botany (although this algorithm is useful in many fields ranging from mathematics to linguistics) and computer science.

What it does

This project recreates the Lindenmayer System, also known as the L-System. The L-System, developed by biologist Aristid Lindenmayer in 1968, was a grammar-based system for modelling the patterns of growth in plants. This theory is founded on recursion, which occurs when a thing is defined in terms of itself or of its type. In coding, a function is being defined and applied within its own definition. This is what creates the symmetrical branch patterns on the trees shown in this project.

How I built it

Using P5.js, I began by writing out the rules for the directions of each tree branch for each generation. These came in the form of a string. The ordering of each character within the string determines the direction of each tree branch, while the length (amount of characters in the string) determines amount of tree branches for each generation. The characters and their meanings go as followed:

'F': Move forward '+': Move right '-': Move left '[': Save current location ']': Restore previous location

The ordering of these characters is random, and is different each time the code is run. Finally, I used a pseudo-turtle graphics system to draw the branches.

Challenges I ran into

One significant challenge I ran into was randomly sorting the strings so that each tree would have a different rule for branch formation each time.

Accomplishments that I'm proud of

One accomplishment that I'm proud of, albeit simple, was that I was able to use a string-based algorithm in drawing trees.

What I learned

I became more well-versed on the concept of recursion, as well as sorting strings with JS.

What's next for Realistic Tree Generation with the Lindenmayer System

For future additions to this project, I plan on having the screen display the rules used for the tree branch transformations so users could get a better understanding of L-Systems. Also, I eventually plan to allow users to input their own rules while given the characters and generate their own trees. Finally, I want to come up with a better, integrated way to reset the tree for a new generation that doesn't just entail refreshing the page.

Built With

• javascript
• p5.js