In part two, we’re going to take a look at a piece I created called ‘Sever’. It’s based on the generative template described previously. Here, you can download the full source.

The idea behind this piece was to have some sort of organic strand or thread that unravels and splits apart, much like the vein of some abstract creature. This is accomplished by a series of strands that draw in a sinusoidal pattern while shrinking and occasionally splattering symbols and dots along its path. There is some moderately heavy math involved which we’ll get into later, but for now let’s focus on the structure.

There are two classes, the document class (Sever.as) and the Strand class. All of the display and setup functionality is being handled in the document class, while the drawing functionality is handled in Strand.as. First, let’s take a look at the document class, Server.as. I am setting a static variable ‘S’ that will be used for objects of our Strand class to communicate back by using the syntax:Server.S. (public property or function). Remember to import Server.as in Strand.as. Back in our document class, note that we are only adding one display object to the stage, bmp. This is a Bitmap object that all of our strands will draw into, we are bypassing the vector renderer entirely, in this piece we will be generating way too much vector information for any computer to handle effectively. After adding bmp, we call setupStripes which basically creates a pinstripe pattern across the entire screen and draws that into stripesBmpData. We will set one of our Strand objects to act as a mask for this graphic as you can see on line 55 of Server.as. That brings us to the setupStrands function. This function uses a for loop to create 20 strands and places them all in the middle of the stage horizontally (they initialize with a y position of the height of the stage, or the bottom). I add references to these objects in the strandArr array for easy access later. As stated above, we are setting one of the Strands to be the mask of our stripesBmp, so that when it draws it reveals that image. We are also adding a subtle drop shadow filter [ds] to each Strand.

After our main display objects are set up, we add an Event.ENTER_FRAME listener to the stage. In the listener function, you will see that we are doing three things on each frame: First, we are calling runStrands() which makes each strand draw the next part in it’s sequence, next we draw everything to our main display object, bmp, then we clear all the vectors out of each Strand object. This process is optimized for performance, and as stated before, we are bypassing the vector renderer completely and are keeping all of our Sprite objects clear. In this case, the Strands are our Sprite objects as they extend the Sprite class.

Now onto the fun stuff: the Strand class. Inside Strand.as, you will find in the constructor function that we are setting an array of colors for the fills, and one for the symbols (splatterings). Then we call our init function, which sets the initial conditions for the strand. These include the random color from the fill array, the y position (which is always the height of the stage on init), the x position which is somewhere within 80 pixels in each direction from the center of the stage horizontally, sX which is what we increment by inc to get our sine wav pattern, spread which is how far left and right the strand fluctuates, inc which is the number we use to increment sX, xOffset which continually shifts the Strand left or right, and sizeOffset which is the rate at which the Strand shrinks.

Our drawStrand function is being called from the document class. This is to avoid having numerous Event.ENTER_FRAME listeners active. When this function is called, it checks if the strand has either shrunken beyond sight or gone offscreen. If any of those conditions are met, init is called and it starts over with all new properties. Then it draws a circle at the current xPos and yPos coordinates, randomly calls the splatter function, then called moveOn which calculates the next coordinates to draw a circle to. It does this by incrementing sX by inc and taking into account the spread and xOffset variables. The y position is always just moved up 2 pixels each frame. It also shrinks the size of the next circle by using the sizeOffset variable. These equations came out after a lot experimentation, change them around to see what results you can get, or even add more factors to the equation to make the system even more complex.

The final thing to go over is the splatter function. This is randomly called 1 out of 100 frames and creates (usually) a splattering of circles at random positions and sizes close to the main xPos and yPos coordinates. It also draws symbols that have been drawn in the symbols_mc located in Sever.fla. If you look in Server.fla, right click on symbols_mc, and click Properties, you will notice I’ve given this movie clip a class name of Symbol, so that we can create an object of that class in our code. These symbols are placed into an array for later removal by the clearGraphics function in the document class, if these symbols were allowed to build up over time, our program would crash to a screeching halt. We color each symbol based on a random color from the symColorArr array.

Feel free to reuse these files in your own experimentation, but please kindly link back if you post any of your derivative works. Please email Nick Elliott at nick.elliott@oncallinteractive.com if you have any questions.