Stochastic L-Systems

Alles Rund um Computergrafik, OpenGL, prozeduraler Content Generierung, etc :)

Stochastic L-Systems

A new and improved L-System generator is now finished and I want to introduce it here 🙂 yay.

Let’s just jump in a see it in action below. I added four examples/presets, that you can view and change by clicking on one of the four buttons at the top.

The Rule editing panel was moved to the left side of the application and now allows to define more than one Rule per symbol.

I changed the previous application in a way it will be easier to extend in the future. I separated almost the complete logic of the L-System and other parts from the HTML.

There are now three Javascript files that contain some classes, that are used to work together.


The file extensions.js contains some extension functions to the existing classes Number and String. At the moment, one extension function toRadians for Number objects allow the conversion from angles that are defined in degrees to radians, because the Math functions only work with radians.

The function replaceAll replaces all occurences of some text inside a String object with another text.

The function contains checks if a text is contained in a String object or not.


This file contains some simple classes that define the behavior of the L-System.

The State class represents the turtle that is used to draw the lines to the canvas. It contains the turtle’s x- and y- position as well as it’s heading.

The Stack class is kind of a wrapper for standard array operations in Javascript (Push/Pop/Peek).

The Rule class has some properties that define a replacement rule of the L-System. It’s properties are the Predecessor, the Successor and the Probability of the Rule. It contains a static function that generates a new Rule object from a String.

The class LSystem contains all information needed to define a L-System. There is the Axiom (theL-System’s start State), all the Rules, the number of Iterations and the Angle that is used to change the turtle’s state.

The class also inludes some functions, e.g. to create an Iteration for the L-System and to use that State to generate the Positions that represent the output.

How does it work

By defining more rules for one symbol (i.e. one Predecessor), the L-System becomes a stochastic L-System. That means that for every replacement it is first determined which of the fitting rules should be applied in the replacement process. This descision is based on a random number and can be influenced by assigning a Probability to the replacement rule.

The definition of the Probability is optional and follows the definition of the rule’s Predecessor. It is enclosed in brackets. To keep it simple I usually use probabilities that sum up to exactly 1.0 for each predecessor but this is not neccessary at all, because the rule’s probabilities are normalized (i.e. the sum is braucht to 1.0) before the generation starts.

If no Probability is set for a rule, the default value of 1.0 is chosen.