The Effect and Comments

We present a new interactive particle effect: Color Fountain. The motion of particles that is detemined by their positions but also by color values of neighboring pixels. Click the screen shot below or this link to open the effect in a new window:

Download

  • Download all source files corresponding to this effect: colorfount.zip

Comments

We call the effect Color Fountain as the acceleration and the velocity of each particle depend not only on its position in the undelying BitmapData object, but also on the particle's color and the colors of neighboring pixels. See the code for repel/attract interaction between color channel values.

Many of our Flash and Math particle effects are rather involved; most of them are 3D effects. The Color Fountain effect presented here is relatively simple and it is a 2D effect. Because of its simplicity (except perhaps for the motion part), the effect provides a good illustration of the idea behind pixel particles.

A 'particle' is not a display object. A 'particle' has a color and a position, and that is it. A 'particle' appears on the screen as we assign its color to the pixel at the corresponding position in the BitmapData object of a Bitmap that is on the Display List. More precisely, our 'paticles' are instances of a custom Particle2D class which, in addition to color and position, assigns to each particle velocity and acceleration.

Another aspect worth mentioning is using a 'list' of pixels rather than an Array. Each instance of Particle2D class has also the property 'next'. That allows us to create a list of particles without using Arrays: We create 'firstParticle', then its 'next' particle etc. With large number of particles such lists perfom faster than Arrays.

Both the idea of a pixel particle and a list of particles deserve a separate simple tutorial, which we will post soon.

A Few Related Flash and Math Particle Effects and Tutorials

Below are a few related effects. Some of them use pixel particles; some use diplay obejects that are drawn into a BitmapData object via BitmapData.draw method.

Back to Flash CS4 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.