Author's Comments

Notes on some of the classes used in the application

Particle3D

In this Flash experiment, particles are created from the individual pixels of a bitmap. Each particle in the animation is represented by an instance of the custom Particle3D class. This class represents a conceptual particle rather than a display object. (The actual drawing of the particles is handled by an instance of the RotatingParticleBoard class, explained below.) The instance variables in the Particle3D class keep track of many attributes of a particle, including: its location with respect to various coordinate systems; its location in the source picture; its color; its red, green, and blue components; and its luminance (a measure of brightness).

PictureAtomizer

The PictureAtomizer class is responsible for creating the particles. It creates particles by sampling the pixels of a bitmap.

To use the atomizer, an instance of PictureAtomizer is created using the new operator:

atomizer = new PictureAtomizer();

Following the creation of the atomizer, various parameters of the atomizer are set (these could also have been set within the constructor). The most important parameter which affects performance and appearance is the sampling parameter. This parameter controls how far apart (in pixels) samples are taken from the bitmap to create particles (fractional values may be used, but no interpolation methods have been implemented.) Higher values of sampling will cause fewer particles to be created, which will increase performance.

Particles are created with the createParticles function:

atomizer.createParticles(pic[0]);

Here, pic[0] is a bitmap object which has been loaded by the custom PictureLoader class (in this example, the pic Array only contains one picture). The source picture is located in the folder Pictures.

Changing the picture used in the applet is easy: In the main FLA file, simply change the line in the init() function which specifies the file name:

picURLString= ["Pictures/violet.jpg"];

(Note that the URL is enclosed in an array, since the PictureLoader class is made to load multiple pictures.) You can use any picture you like of any dimensions, but beware of using a picture that is too large. The picture used in this experiment is 87 pixels by 100 pixels, and with sampling set to 1, the atomizer creates 8700 particles. Anything beyond 10000 particles (or even fewer) may slow your computer significantly. If a large picture is used, the sampling parameter can be set to something larger than one to make the atomizer create fewer particles.

The atomizer dispatches an event once it has completed the creation of the particles, and a listener function has been added to take appropriate action afterwards:

atomizer.addEventListener(PictureAtomizer.PARTICLES_CREATED, go);

See the source files for more information about the parameters of the PictureAtomizer class.

RotatingParticleBoard

The RotatingParticleBoard class is an extension of the Bitmap class, and serves as the display area for the particle animation. It is made to render particles from three-dimensional space to a two-dimensional display using projection distortion. In addition, this class contains built-in mouse handler functions which rotate the drawn particles according to mouse input from the user.

A key component to the inner workings of this class is something called a z-buffer, which keeps track of each pixel in the display. The z-buffer records the distance from the observer to a particle currently rendered in a display position. This allows a particle to be drawn only when it is not hidden by other particles closer to the observer.

In the main FLA file, an instance of RotatingParticleBoard is created by the new operator:

board = new ParticleBoard(420, 340, true, 0x00000000, 160);

The first four parameters in the constructor are the same as those specified when creating a Bitmap object: width, height, whether to use transparency, and background color. The last parameter sets the distance from the observer to the origin in 3D space, which affects projection distortion.

Particles are drawn to the board by the command

board.drawParticles(particles);

Here particles is an array containing the Particle3D objects. For more information on the parameters and methods of the RotatingParticleBoard class, see the comments in the source file.

Included in the same folder as the RotatingParticleBoard class is a simpler ParticleBoard class. This is the same except that it does not have mouse handlers and rotational methods within the drawParticles function. This class could be used in case a different rotational method is desired. This simpler class is still quaternion-based with respect to rotations. To draw particles to an instance of the ParticleBoard class, one must use the line:

board.drawParticles(particles,currentQ);

where currentQ is a unit quaternion (a way of representing a rotation) which defines the current rotational viewpoint.

Acknowlegments:

The idea of creating particles from the individual pixels of a bitmap was borrowed from Andre Michelle of http://void.andre-michelle.com/.

This application uses the Arcball rotation method of Ken Shoemake, published in Graphic Gems IV, Academic Press, 1994.

My thanks to Barbara Kaskosz and Doug Ensley of flashandmath.com for helpful tutorials on 3D methods.

Download

Download all the 'fla', 'as', and 'jpg' files corresponding to the applet in the zip file.

Back to Advanced and Experimental              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.