L-System Explorer is an interactive tool for exploring L-Systems which consist of an alphabet of symbols and rules for transforming strings of symbols. The resulting symbol string maps to drawing instructions which can be used to generate plant and fractal imagery.
More information on L-Systems: http://en.wikipedia.org/wiki/L-system
- State stored in URL hash for portability
- Arrow key shortcuts with shift and option/alt modifiers for finer grain control
- Live updating of rendered output and state in URL
Let's take a look at how a plant gets encoded to get a feel for the encoding format:
Each section is delimited by
/ so if we break the encoded plant into sections we get:
- rewrite rules:
- drawing instructions:
- max iterations:
- starting drawing values
This is the starting symbol that we rewrite using the rewrite rules each iteration.
So we start with
X which is rewritten to
F-[[X]+X]+F[+FX]-X which is then rewritten to
FF-[[F-[[X]+X]+F[+FX]-X]+F-[[X]+X]+F[+FX]-X]+FF[+FFF-[[X]+X]+F[+FX]-X]-F-[[X]+X]+F[+FX]-X and so on...
2. rewrite rules
Rewrite rules are separated by comma so we can split this section into
The first character is the symbol and the
: can be read as "is rewritten to".
So the above means:
Xis rewritten to
Fis rewritten to
3. drawing instructions
Each symbol can have its own set of drawing instructions.
Each set of drawing instructions is separated by
; so we can split this section into
The first character is the symbol followed by a comma separated list of drawing instructions for the symbol. Each drawing instruction is represented by a character followed by a value. The possible drawing instructions are:
ddistance - has a value range of -20 to 20
aangle - has a value range of -360 to 360
bbranch - the value can be 0 meaning start branch or 1 meaning end branch
ppen - the value can be 0 meaning pen up (stop drawing) or 1 meaning pen down (start drawing)
4. max iterations
This is the maximum number of times the rewrite rules will be applied. This value exists for performance reasons. This can't be changed from the UI because eventually this setting should be automatically calculated from the growth rate of the symbol string.
5. starting drawing values
Each set of drawing values is separated by comma into
x135135 pixels from the left
y638638 pixels from the top
i6apply the rewrite rules 6 times
z100100 percent zoom
- react - view framework
- webpack - build system
- lodash - js utils
Install npm packages
To build the source files and output them to the dist folder
npm run build
To serve L-System Explorer so that it's ready to use from http://localhost:4000
To run the tests