P5 Posts


posted in Web, P5, Generative at 02 September 2017

GERBIL is an application for making your own pretty L-Systems made in December 2015.

GERBIL Screenshot

It was made by me and Kirsty in p5.js, which is essentially a Javascript version of Processing. It also doesn't use jQuery, instead using the raw Javascript options for DOM manipulation, although in hindsight using jQuery would have been much more sensible (at the time I knew very little about jQuery). Also in hindsight this could have been done with raw SVG processing rather than p5.js, but p5.js is really nice to use and still worked.

An Introduction to L-Systems

An L-System is a way of generating fractals using "replacement rules" - essentially string replacements - to increase the detail of a pattern infinitely. Each rule transforms a single letter into a string, like in the following example:

F: F-F++F-F
+: +
-: -

If we start with the string F, then we produce the following with each iteration (the brackets are there to separate the replacements out for easier reading):

F -> F-F++F-F -> (F-F++F-F)-(F-F++F-F)++(F-F++F-F)-(F-F++F-F) -> ...

Which generates the following pattern, if F is mapped to forwards and +,- to clockwise and anticlockwise turns respectively:

L-Systems Example

We can keep applying this to add further detail. Each symbol is mapped to one of a set of instructions: either move forwards some distance, backwards, rotate, push the current state to the stack, or pop the last state off the stack and move there.

Reading L-Systems

To read the given L-System, we first need to load the rules given. In our website we allow users to define as many rules as they want. To import these we sort them into their different types of symbol (whether it goes forwards, rotates etc) and store the [character, replacement] pairs.

To perform an iteration (set of replacements), we can just search through those pairs and apply the replacement. To draw our system's current state, we just go through the symbols, check which type of symbol it is (forwards, rotate...) and perform that operation.

The website also provides capability for saving your own L-Systems, which simply creates a set of key-value pairs that can be read and written.