Flint Particle System Forum - RGB particle fun

RGB particle fun

sandersnake — Sat, 23 Feb 2008 10:46:40 +0000

First of all great stuff your sharing with us Richard!

I experimented with it and made a nice RGB particle experiment.
Check it out at www.actionscripter.nl

I think the blur filter also could be implemented with a bitmapemitter instead of the enter frame loop.
If you got any suggestions?

Source Code:

import flash.geom.Point;
import org.flintparticles.actions.*;
import org.flintparticles.counters.*;
import org.flintparticles.displayObjects.*;
import org.flintparticles.emitters.*;
import org.flintparticles.initializers.*;
import org.flintparticles.zones.*;

import com.afcomponents.common.display.*;
import com.afcomponents.common.graphics.*;

var emitter:DisplayObjectEmitter = new DisplayObjectEmitter();
emitter.setCounter( new Blast( 50 ) );
emitter.addInitializer( new ImageClass( Dot, 1 ) );
var lz:LineZone = new LineZone( new Point( stage.stageWidth/3, 3*stage.stageHeight/4 ), new Point( 2*stage.stageWidth/3, 3*stage.stageHeight/4) );
emitter.addInitializer( new Position( lz ) );
emitter.addInitializer( new Velocity( new PointZone( new Point( 0, 25 ) ) ) );
emitter.addInitializer( new ColorInit( 0xFF00FF00, 0xFFFFFFFF ) );
emitter.addAction( new Move() );
emitter.addAction( new Accelerate(0, 0) );
emitter.addAction( new GravityWell(25, stage.stageWidth/2, 2*stage.stageHeight/3) );

addChild( emitter );
emitter.start();
emitter.runAhead( 0 );

var emitter2:DisplayObjectEmitter = new DisplayObjectEmitter();
emitter2.setCounter( new Blast( 50 ) );
emitter2.addInitializer( new ImageClass( Dot, 1 ) );
var lz2:LineZone = new LineZone( new Point(  stage.stageWidth/4, stage.stageHeight/3 ), new Point(  stage.stageWidth/4, stage.stageHeight/2) );
emitter2.addInitializer( new Position( lz2 ) );
emitter2.addInitializer( new Velocity( new PointZone( new Point( 50, 0 ) ) ) );
emitter2.addInitializer( new ColorInit( 0xFF0000FF, 0xFFFFFFFF ) );
emitter2.addAction( new Move() );
emitter2.addAction( new GravityWell(15, stage.stageWidth/4, stage.stageHeight/3) );

addChild( emitter2 );
emitter2.start();
emitter2.runAhead( 0 );

var emitter3:DisplayObjectEmitter = new DisplayObjectEmitter();
emitter3.setCounter( new Blast( 50 ) );
emitter3.addInitializer( new ImageClass( Dot, 1 ) );
var lz3:LineZone = new LineZone( new Point( 3*stage.stageWidth/4, stage.stageHeight/3 ), new Point( 3*stage.stageWidth/4, stage.stageHeight/2) );
emitter3.addInitializer( new Position( lz3 ) );
emitter3.addInitializer( new Velocity( new PointZone( new Point( -50, 0 ) ) ) );
emitter3.addInitializer( new ColorInit( 0xFFFF0000, 0xFFFFFFFF ) );
emitter3.addAction( new Move() );
emitter3.addAction( new GravityWell(15, 3*stage.stageWidth/4, stage.stageHeight/3) );

addChild( emitter3 );
emitter3.start();
emitter3.runAhead( 0 );

var bmd:BitmapData = new BitmapData(550, 400, true, 0xFFFFFF);
var bm:Bitmap = new Bitmap(bmd);
addChild(bm);

var bf:BlurFilter = new BlurFilter(2, 2, 1);

addEventListener(Event.ENTER_FRAME, loop);

function loop(e:Event):void
{
	bmd.draw(emitter);
	bmd.draw(emitter2);
	bmd.draw(emitter3);	
	bmd.applyFilter(bmd, bmd.rect, new Point(0,0), bf);
	//bmd.applyFilter(bmd, bmd.rect, new Point(0,0), cmf);
	//bmd.scroll(0, 3);
}

RGB particle fun

Richard — Sat, 23 Feb 2008 14:30:31 +0000

I love it.

As you say, you could use a BitmapEmitter and place the blur inside it. The code would look like this.

import flash.geom.Point;
import org.flintparticles.actions.*;
import org.flintparticles.counters.*;
import org.flintparticles.displayObjects.*;
import org.flintparticles.emitters.*;
import org.flintparticles.initializers.*;
import org.flintparticles.zones.*;

var emitter:BitmapEmitter = new BitmapEmitter();
emitter.setCounter( new Blast( 50 ) );
emitter.addInitializer( new SharedImage( new Dot( 1 ) ) );
var lz:LineZone = new LineZone( new Point( stage.stageWidth/3, 3*stage.stageHeight/4 ), new Point( 2*stage.stageWidth/3, 3*stage.stageHeight/4) );
emitter.addInitializer( new Position( lz ) );
emitter.addInitializer( new Velocity( new PointZone( new Point( 0, 25 ) ) ) );
emitter.addInitializer( new ColorInit( 0xFF00FF00, 0xFFFFFFFF ) );
emitter.addAction( new Move() );
emitter.addAction( new Accelerate(0, 0) );
emitter.addAction( new GravityWell(25, stage.stageWidth/2, 2*stage.stageHeight/3) );
emitter.addFilter( new BlurFilter( 2, 2, 1 ) );
addChild( emitter );
emitter.start();

var emitter2:BitmapEmitter = new BitmapEmitter();
emitter2.setCounter( new Blast( 50 ) );
emitter2.addInitializer( new SharedImage( new Dot( 1 ) ) );
var lz2:LineZone = new LineZone( new Point( stage.stageWidth/4, stage.stageHeight/3 ), new Point( stage.stageWidth/4, stage.stageHeight/2) );
emitter2.addInitializer( new Position( lz2 ) );
emitter2.addInitializer( new Velocity( new PointZone( new Point( 50, 0 ) ) ) );
emitter2.addInitializer( new ColorInit( 0xFF0000FF, 0xFFFFFFFF ) );
emitter2.addAction( new Move() );
emitter2.addAction( new GravityWell(15, stage.stageWidth/4, stage.stageHeight/3) );
emitter2.addFilter( new BlurFilter( 2, 2, 1 ) );
addChild( emitter2 );
emitter2.start();

var emitter3:BitmapEmitter = new BitmapEmitter();
emitter3.setCounter( new Blast( 50 ) );
emitter3.addInitializer( new SharedImage( new Dot( 1 ) ) );
var lz3:LineZone = new LineZone( new Point( 3*stage.stageWidth/4, stage.stageHeight/3 ), new Point( 3*stage.stageWidth/4, stage.stageHeight/2) );
emitter3.addInitializer( new Position( lz3 ) );
emitter3.addInitializer( new Velocity( new PointZone( new Point( -50, 0 ) ) ) );
emitter3.addInitializer( new ColorInit( 0xFFFF0000, 0xFFFFFFFF ) );
emitter3.addAction( new Move() );
emitter3.addAction( new GravityWell(15, 3*stage.stageWidth/4, stage.stageHeight/3) );
emitter3.addFilter( new BlurFilter( 2, 2, 1 ) );
addChild( emitter3 );
emitter3.start();

RGB particle fun

bandersen — Tue, 26 Feb 2008 05:05:31 +0000

Beautiful work.
Right-clicking, then holding a bit before releasing on the GravityWells examples, I notice that the trails disappear and the number of particles decreases. Why is that?

RGB particle fun

Richard — Fri, 29 Feb 2008 19:15:06 +0000

I'm not aware of this and can't reproduce it. What platform, browser and flash player version are you using?

RGB particle fun

bandersen — Sun, 02 Mar 2008 22:34:53 +0000

Interesting. I see that the effect does not occur when I right-click and hold for a few seconds on your posted example, but on my blog, the same SWF shows the effect in both Firefox and Safari browsers. My platform is Mac OS X [Leopard]. My blog is Wordpress and the hosting server is Unix.

You can see the effect by visiting and looking at the Feb. 24th entry titled "Pretty Math".

RGB particle fun

Richard — Mon, 03 Mar 2008 14:21:52 +0000

This seems to be a mac only issue. I use a PC so it didn't occur for me but I just checked it on a friend's mac. On the mac, flash doesn't seem to send an enterFrame event while the right mouse button is down. Because of this, the emitter freezes until you release the mouse. Then the emitter jumps ahead to where it thinks it should be, causing a discontinuity in the particle motion. I recently added some code to limit the time it could jump ahead to three times the frame-rate to stop discontinuities when flash freezes, which is why the effect doesn't happen in the version on this site.

RGB particle fun

bandersen — Mon, 03 Mar 2008 16:08:27 +0000

Thanks, Richard! That seems a likely explanation. Much appreciated. And thanks in general for your excellent work here. I am learning a lot from it.

RGB particle fun

bandersen — Mon, 03 Mar 2008 16:37:53 +0000

One further thought, Richard. If the above mentioned effect were a Mac thing, how come the one displayed on your site doesn't display the same behavior, even though I am viewing it with a Mac browser?

No need to answer, if you feel you've wasted enough time on this. :-)

RGB particle fun

Richard — Mon, 03 Mar 2008 22:23:16 +0000

Because it uses newer code, as described in my explanation above. With the newer code, if the movie is interupted for a long period of time it picks up from where it was rather than jumping on ahead. If you grab the latest code from SVN (or get the next version I release as a download in a few days time) and rebuild your project you should find the effect goes away too.

RGB particle fun

bandersen — Tue, 04 Mar 2008 21:40:51 +0000

Thanks again, Richard.

RGB particle fun

mankica — Sat, 11 Sep 2010 21:43:26 +0100

How can I test this code posted in 2008 with new version of Flint particle system? Or where can I find an older version, one from 2008?

RGB particle fun

Richard — Sun, 12 Sep 2010 11:21:06 +0100

Hi

It won't work quite the same in the current version of Flint. The relationship between emitters and renderers was changed when version 2 was released.

If you want an earlier version of Flint, all versions are available here.

If you want to create the same effect but with the latest version of Flint, this will do it.

import org.flintparticles.common.counters.Blast;
import org.flintparticles.common.displayObjects.Dot;
import org.flintparticles.common.initializers.ColorInit;
import org.flintparticles.common.initializers.SharedImage;
import org.flintparticles.twoD.actions.Accelerate;
import org.flintparticles.twoD.actions.GravityWell;
import org.flintparticles.twoD.actions.Move;
import org.flintparticles.twoD.emitters.Emitter2D;
import org.flintparticles.twoD.initializers.Position;
import org.flintparticles.twoD.initializers.Velocity;
import org.flintparticles.twoD.renderers.BitmapRenderer;
import org.flintparticles.twoD.zones.LineZone;
import org.flintparticles.twoD.zones.PointZone;

import flash.display.Sprite;
import flash.filters.BlurFilter;
import flash.geom.Point;
import flash.geom.Rectangle;

var renderer : BitmapRenderer = new BitmapRenderer( new Rectangle( 0, 0, 550, 400 ), true );
renderer.addFilter( new BlurFilter( 2, 2, 1 ) );
addChild( renderer );

var emitter : Emitter2D = new Emitter2D( );
emitter.counter = new Blast( 50 );
emitter.addInitializer( new SharedImage( new Dot( 1 ) ) );
var lz : LineZone = new LineZone( new Point( stage.stageWidth / 3, 3 * stage.stageHeight / 4 ), new Point( 2 * stage.stageWidth / 3, 3 * stage.stageHeight / 4 ) );
emitter.addInitializer( new Position( lz ) );
emitter.addInitializer( new Velocity( new PointZone( new Point( 0, 25 ) ) ) );
emitter.addInitializer( new ColorInit( 0xFF00FF00, 0xFFFFFFFF ) );
emitter.addAction( new Move( ) );
emitter.addAction( new Accelerate( 0, 0 ) );
emitter.addAction( new GravityWell( 25, stage.stageWidth / 2, 2 * stage.stageHeight / 3 ) );
renderer.addEmitter( emitter );
emitter.start( );

var emitter2 : Emitter2D = new Emitter2D( );
emitter2.counter = new Blast( 50 );
emitter2.addInitializer( new SharedImage( new Dot( 1 ) ) );
var lz2 : LineZone = new LineZone( new Point( stage.stageWidth / 4, stage.stageHeight / 3 ), new Point( stage.stageWidth / 4, stage.stageHeight / 2 ) );
emitter2.addInitializer( new Position( lz2 ) );
emitter2.addInitializer( new Velocity( new PointZone( new Point( 50, 0 ) ) ) );
emitter2.addInitializer( new ColorInit( 0xFF0000FF, 0xFFFFFFFF ) );
emitter2.addAction( new Move( ) );
emitter2.addAction( new GravityWell( 15, stage.stageWidth / 4, stage.stageHeight / 3 ) );
renderer.addEmitter( emitter2 );
emitter2.start( );

var emitter3 : Emitter2D = new Emitter2D( );
emitter3.counter = new Blast( 50 );
emitter3.addInitializer( new SharedImage( new Dot( 1 ) ) );
var lz3 : LineZone = new LineZone( new Point( 3 * stage.stageWidth / 4, stage.stageHeight / 3 ), new Point( 3 * stage.stageWidth / 4, stage.stageHeight / 2 ) );
emitter3.addInitializer( new Position( lz3 ) );
emitter3.addInitializer( new Velocity( new PointZone( new Point( -50, 0 ) ) ) );
emitter3.addInitializer( new ColorInit( 0xFFFF0000, 0xFFFFFFFF ) );
emitter3.addAction( new Move( ) );
emitter3.addAction( new GravityWell( 15, 3 * stage.stageWidth / 4, stage.stageHeight / 3 ) );
renderer.addEmitter( emitter3 );
emitter3.start( );

RGB particle fun

mankica — Sun, 12 Sep 2010 15:25:17 +0100

That's great! Thank you!