Skip to content

Ecce Signum

Immanentize the Empathy

  • Home
  • About Me
  • Published Works and Literary Matters
  • Indexes
  • Laboratory
  • Notebooks
  • RSS Feed

Tag: procedural art

Lindenmayer System Basics: Branches

2011-03-13 John Winkelman

This is the fifth in a series of blog posts explaining the usage of the Lindenmayer System Explorer. Clicking on an image will take you to the explorer page, pre-configured to draw that image.

So far, we have seen many different patterns created with the L-system explorer – fractals, dragon curves, snowflakes, and so on. They all have one thing in common: they are made up of a single line.

No branching yet

To create branches, enclose the rules for a branch in square brackets, like so:

[F]+[F]+[F]

Instead of yielding a bent line, it creates a pattern like this:

Branches, 1 iteration

Not terribly interesting yet, but it does allow for the creation of more interesting shapes. Remember: Astrid Lindenmayer was a botanist, and he originally created this system to model the structure of living plants. If we nest a few brackets, and play around with the angles, we can get patterns like this:

Something like a shrub

Branch rules can be nested within each other, to the extent that extremely complex patterns can emerge very quickly:

more branching, something like a wreath

And with a little practice, the patterns can become increasingly plant-like:

closer to a plant

An oddly symmetrical tree

So that’s it for branches. In the next post I will show how you can use branching to change the drawing angles, colors, line length and line thickness to create increasingly life-like plants.

More posts on this subject:

Lines
Angles
Rule sets
The Start Condition

Posted in ProgrammingTagged Flash, Lindenmayer, procedural art comment on Lindenmayer System Basics: Branches

L-System Basics: The Start Condition

2011-02-10 John Winkelman

In this post I will discuss some of the different patterns created by modifying the start condition in the Lindenmayer System Explorer. Clicking on any of the images will take you to the explorer tool, preloaded with the variables necessary to re-create that image.

So by now you all have seen the basic pattern which is created by the default settings in the explorer:

All well and good, but it feels incomplete; maybe a little lop-sided. Change the start condition to “F+F+F+F”, and you will see this:

How did this happen?!? Look at the angle: 90°. When you click the render button, the start condition and the grammar are run through an algorithm which creates a long string of characters. Every time an “F” is encountered, a line segment is created. Every time a “+” or “-” is encountered, the angle at which the next segment will be drawn is updated by the value in the “angle” field. “+” turns clockwise, “-” turns widdershins. So in this instance, every “+” means the next line will be drawn at a 90° angle to the previous segment. In the first example, having “F” as the starting condition drew, overall, a single quarter of a square pattern. Changing the start condition to “F+F+F+F” means that the initial 90° angle would be repeated 4 times, each at a 90° offset from the previous. 90 x 4 = 360°, which brings the line back to the start position.

This will work with any number which divides evenly into 360. Here is a 5-sided (72°) figure:

Six sides at 60°:

…and so on. As long as the starting condition and angles are correct, you can put almost anything in the grammar and use any number of iterations, and the result will still be a closed shape. Here are a few more:

Posted in ProgrammingTagged Flash, Lindenmayer, procedural art comment on L-System Basics: The Start Condition

Lindenmayer Systems: The Rules

2011-02-07 John Winkelman

In the Lindenmayer System Explorer tutorials I am posting I continually refer to “rule sets”, which are the DNA (so to speak) of the shapes which are created when the you click the “RENDER” button.

Rule sets are built as follows:
1. look at the current rule set, which in this instance is equal to the start condition “F”.
2. Look at the grammar, which in this instance is “F:F+F-F-F+F”.
3. Match the grammar character to the left of the colon to the characters in the start condition. Each time you encounter an “F” in the start condition, replace it with everything to the right of the colon in the grammar.
4. If we have not yet done this as many times as the iterator calls for, go back to (1) and repeat it with the updated rule set.

So with the default start condition and grammar, and the iterations set to “1”, the resulting rule set looks like this:

F+F-F-F+F

The Explorer simply replaced all of the “F” characters in the start condition with the entire grammar. Simple enough.

Now change the iterations to “2”, and click “RENDER“. The rule set now looks like this:

F+F-F-F+F+F+F-F-F+F-F+F-F-F+F-F+F-F-F+F+F+F-F-F+F

Instead of 9 characters, the rule set is now 49 characters long, and the resulting shape is more complex.

Changing the iterations to 3 will give you this 249-character long rule set:

F+F-F-F+F+F+F-F-F+F-F+F-F-F+F-F+F-F-F+F+F+F-F-F+F+F+F-F-F+F+
F+F-F-F+F-F+F-F-F+F-F+F-F-F+F+F+F-F-F+F-F+F-F-F+F+F+F-F-F+F-
F+F-F-F+F-F+F-F-F+F+F+F-F-F+F-F+F-F-F+F+F+F-F-F+F-F+F-F-F+F-
F+F-F-F+F+F+F-F-F+F+F+F-F-F+F+F+F-F-F+F-F+F-F-F+F-F+F-F-F+F+
F+F-F-F+F

…and here is 4 iterations, for a total of 1249 characters:

F+F-F-F+F+F+F-F-F+F-F+F-F-F+F-F+F-F-F+F+F+F-F-F+F+F+F-F-F+F+F+F-F-F+F-F+F-F-F+F-F+F-F-F+F+F+F-F-F+F-F+F-F-F+F+F+F-F-F+F-F+F-F-F+F-F+F-F-F+F+F+F-F-F+F-F+F-F-F+F+F+F-F-F+F-F+F-F-F+F-F+F-F-F+F+F+F-F-F+F+F+F-F-F+F+F+F-F-F+F-F+F-F-F+F-F+F-F-F+F+F+F-F-F+F+F+F-F-F+F+F+F-F-F+F-F+F-F-F+F-F+F-F-F+F+F+F-F-F+F+F+F-F-F+F+F+F-F-F+F-F+F-F-F+F-F+F-F-F+F+F+F-F-F+F-F+F-F-F+F+F+F-F-F+F-F+F-F-F+F-F+F-F-F+F+F+F-F-F+F-F+F-F-F+F+F+F-F-F+F-F+F-F-F+F-F+F-F-F+F+F+F-F-F+F+F+F-F-F+F+F+F-F-F+F-F+F-F-F+F-F+F-F-F+F+F+F-F-F+F-F+F-F-F+F+F+F-F-F+F-F+F-F-F+F-F+F-F-F+F+F+F-F-F+F+F+F-F-F+F+F+F-F-F+F-F+F-F-F+F-F+F-F-F+F+F+F-F-F+F-F+F-F-F+F+F+F-F-F+F-F+F-F-F+F-F+F-F-F+F+F+F-F-F+F-F+F-F-F+F+F+F-F-F+F-F+F-F-F+F-F+F-F-F+F+F+F-F-F+F+F+F-F-F+F+F+F-F-F+F-F+F-F-F+F-F+F-F-F+F+F+F-F-F+F-F+F-F-F+F+F+F-F-F+F-F+F-F-F+F-F+F-F-F+F+F+F-F-F+F+F+F-F-F+F+F+F-F-F+F-F+F-F-F+F-F+F-F-F+F+F+F-F-F+F-F+F-F-F+F+F+F-F-F+F-F+F-F-F+F-F+F-F-F+F+F+F-F-F+F-F+F-F-F+F+F+F-F-F+F-F+F-F-F+F-F+F-F-F+F+F+F-F-F+F+F+F-F-F+F+F+F-F-F+F-F+F-F-F+F-F+F-F-F+F+F+F-F-F+F+F+F-F-F+F+F+F-F-F+F-F+F-F-F+F-F+F-F-F+F+F+F-F-F+F+F+F-F-F+F+F+F-F-F+F-F+F-F-F+F-F+F-F-F+F+F+F-F-F+F-F+F-F-F+F+F+F-F-F+F-F+F-F-F+F-F+F-F-F+F+F+F-F-F+F-F+F-F-F+F+F+F-F-F+F-F+F-F-F+F-F+F-F-F+F+F+F-F-F+F+F+F-F-F+F+F+F-F-F+F-F+F-F-F+F-F+F-F-F+F+F+F-F-F+F

In each of these, the drawing tool starts at the first character and goes through until it reaches the end, following each instruction in order. So the first few characters in the above string would be read as:

“Draw a line. Turn right. Draw a line. Turn left. Draw a line. Turn left. Draw a line. Turn right. Draw a line. Turn right. Draw a line. Turn right.”

This can continue indefinitely. Complex starting conditions, combined with complex grammars and large numbers of iterations, can easily result in rule sets hundreds of millions of characters long.

Posted in ProgrammingTagged Flash, Lindenmayer, procedural art comment on Lindenmayer Systems: The Rules

L-System Basics: Angles

2011-02-03 John Winkelman

After lines, angles are the most important in the creation of patterns in an L system. The following are a few examples of what differences in angles look like, based on the default state of the Explorer.

In all of these examples, clicking on the associated image will take you to the explorer, pre-configured to generate that image.

This is the initial condition, with an angle between lines of 90°:

Changing the angle to 60° results in this:

…And here is 45°:

Increasing past 90° makes the pattern more compact. Setting the angle to 120° creates a triangle pattern:

Increasing the iterations with the 120° pattern results in larger sets of nested triangles:

And finally, increasing the angle to 270° effective creates a mirror image of a pattern created with a 90° angle:

These should give you enough starting points to begin creating some interesting patterns. The angles which don’t precisely divide into 360 can result in some interesting interference patterns in the overlapping lines.

Posted in ProgrammingTagged Flash, Lindenmayer, procedural art comment on L-System Basics: Angles

L-System Basics: Drawing a Line

2011-01-31 John Winkelman

This post is meant to provide some basic instructions and simple starting points for using the Lindenmayer System Explorer. Most of what is written here can also be used in other such tools.

Clicking on an image will open the L-System Explorer pre-loaded with the rules set which created that image.

At its simplest, a Lindenmayer system can be used to generate a line.

Play around with line length, iterations, and the number of “F”s in the Start Condition and the Grammar. You should end up with straight lines of varying lengths

Seems like a lot of work just to draw a straight line. Now add a “+” to the Grammar, changing it to this: F:F+FF

Assuming you have not changed any of the other values, you should have a shape which looks like this:

When going through the rule set, every time a “+” is encountered, the drawing tool changes the angle of the next line by the value in the “Angle” field.

Now add a “-” (minus sign) to the Grammar, changing it to this: F:F+F-F. This should give you a much more complex line which looks like this:

Now change the grammar so that it looks like this: F:F+F-F-F+F. Assuming you haven’t changed any of the other values, you see this pattern:

Adjust the Iterations for this one and you will see how a few simple rules can rapidly generate remarkably complex patterns. Here is the previous rule set with four iterations…

…and with five iterations.

Posted in ProgrammingTagged Flash, Lindenmayer, procedural art comment on L-System Basics: Drawing a Line

L-system Explorer Update:Bookmarking

2011-01-25 John Winkelman

green cross 1

Patterns created using the Lindenmayer System Explorer are now bookmark-able and sharable. Click here to see how I created the image at the top of this post.

Posted in ProgrammingTagged Flash, Lindenmayer, procedural art comment on L-system Explorer Update:Bookmarking

L-System: First Results

2011-01-10 John Winkelman

Building on my Lindenmayer System experiment from a few days ago, here are a few pieces created with the next generation of the tool, which I will be uploading in a few days. Enjoy!

thicket 1

thicket 2

scatter

bird nest 2

Posted in ProgrammingTagged Flash, Lindenmayer, procedural art comment on L-System: First Results

Lindenmayer Systems and Generative Art

2011-01-05 John Winkelman

lindenmayer-1

This is a Lindenmayer System pattern with the grammar “+F!F-[F+F]-[F-F]!”. Confused? Click here to create your own.

A Lindenmayer System is a formal grammar used to generate rule sets for describing the phenotypes of algorithmically created plant analogs.

There. That should have scared away the lightweights.

The thing sitting above this block of text is a Lindenmayer System explorer. It is used to turn blocks of text into procedurally generated patterns which resemble plants. This system of generating graphics is so successful that it is used in many, if not most, of the current popular games to create plants in-game, on the fly, so users donÃ’t need to install hundreds of megabytes of graphic textures.

Tool Description

Line Length – length of a line segment, in pixels.

Line Scalar – percentage by which the line length will shrink, in each succeeding iteration. “1” means the line length will not change. Between 0 and 1 means it will shrink. Greater than 1 means it will increase in length.

Line Width – Width of a line segment, in pixels.

Line Taper – percentage by which the line width will shrink, in each succeeding iteration. “1” means the line width will not change. Between 0 and 1 means it will shrink. Greater than 1 means it will increase in width.

Line Color – the color of the line segment, expressed in Hexadecimal RGB format. 000000 is black. ffffff is white. Use a comma-delimited list to display different colors in succeeding iterations; for example, “000000,333333,666666,999999,cccccc” (without the quotes) for gradually lighter shades of gray.

Angle – Degrees in which the angle of the next iteration lines will differ from the current.

Angle Taper – Alters the degree of branch offsets. Not currently used in this tool.

Iteration – Number of times the rule set is recursively built out from the initial grammar. Any number greater than 1. With complex grammars, more than 5 tends to bog down the system as the rule set is generated.

Axiom – Initial seed from which the grammar is built. Currently only the character “F” is used

Grammar – The rule set which describes the pattern which will be created using all of the preceding settings. The genotype, if you will. Always starts with “F”

Allowable Characters in the Grammar set, and what they do

F – draw a line segment
+ – increase the drawing angle
– – decrease the drawing angle
[ – start a branch
] – end a branch
! – reverse the angles of the current rule set

Here are some combinations of presets and grammars which create interesting patterns:

The pattern on the front page which enticed you to play with the L-system explorer:
Grammar: F:+F!F-[F+F]-[F-F]!
Angle: 15
Iterations: 4

Hexagon tessellation pattern:
Grammar: F:F+F-F+F-F-F-
Angle: 60
Iterations: 4

Generic vine:
Grammar: F:[F+F]F[F-[F-F]F]F++[F+F]!F
Line length: 10
Angle: 25
Iterations: 3

A shrub-ish thing
Line length: 20
line scalar: .9
line width: 10
line taper: .9
line color: 331100,663300,994500,cc3300,ff9933,00ff00,ff0000
angle: 10
iterations: 3
grammar: F:[F[F+F]![F+F]]-F-[F-[F]F+F[F+]-]!F

Have fun, and if you come up with something especially interesting post it in the comments!

Posted in ProgrammingTagged Flash, procedural art comment on Lindenmayer Systems and Generative Art

Flowing Water 1

2009-12-03 John Winkelman

water flow test

Click here to launch the demo

First run at a simulation of water flowing through terrain. Instructions are to the left of the image.

Posted in ProgrammingTagged Flash, procedural art comment on Flowing Water 1

Procedurally Generated Flower Pattern, Part 1

2009-02-19 John Winkelman

Procedurally generated flower pattern

Click here to launch the generator. Once it opens, click the flower to generate a new one.

The petals are arranged using the Fibonacci sequence to generate a Phyllotaxis pattern. The colors in each petal are created using Perlin Noise, and that pattern is re-drawn using a custom color map. Result: Billions of possible variations in about a hundred lines of code.

Posted in ProgrammingTagged Flash, procedural art comment on Procedurally Generated Flower Pattern, Part 1

Posts navigation

Older posts
Newer posts

Personal website of
John Winkelman

John Winkelman in closeup

Archives

Categories

Posts By Month

May 2025
S M T W T F S
 123
45678910
11121314151617
18192021222324
25262728293031
« Apr    

Links of Note

Reading, Writing
Tor.com
Locus Online
The Believer
File 770
IWSG

Watching, Listening
Writing Excuses Podcast
Our Opinions Are Correct
The Naropa Poetics Audio Archive

News, Politics, Economics
Naked Capitalism
Crooked Timber

Meta

  • Log in
  • Entries feed
  • Comments feed
  • WordPress.org

© 2025 Ecce Signum

Proudly powered by WordPress | Theme: x-blog by wpthemespace.com