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.Er.. Ok. What the hell? Yeah, yeah, yeah.
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)
|F||draw forwards by [size]|
|+ / -||rotate by +/-[angle]|
|> / <||increase/decrease [size] by [size-growth]|
|) / (||increase / decrease [angle] by [angle-growth]|
|[ , ]||push / pop state|
||||increment [angle] by 180°|
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