The L-system page again, with a turtle that can turn in all three directions, drawn with three.js. Pick a system, change the number of iterations, and look at it from any side: drag to rotate, scroll or pinch to zoom, right-drag (or the Pan button) to move it.

 

The rules

All of it comes from one text file, 3d.l, in the same format as the 2D page's 2d.l: a name, then Angle (one unit is 360 / Angle degrees), an Axiom and rules like F=F+F--F+F. It also has three lines of its own: Group (the row of buttons), Depth (the iterations to start with) and Width. A new system is a new block in that file.

The turtle

A turtle starts pointing up, with a left side and an up side, and goes through the rules one symbol at a time. These are the symbols of The Algorithmic Beauty of Plants (Prusinkiewicz and Lindenmayer, 1990), which most 3D L-system programs follow. A number after a turn multiplies the angle (+3 turns three units).

F   G

Move forward one step, drawing a line (F) or not (G, or f outside a leaf).

+   -

Turn left / right, about the turtle's up axis. With only these the turtle stays in one plane, which is all the 2D page needs.

&   ^

Pitch down / up, about its left axis.

\   /

Roll left / right, about its heading. This is what spreads the branches of a tree round the trunk instead of flat in one plane.

|

Turn around.

$

Roll until the left side is level, so a tree keeps its crown up.

[   ]

Remember the turtle, and go back to it: a branch.

!

A thinner line (!) or a width in percent of a step (!8). The twigs of a tree are thinner than its trunk.

'

The next color of the palette ('3 is color 3).

{   }

A leaf: f and . record its corners and } fills the polygon.

*

Swap the turns: + and -, & and ^, \ and / change places until the next *, so a rule can draw its mirror image. Not in the book: it is Fractint's !, and a few of the flat systems on the 2D page need it.

@

Scale the step: @0.5 halves it, @I2 divides by 2, @Q2 multiplies by the square root of 2 (as in Fractint).

Every other symbol (A, B, X, L and so on) draws nothing: it is there to be rewritten. There is no one standard for the signs: some programs swap left and right, or up and down. These follow the book.

The curves and the trees

Space-filling curves. The 3D Hilbert curve fills a cube: iteration n takes 8ⁿ - 1 steps and visits every point of a 2ⁿ cube exactly once, which I checked in the code. Its four rules (A, B, C and D are the four ways to enter a cube) use pitches and rolls to turn into the next dimension. The flat curves (Hilbert, Gosper, the dragon, Koch and the rest) are on the 2D page.

Trees and plants. Rules with brackets draw branches, ! thins them and { } adds leaves. The tree is the one from the book's 3D plants: three branches round each node (the five rolls ///// between them), leaves at the tips. The bush puts three branches round each node, 120 degrees apart, and takes a new color of the palette at every level, brown to light green.

The engine

The engine is lib/larsi.org/lsystem-3d.js, and the 2D L-system page runs on exactly the same code. It has no three.js in it and does three things:

1. LSYSTEM3D.parse(text) reads a rules file into systems: the Angle, Axiom, Group, Depth and Width lines, and the rules. A system is the lines from Name { to a line that is just }, so a rule may hold { } for a leaf. Symbols are case sensitive, and the lines of one symbol are joined, as Fractint runs all of them in order.
2. LSYSTEM3D.run(system, iterations, { maxLines, heading }) walks the turtle. It does not build the long rewritten string: a symbol that has a rule is replaced by it as the turtle reaches it, as many levels deep as you asked for, and at the last level every symbol is a command (F draws, A does nothing). Memory is only the lines drawn.
3. It hands back the lines (from and to, in 3D), each line's width, color and place along the path, the leaf triangles, and a box round it all, for the page to draw however it likes.

Two options. maxLines (1,000,000 here, 3,000,000 on the 2D page) is the most a drawing may hold: if you ask for more iterations than fit, the engine tries 0, 1, 2 ... and keeps the deepest that fits, and the page says so. heading is the starting direction in degrees: this page starts pointing up, the flat page east. This page draws the result as one instanced mesh of tubes (or plain lines for the big ones) and one mesh of leaves; the 2D page draws the same lines as SVG.

This page was created with Claude Code.