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:
F - a unit vector step forward that draws a line+,-,&,^,<,> - left and right turns on all three axises| - a vector direction flip[, ] - state push and pop functions that enable branch creation.
Proper cartesian coordinates can then be generated from the result string, for processing in the front-end of your choice (WebGL, canvas or SVG).
L-Systems.JS was created 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' }).iterate(2);
var tree = lsys.print();
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 = [];
for (var j=0; j<coords[i].length; j++) {
branch.push(new THREE.Vector3(coords[i][j][0], coords[i][j][1], coords[i][j][2]));
}
var geometry = new THREE.Shape(branch).createPointsGeometry();
console.log(geometry);
draw_geometry(geometry);
}
The L-Systems.JS project is in a very premature stage. Help us out by going over the open project issues.
Any other suggestions, feedback, or pull requests would be gladly accepted! :)