L-Systems (short for Lindenmayer systems) are instances of a formal grammar that are used to model growth processes of plant deveopment. L-Systems can be used to generate realistic, natural-looking organisms in simulated environments.
An L-System consists of an initial axiom string, for example: F, and a set of production rules, for example: F -> F-F+FF. The rules are used to iterativey expand the string to a larger one. In our example, two iterations on the string will yield the string F-F+FF-F-F+FF+F-F+FFF-F+FF. L-Systems also include a mechanism that converts the output string into a geometrical representation. The syntax includes a unit vector step forward that draws a line - F, left and right turns on all three axises - +,-,&,^,<,>, a vector direction flip - |, and state push and pop functions - [, ] that enable branch creation. L-Systems.JS can generate the proper cartesian coordinates for processing in the front-end of your choice (WebGL, canvas or SVG).
L-Systems.JS is created and maintained by Yuval Adam.
The canonical usage would be to create the L-System itself by defining the axiom string and the production rules, running the iteration, and generating the respective cartesian coordinates.
var lsys = new LSystem('F', { 'F': 'F-F+FF' });
var tree = lsys.iterate(2);
console.log(tree); // F-F+FF-F-F+FF+F-F+FFF-F+FF
var coords = lsys.draw(Math.PI / 2);
console.log(coords); // [[[0,0,0], [0,1,0], [1,1,0], ... ]]
These coordinates can now be plotted by any front-end. For example, using THREE.js:
for (var i=0; i<coords.length; i++) {
var branch = coords[i];
var geometry = new THREE.Shape(branch).createPointsGeometry();
var material = new THREE.LineBasicMaterial({color: 0x111122, linewidth: 2});
var line = new THREE.Line(geometry, material);
scene.add(line);
}