Effects and Comments

We present two versions of Flash art which is based on a simple principle: allowing lines to be traced out on a Bitmap with changing directions determined by an invisible Perlin noise BitmapData. The first version produces a grayscale image using white lines with low alpha. The second version uses lines which change color from their start to finish positions. For added interest, we have made the second version animated so the drawing process can be observed. Click a screen shot or the link above it to open an effect in a new window:

Black and White "Noir" Version
Color, Animated Version

Download the Complete AS3 Code

The following zip package contains complete code and the custom AS3 classes behind the effects:

About the Code

At its heart, the code for these examples is rather simple. In both exmplaes, the image is created by drawing many individual curves which start at regular grid positions. Each curve is drawn by taking steps away from the current position according to an invisible BitmapData filled with Perlin noise. The red channel of the Perlin noise determines how far to move in the x direction, and the green channel determines the y direction. For some extra variation and distortion, the blue channel of the Perlin noise serves as an extra multiplier for the step distance.

The curves are drawn with low alpha values so that where they are more dense and overlapping the image is brighter. We had to be especially mindful not to use the drawPath method to draw all the curves in one step, because this would not produce the desired alpha blending effect. Rather, we simply make use of individual moveTo and lineTo commands. See our recent post AS3 graphics.drawPath versus moveTo, lineTo Methods - Preserving Transparency for further discussion of alpha blending of lines.

Saving Bitmaps with the BitmapSaver Class

We make use of our custom BitmapSaver class in this example. This class makes it very easy to add bitmap-saving functionality to your Flash experiments. You simply need to create an instance of this class and add it to the stage, specifying the BitmapData to be saved as an argument in the constructor. In this example, we have set up two functions which add and remove the BitmapSaver to and from the stage as needed.

The BitmapSaver class is based on the save() method of the FileReference class, in combination with the JPGEncoder and PNGEncoder classes, which are part of the as3corelib library available here. We first made use of our BitmapSaver class in A Smooth and Responsive Drawing Application in AS3 Flash, and also made use of the same basic image encoding and saving functionality in our Mandelbrot Plotter.

Back to Advanced Tutorials              Back to Flash and Math Home

We welcome your comments, suggestions, and contributions. Click the Contact Us link below and email one of us.

Adobe®, Flash®, ActionScript®, Flex® are registered trademarks of Adobe Systems Incorporated.