L–system.
27.12.2016
In last few days, I implemented – just for fun (you know, programmer :)) – something called L–system or Lindenmayer system.
What is this L–system all about? It is some kind of formal grammar system brought by Hungarian biologist Aristid Lindenmayer. He designed it to be formal system to describe growt of plants, see L-system on Wikipedia. Basically, you set some starter sentence (called axiom) and rules, which controls the evolution of the system. In every iteration (or generation), these rules are applied on the previous result – system is evolving. To be more attractive, app is displaying the results in graphical manner using Turtle graphics. I will describe it in more detail in following article (including my implemetation details), this time we'll look at the implementation from the common user point of view. It is implemented as web application in JavaScript and user interface looks like:
Top left you find canvas, where the final 'art' is drawn. Next on the right side, there is a box with settings. Starting from top, you can select some prepared examples like Koch's curve or Sierpienski triangle, set angle for turtle graphics output, set axiom and define rewritting rules ('Pattern' is rewritten to the 'Replace'). When you click on Set, current state is cleared and new state is set according to the settings box. Finally clicking on Add rule adds new rewritting rule to the table of rules. Bottom of the screen is designed to be the log of application activity. You can Iterate step further or Clear history (clears the history of iterations). In table, you can see the whole history (unless you clear it), axioms (0. iterations) is green colored.
What those letters stands for?
Well, good question ;). As you can use every letter you want, in axioms and rewritting rules, some has special meanings in terms of turtle graphics in our application. Brief explanation in table:
| Letter | Meaning |
|---|---|
| F | Draw line in selected direction, black color. |
| M | Draw line in selected direction, green color. |
| S | Draw line in selected direction, brown color. |
| f | Move forward in selected direction, no drawing. |
| + | Rotate clockwise by given angle. |
| - | Rotate counter clockwise by given angle. |
| [ | Push current state to the stack. |
| ] | Pop state from the stack. |
Therefore if you want to see something drawn on the canvas, you have to use some of above letters in your sentences. For example to draw equal-sided triangle, you have to set angle to the 60°, axiom F--F--F and click Set. Try it! If you want to see it better, use button.
Last, but not least.
Ok, where this app lives? Go to the l-system.nigol.cz and have fun. Also Github repository is existing, feel free to clone, modify, whatever. And of course stay tuned for following article with more details about L-system and how it is implemented.
UPDATE: Second article is available.