The first L-System Generator

The first L-System Generator

Hi there,
I have been working on the first part of the mentioned apps I want to develop (see this post for more Information). 

A small set of examples with the simple application follow. I tried to create a visually nice UI with material design light (first timer for me, yay 🙂 ) to show you what is possible with a simple tool.

The Implementation uses the MDL (material design light) framework for the UI and three.js for the graphics part.

The L-Systems that can be created with the app are pretty limited right now. It is for example only possible to define one substitution rule for the L-System. There are no parameters, no randomization and there is no parametrization at all – just the basics for now.

There are quite a few assumptions made here though. For example only if you use the character ‚F‘ (upper case) you will see a line being drawn. The app is also not really interactive (you cannot navigate the graphics) but it is intelligent enough to ‚zoom out‘ to fit the resulting graphics.

What is it?

Let’s just explain what’s going on here…
Well, the L-System is a so called ‚parallel rewriting system‘ that makes it easy to create objects that look like plants for example.

The L-System works by starting from a defined starting point, the so-called axoim. This axiom is part of the definition of the L-System and can be modified in all the apps below. By using produciton rules and finally interpreting the result graphically it is possible to generate very complex objects very easily. The system replaces all occurences of characters with a new set of characters iteratively, so it is possible (and necessary) to define how many times this iteration needs to be performed.

The graphic interpretation is done by using a so-called ‚turtle-graphics‘ approach. This turtle ‚walks‘ along a defined path (the result of the L-System) and draws a line or turns around, depending on the characters of the result. The turtle only needs to know, where it is (Position X and Y) and where it is headed (direction or angle). A short description of the interpreted characters follows:

‚F‘ draw a line from the current Position. Move the turtle 10 units towards the direction it is headed.

‚+‘ turn the turtle left with the defined angle (e.g. 30°), don’t draw a line

‚-‚ turn the turtle right with the defined angle (e.g. 30°). Don’t draw a line (the characters +- or -+ will result in exactly no change in the state of the turtle)

‚[‚ save the current state of the turtle (i.e. the x- Position, y- Position and angle) on a Stack (this means this state can be restored later). Don’t change the current state of the turtle.

‚]‘ load the last saved state from the stack and set is as the current state for the turtle

Both, ‚[‚ and ‚]‘ characters enable us to create more complex objects because we can ‚go back‘ to another position/angle and continue to generate lines from there, e.g. branches of a tree or plant.

To generate complex objects all you need to do, is to replace the defined axiom with a more complex list of characters. Such a replacement is defined by a so called ‚production rule‘. The rule consists of several parts. The first part ist the ‚left-hand-side‘ or ‚predecessor‘ and defines which character of the axiom needs to be replaced. The second part is the successor, which defines what the replaced character from the previous step will look like after the replacement.

To ensure the termination of the probably infinite count of replacements when you use L-Systems, it is common to also define a fixed number of iteration steps like 6 iteration steps but otherapproaches also exist.

Simple System

In this Post I will show you just a very simple version of L-Systems. The description of the system and it’s capabilities can be found above :).

Examples

The following examples all use the same small JS application. You can define an axiom, you can define one production rule, the amount of iterations, you want the L-System to generate and you can also define the angle for the ‚turtle‘ to turn.

If you change one of the values or drag sliders left or right the graphical result should be generated immediately (except you chose too many iterations 😉 ). The app does not output the intermediate or final generated L-System string, because they are not really readable and rather long. An example is included at the end of the post, if you would like to see it :).

The first example is very simple and generates a kind of a Sierpinski Triangle (not the original one). Use the Iteration Slider to get a more detailed result and play with the angle parameter – funny how the whole thing looks completetly different sometimes.

Just click the ‚generate‘ button to see the result.

The second example is slightly more complex and displays a plant-like structure.

The third example is again a famouse structure. It displays the Koch-Curve, which has some interesting properties if you continue the iteration process forever. In that case the perimeter would be infinitely long, but the area would still be limited :).

The next example is another nice looking fractal that displays the self-similarity property of fractals very well.

The last and most complex example shows five plants that are ‚growing‘ out of a central point.

I hope you like the examples! If you do, leave a comment, if you don’t, also leave a comment 🙂

Bye, Franz

P.S.:

edit: Upsie
I forgot to mention, that I will provide a walk-through for the imlementation in the next post. So if you don’t want to do the hard work of understanding the app yourself, I’ve got you covered :).

And here is the mentioned production process for the first example on this page. The axiom is just ‚-F‘ and the only production rule is ‚F -> F+F-F-F+F‘.

As you can see, the resulting string (that needs to be interpreted graphically after the generation process) is growing really fast.

The Length of the string after each iteration is:
1st iteration: 10 characters
2nd iteration: 50 characters
3rd iteration: 250 characters
4th iteration: 1250 characters
5th iteration: 6250 characters
…

 l-system prozedurale generierung three.js