We present a new entertaining particle effect: RGB sinks and springs. Motion of bitmap particles is determined by their RGB components and their proximity to color 'sinks'. Each red, green and blue sink, that flies by itself or can be dragged by hand, attracts and repels particles based on their color components. 'Springs' pull the particles back to their original position in a source bitmap. Experimenting with 'sinks' and 'springs' settings creates a multitude of dynamic particle effects. Click the screen shot below or this link to open the effect in a new window:
- Download well-commented source files corresponding to this effect: rgbsinks.zip
The engine behind the effect is the same as in our particle tutorial: Pixel Particles Made Simple - AS3 Flash Tutorial. Except that this time pixel particles come from a source bitmap similarly as in our very popular Color Fountain: Color Fountain - Interactive Particle Effect in AS3 Flash. Motion of the particles here is much more complex, though.
Each color on a computer display is composed of red, green, and blue components. In the effect presented here, the individual pixels of an image are made into particles, which are both attracted to and repelled by red, green, and blue 'color sinks'. The value of one of the three color components for a particle makes the particle attracted towards the color sink of the same color, but repelled (by a weaker amount) by the two color sinks of different colors. These forces are inverse-square forces, similar to gravity or electrical attraction. In addition, each pixel is anchored to its picture position by an invisible spring.
The buttons available allow you to move the sinks manually or let them fly around automatically, and let you turn on and off the spring and color forces. It's kind of fun to move the color sinks around by hand. When you move them quickly, the particles fall off.
It is important to realize that a 'particle' in our experiment 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 'particles' are instances of a custom RGBParticle AS3 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 RGBParticle 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.
A Few Related Flash and Math Particle Effects and Tutorials
Below are a few related effects. Some of them use pixel particles as the experiment presented here; some use diplay objects that are drawn into a BitmapData object via BitmapData.draw method.
- Pixel Particles Made Simple - AS3 Flash Tutorial
- Color Fountain - Interactive Particle Effect in AS3 Flash
- Waterfall Flash Effect - A Custom AS3 Waterfall Class
- Fading Trail Effect for Flash AS3 Particle Animations - a Simple Example
- 100,000 Glowing 3D Particles Run Smoothly in Flash Player 10.1
- Astronaut - 3D Particle Effect in AS3 Flash CS4
- Flower Twist – Interactive 3D Bitmap Particles in AS3
- Nova - Cosmic Interactive Particle Effect in AS3 Flash