Fork me on GitHub
Not signed in (Sign In)

Welcome, Guest

Want to take part in these discussions? Sign in if you have an account, or apply for one below

    • CommentAuthorsandersnake
    • CommentTimeFeb 23rd 2008 edited
     
    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);
    }
    • CommentAuthorRichard
    • CommentTimeFeb 23rd 2008
     
    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();
    • CommentAuthorbandersen
    • CommentTimeFeb 26th 2008
     
    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?
    • CommentAuthorRichard
    • CommentTimeFeb 29th 2008 edited
     
    I'm not aware of this and can't reproduce it. What platform, browser and flash player version are you using?
    • CommentAuthorbandersen
    • CommentTimeMar 2nd 2008
     
    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 <http://ripple.ca> and looking at the Feb. 24th entry titled "Pretty Math".
    • CommentAuthorRichard
    • CommentTimeMar 3rd 2008
     
    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.
    • CommentAuthorbandersen
    • CommentTimeMar 3rd 2008
     
    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.
    • CommentAuthorbandersen
    • CommentTimeMar 3rd 2008
     
    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. :-)
    • CommentAuthorRichard
    • CommentTimeMar 3rd 2008
     
    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.
    • CommentAuthorbandersen
    • CommentTimeMar 4th 2008
     
    Thanks again, Richard.
    • CommentAuthormankica
    • CommentTimeSep 11th 2010
     
    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?
    • CommentAuthorRichard
    • CommentTimeSep 12th 2010 edited
     
    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( );
    • CommentAuthormankica
    • CommentTimeSep 12th 2010
     
    That's great! Thank you!