Tag: Flash

Lindenmayer Systems: The Rules

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.

L-System Basics: Angles

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.

L-System Basics: Drawing a Line

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.

Lindenmayer Systems and Generative Art

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!

Nerd Post: Fixing MXMLC After Upgrading Java Runtime Environment

John Winkelman

This is another nerd post, so if you are not using the MXMLC command-line compiler to create .swf files, you might want to skip it.

Still here? Okay.

A few days ago my work laptop became infected with the Antivirus Soft malware/ransomware/virus, which rode an infected PDF in through the Acrobat Reader plugin for Firefox. Argh. Long story short, after a couple of hours of trying to get rid of it I contacted our computer tech people to wipe the hard drive and re-install Windows. Everything went quickly and smoothly, and all of the re-installs of everything went off without a hitch.

Except…

In the process of putting everything back together, my JRE was updated to version 6, and that apparently broke something in the MXMLC command-line Flex compiler. I kept getting an error which said “This application has failed to start because msvcr71.dll was not found. Re-installing the application may fix this problem“.

After about half an hour of poking around I found a fix. I don’t want to call it THE fix, because I suspect a future JRE update might remove the original problem, and having the current fix in place might cause things to break. But anyway, quite simply, here it is:

1. Search your computer for a file called “msvcr71.dll” You will probably discover it in several places.

2. Copy the file from your Java Runtime directory. Mine was here: C:\Program Files\Java\jre6\bin\. I am sure any of the other instances of msvcr71.dll will work just as well, but since it was a Java error, it made sense to me to copy the file from the Java directory.

3. Paste that file in the bin directory of your installation of the MXMLC compiler. This is the same directory which contains “mxmlc.exe”.

4. Create and compile a “Hello World” – ish Flash movie to test the fix.

Best of luck if you need to do this.

Using .SWC files with the Flex SDK Command Line Compiler

John Winkelman

If you are not a nerd, you might want to skip this post. It involves a specific technique for a specific Flash programming and development issue.

Still reading? Okay.

When programming in Actionscript, I use Notepad++ and the Flex SDK command-line compiler. The closer I can get to pure code – or rather, the farther I can get from using a Flash-specific IDE – the better. Unfortunately, there is one big hurdle to overcome when using this work method, and that is the inclusion of .swc files in my projects. A lot of useful libraries (e.g. Google Maps for Flash) come bundled as .swc files, and frankly, unless you want to pull a library apart and play with it, having everything compiled together in one file is pretty convenient.

All of the tutorials and documentation for the libraries contained within the .swc files assume you are using either the Flash IDE or Flash Develop. Nothing wrong with that; it is a fairly safe assumption which covers ~90% of the developers out there. Not so good for me, though.

So it was with unrestrained joy that I found an answer to my dilemma which gave me the best of both worlds. This is a simple extension to the tutorial put together by Senocular a couple of years ago, for those of us who refuse to be locked to a single development environment. The supa-smart Sakri found a way to add the libraries at compile time, without having to do any funky coding, or dealing with less-than-perfect developer tools. The complete instructions (assuming you have downloaded and installed the Flex SDK) are as follows:

0) Open the command prompt
1) drag&drop mxml.exe (or shortcut icon) into the command line
2) hit [space]
3) drag&drop your .as file into the command prompt
4) hit [space]
5) type in: “-compiler.include-libraries” without the quotes
6) hit [space]
7) drag&drop the swc you want to use into the command prompt
8) hit enter

If your code has no errors, then this should create a .swf file in the same directory as the .as file you dragged onto the command prompt. Best of luck!

Procedurally Generated Flower Pattern, Part 1

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.