Welcome to lsys - the brainchild of a curious programmer with questionable taste in design.

The pattern on the right is an l-system, and it's interactive.

Click and drag!

As you drag your mouse, you change the parameters of the system, which then gets redrawn.

This set of controls describes (entirely) what you will see on the right

This is the most important part: The set of rules that defines the shape of the system

The rules are used to generate a sequence of drawing instructions. For example, 'F' means 'draw forwards', and '+' means rotate right.

By generating long strings of instructions, we can make some pretty crazy patterns

Let's try something super simple: a square

We've defined a rule, called S, for "square". It really doesn't matter what we call it, but it must be precisely one character

After the colon, we've defined what 'S' means - it means draw forwards, then rotate right, four times in a row

But we could describe this another way:

Instead, let's make the S rule recursive. Now, we draw forwards, rotate right, then do 'S' again.

We do this 4 times, since that's the value of the 'levels' input field

Let's get more interesting:

We define a new rule A, which does a S(quare), then rotates right, and does an A again. The [brackets] surrounding the S mean "remember where you are, do an S, return to where you were".

We've also bumped up the levels to 50. Try dragging around and see what happens! Notice that you're changing the value of 'angle' up above, which is what we rotate by when we see a '+' instruction.

The system's parameters are also sync'd automatically with the url - meaning you can share systems by pasting the url somewhere.

Also - since systems are just urls, your browsers back button works the way you would expect it to :)

Take a look at some of the examples here (you can scroll down!)

Here's the list of available symbols (so far)

Other than that, it's worth mentioning the mouse controls:

Ctrl-click (or cmd-click) will translate (move) the system around

Rotation is done manually, using the input field on the right

Dragging left-right affects angle values, up-down affects angle growth

Hold alt and drag to adjust size parameters

Here, up-down adjusts scale, and left-right adjusts size growth