Using Generative Techniques in Flash Design

Wikipedia’s article on generative art describes it as “…art that has been generated, composed, or constructed in an algorithmic manner…”

Generative techniques, while somewhat obscure to those outside the technology sector, can be used to produce highly detailed, ever changing visual patterns within the confines of a system that you define– think of those visualizations that were popular to watch while listening to your favorite tunes on Windows Media Player in the 90s.

Many designers shy away from randomness, but I would argue that since a computer can create iterations of a generative system extremely quickly, you can get desirable results by simply running the program again and again until something special begins to unfold. You can then take vectors you have generated into Illustrator for refining if you like, as well. Generative techniques are also extremely valuable for animations, especially related to representations of natural processes like plants growing, objects blowing in the wind, and various particle effects for obvious reasons. In this article, we’ll be focusing on how one can go about creating generative systems. You will need a working knowledge of Actionscript 3 to implement these ideas.

Before we dive into the code, I’m going to briefly describe the general structure I use for nearly all generative pieces I create. Keep in mind that this is simply the system I’ve developed for the way that I work and it allows me the most flexibility. There are thousands of programmers creating generative visuals and each one of them has their own way of doing things. However, I do think that this structure allows for a great deal of flexibility.

Step 1: Create an empty bitmap

As you may be aware, if you have a lot of vector information visible in a Flash application at one time, you can slow your computer down to a crawl. Adding even more vector data will cause the program to freeze and crash. This is why it is valuable to create an empty bitmap as your first layer. This way, you can bake your vectors into the bitmap image and clear them out immediately after each drawing operation. This however will not work for printing since your bitmap will only be at screen resolution, so if you would like to print your work at high resolution, you will simply disable the code that clears the vectors (and make sure you can stop the program before it gets out of control!). If you are creating a visual system that will be displayed on a screen, then it makes sense to bake everything into a bitmap to maximize performance of your application, and also so that you can apply effects to the bitmap image itself. You can use either built-in Flash effects (blur can be extremely useful for creating depth over time), or you can write your own functions that manipulate the bitmap on a per-pixel level. The possibilities are endless.

Step 2: Create your ‘Pen’

For the next layer, I create a sprite object that will act as a pen, meaning I will use the drawing API to create vectors inside this sprite. Sometimes I have several pens layered on top of each other that do different things. As described in step one, you can draw the contents of the pen(s) to your bitmap and then clear it after each drawing iteration.

Step 3: Colors

In order to maximize the control I have over what colors are in use in a visual system, I define color sets inside arrays. Usually I create one array for fills and one for strokes, but depending on the complexity of the visual system sometimes adding more arrays can be useful.

Step 4: Symbology

I create an empty movie clip in the library where I can put hand-drawn vectors in each frame for further reference by the program. Again, depending on the complexity, I may create more than one movie clip holder for symbols.

Step 5: Timing

The final step is creating either a Timer object or an ENTER_FRAME event that will trigger the pen to draw something. I usually just go with an ENTER_FRAME event. Inside the listener function is where I write the code that calls all the drawing functions, as well as draws the generated vector information into the bitmap (if applicable).

That’s it! Within this simple structure we can do anything we like visually. We can write any drawing algorithm we are crazy enough to conjure up, dynamically place hand drawn vectors and position them how we like, control the color scheme of both our generated and hand-drawn vectors, and we can bake it all into a bitmap image for further manipulation. Below, you will find an AS3 template class that incorporates these ideas.

In part 2 of this series, we will look at the code that drives this piece I have created:

Nick Elliott is a frontend developer specializing in Flash at Oncall Interactive. He received his BA in Digital Media Technology from Columbia College Chicago. Over the past several years he’s worked on projects for clients such as Wilson, Nike, Microsoft, Playboy and many others. His generative artwork has been showcased at several galleries around Chicago including the Hokin Gallery at Columbia College Chicago and the Murphy Hill Gallery. Nick is also an electronic musician and implements generative ideas in his music.