L-System Trees
Procedural Graphics Independent Study Completed Under Professor Adam Mally — Spring 2021
WebGL, TypeScript
Overview
In my final semester of senior year, I undertook an Independent Study centered around the topic of procedural graphics. For this course, I completed multiple assignments in WebGL and Typescript, along with creating shaders in ShaderToy.
The goal of this project is to design a set of grammar rules to create plant life, using the L-System technique. The tree will be rasterized by creating VBOs and specifying vertex positions, normals, colors, UVs, and indices.
Process
I created pastel L-System trees for this project. I did so by creating a Turtle class and a set of rules to expand the tree grammar and to draw the actual tree.
There are some parameters you can edit to change the tree shape. They are the following:
-
Iterations: how many iterations should the grammar be parsed for the LSystem to grow
-
Leaf_Density: how many leaves are in the tree
-
Branch_Angle: adjust the angle of the branches
-
Leaves_Color: change the color of the leaves
-
Branch_Color: change the color of the branches
-
Thick branch: use this check box to make the branches thick or not
-
Leaf_Type: this is a drop down menu which lets you choose from three different models to use for the leaves! You can choose from regular leaves, roses, or even stars!
This L-System makes use of techniques such as instanced rendering to draw the branches and leaves, as the code keeps track of transformation matrices which are later applied in the instanced-mat-vert shader. The tree is drawn through using segments made out of a cylinder obj.
Final Results
Here is the link to view the project online: https://saranyacodes.github.io/CIS599_HW04/
Here is a link to the Git repository for the project.

Interactive L-System Tree Builder