A short intro on L-Systems

Before talking about today's graphic demo, let me explain what is an l-system for those who never heard about it.

An L-system or Lindenmayer system is a parallel rewriting system and a type of formal grammar.An L-system consists of an alphabet of symbols that can be used to make strings, a collection of production rules that expand each symbol into some larger string of symbols, an initial "axiom" string from which to begin construction, and a mechanism for translating the generated strings into geometric structures.

Okay, wikipedia's definition might not mean much to you. Let me try to paraphrase it.
Say you want to make a drawing. You can only use line segments. The line segment shape will be our alphabet.
You can only draw line segments in a particular way, this way will be called the production rule.
You will not start your drawing from scratch, it will already have one or more line segments. This initial state will be called the start (or axiom or initiator).
We have our alphabet, our production rules and our start, we can begin drawing!

The initial state is a line segment.
The production rules says for each line segment add another line segment that crosses the first one right in its middle at a 90 degree angle.
Following the production rule we'll obtain 4 line segments.
We'll repeat our production rule on each of these 4 line segments and so on. The result will be a l-system

Enough with theory, we want to see it in action!

L-Systems are something that always fascinated me and that I've always wanted to try to implement. Well, now that I am studying webgl and three.js, it seemed to me like the perfect pilot project to experiment what I've learned so far. And there it is, here is my first attempt to l-systems! It might not look beautiful and sometimes it the tree grows in an unnatural way but at least it's something. If I will feel like it, I will improve it ( and maybe add some flowers  :P  ) and eventually write a tutorial since I didn't find many on the web.

See the Pen L-System with three.js by Blasco Brauzzi (@blascone) on CodePen.

Show Comments