top of page
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

©2022 by saranya.

bottom of page