But, oh well, I didn’t make the finals :( And I don’t plan on entering it again. Although after seeing the source of the finalists I assume I would even be able to add more features. Which would be using techniques that I assumed were frowned upon ;)

So, because of the length of some lines, no code in this post, only a link to the source.
And this is the resulting swf file.

I hope someone gets something out of this, cause I sure didn’t :D

I had a little fun with particles in AS3 the past days. I wrote a small piece based on my Processing port framework that traces the paths of particles. The particles pick up color from a given input texture. As they move, they plot their color onto the canvas. Although i added the condition that the color is only plotted if the target pixel is darker than the particle color. This results in a nice glowing effect around the outline of the image.
I built the swf files against Flash Player 10 this time. There is actually no need at all to do so, but i just couldn’t resist Vector. Arrays are so dirty :(

Here is the larger version with the complete blog logo. ;)

And here’s some source to go with it. Although it’ll hardly compile outside of the Processing Port framework ;D But since i moved servers my SVN repository isn’t publicly available anymore. So if anyone has any interest in the complete source, i’ll wrap it up and put it online ;)

Particle.as

package org.dirty_dirtymotherfucker.tracer {
  import flash.display.BitmapData;
  import flash.geom.Point;
  import flash.geom.Rectangle;
  import org.dirty_dirtymotherfucker.processing.*;
  
  public class Particle {
    
    public var position_x:Number;
    public var position_y:Number;
    public var direction_x:Number;
    public var direction_y:Number;
    public var color:uint;
    public var life:Number;
    public var source:BitmapData;
    public var randomSource:BitmapData;
    
    public function Particle( source:BitmapData, randomSource:BitmapData, sourceOffset:uint ) {
      this.source = source;
      if( Tracer.USE_PERLIN_NOISE ) {
        this.randomSource = new BitmapData( randomSource.width, 1, false );
        this.randomSource.copyPixels( randomSource, new Rectangle( 0, sourceOffset, randomSource.width, 1 ), new Point( 0, 0 ) );
      }
      birth();
    }
    
    public function birth( ):void {
      life        = Tracer.MAX_PARTICLE_LIFE;
      position_x  = MathHelper.randomRange( -Tracer.CANVAS_SIZE_X, Tracer.CANVAS_SIZE_X );
      position_y  = MathHelper.randomRange( -Tracer.CANVAS_SIZE_Y, Tracer.CANVAS_SIZE_Y );
      direction_x = MathHelper.randomRange( -1.0, 1.0 );
      direction_y = MathHelper.randomRange( -1.0, 1.0 );
      color       = source.getPixel32( position_x, position_y );
    }
    
    public function travel( source:BitmapData, canvas:BitmapData, blend:Number ):void {
      if( Tracer.USE_PERLIN_NOISE ) {
        direction_x += ( ColorHelper.getR( randomSource.getPixel( life * 10, 0 ) ) - 128 ) / 256;
        direction_y += ( ColorHelper.getG( randomSource.getPixel( life * 10, 0 ) ) - 128 ) / 256;
      } else {
        direction_x += MathHelper.randomRange( -0.1, 0.1 );
        direction_y += MathHelper.randomRange( -0.1, 0.1 );
      }
      
      // normalize direction
      var len:Number = Math.sqrt( direction_x * direction_x + direction_y * direction_y );
      direction_x /= len;
      direction_y /= len;
      
      position_x += direction_x;
      position_y += direction_y;
      life -= 0.1;
      //if( 0 == color ) life = 0;
      
      var sourceColor:uint = source.getPixel32( position_x, position_y );
      var canvasColor:uint = canvas.getPixel32( position_x, position_y );
      
      if( sourceColor != canvasColor ) {
        color = ColorHelper.blend( color, sourceColor, blend );
      
        var colorFit:Boolean = ColorHelper.getR( ColorHelper.toGrayScale( color ) ) > ColorHelper.getR( ColorHelper.toGrayScale( canvasColor ) );
        if( 0 != ColorHelper.getA( color ) && colorFit ) {
          canvas.setPixel32( position_x, position_y, ColorHelper.blend( color, canvasColor, 25 ) );
          //canvas.setPixel32( position.x, position.y, color );
        }
      }
      
      if( 0 > position_x || position_x > Tracer.CANVAS_SIZE_X || 0 > position_y || position_y > Tracer.CANVAS_SIZE_Y || 0 >= life ) birth();
    }
    
  }
  
}

Tracer.as

package org.dirty_dirtymotherfucker.tracer {
  
  import flash.display.*;
  import flash.events.*;
  import flash.geom.Matrix;
  import flash.geom.Point;
  import flash.geom.Rectangle;
  import flash.net.URLLoader;
  import flash.net.URLRequest;
  
  import org.dirty_dirtymotherfucker.processing.*;
  
  /**
   * The main implementation of the Tracer project
   */
  public class Tracer extends BlogSprite {
    
    // Main application settings
    
    public static const CANVAS_BACKGROUND_COLOR:uint  = 0xFF000000;
    
    public static const UPDATES_PER_SECOND:uint       = 1200;
    
    public static const ITERATIONS_PER_UPDATE:uint    = 10;
    
    public static const CANVAS_SIZE_X:uint            = 466;// 840;
    public static const CANVAS_SIZE_Y:uint            = 220;
    
    public static const ADDITIVE_BLENDING:Boolean     = true;
    public static const SUBTRACTIVE_BLENDING:Boolean  = false;
    private static const MAX_ITERATIONS:uint          = 0;// 120 * 20;
    
    public static const MAX_PARTICLE_LIFE:Number      = 100;
    public static const NUM_PARTICLES:int             = 1000;
    
    public static const USE_PERLIN_NOISE:Boolean      = false;
    
    private var iterationCount:int = 0;
    
    private var loader:Loader;
    private var source:BitmapData;
    private var randomSeed:BitmapData;
    
    private var particles:Vector.<Particle>;
    
    private var blend:Number;
    
    public function Tracer():void {
      ColorHelper.loadPalette( );
      
      super( CANVAS_SIZE_X, CANVAS_SIZE_Y, CANVAS_BACKGROUND_COLOR );
      
      loader = new Loader();
      //loader.load( new URLRequest( "map.png" ) );
      loader.load( new URLRequest( "http://www.dirty-motherfucker.org/blog/wp-content/uploads/2008/11/motherfucking.png" ) );
      
      loader.contentLoaderInfo.addEventListener( Event.COMPLETE, drawMap );
    }
    
    override protected function onDraw( event:TimerEvent ):void {
      canvas.lock();
      for( var iteration:uint = 0; iteration < ITERATIONS_PER_UPDATE; ++iteration ) {
        // draw
        if( null == loader.content ) break;
        for each( var particle:Particle in particles ) {
          particle.travel( source, canvas, blend );
        }
        
        blend += 0.06;
        if( blend >= 255 ) stopApp();
        
        // cycle limiter
        if( MAX_ITERATIONS > 0 && ++iterationCount > MAX_ITERATIONS ) {
          restart();
        }
      }
      canvas.unlock();

    }
    
    override protected function startApp( updatesPerSecond:uint = 0 ):void {
      super.startApp( UPDATES_PER_SECOND );
      
      particles = new Vector.<Particle>();
      
      blend = 10;
      
      iterationCount = 0;
      
      canvas.fillRect( new Rectangle( 0, 0, CANVAS_SIZE_X, CANVAS_SIZE_Y ), CANVAS_BACKGROUND_COLOR );
      
      initContent();
    }
    
    private function drawMap( e:Event ):void {
      loader.removeEventListener( Event.COMPLETE, drawMap );
      
      initContent();
    }
    
    private function initContent():void {
      if( null == loader ) return;
      source = new BitmapData( CANVAS_SIZE_X, CANVAS_SIZE_Y, true, 0x00000000 );
      var matrix:Matrix = new Matrix();
      matrix.translate( 0, CANVAS_SIZE_Y / 2 - loader.height / 2 );
      source.draw( loader, matrix );
      
      if( USE_PERLIN_NOISE ) {
        randomSeed = new BitmapData( MAX_PARTICLE_LIFE * 10, NUM_PARTICLES, false, 0x000000 );
        randomSeed.perlinNoise( MAX_PARTICLE_LIFE * 10, NUM_PARTICLES, 8, Math.random() * uint.MAX_VALUE, true, true, BitmapDataChannel.GREEN | BitmapDataChannel.RED, false );
      }
      
      for( var i:uint = 0; i < NUM_PARTICLES; ++i ) {
        particles.push( new Particle( source, randomSeed, i ) );
      }
      
    }

  }
  
}

• Exporting a movie from Flash
• Using a SWF to movie converter
• Screen capture

Now let’s break those down.

• Exporting a movie from Flash
  - Doesn’t play sub-movieclip animations
• Using a SWF to video converter
  - Some have limited encoding support
  - Some have really bad encoding quality
  - Some have poor playback performance and the result looks shitty
  - Some also don’t play sub-movieclip animations
• Screen capture
  - Suffers from the same encoding and playback problems as converters

So, after trying all of the above on a project at hand i was rather disappointed to see that all the solution i tried were basically shit. The animation at hand had 1024×768 dimensions and only in Flash player 10 it played with reasonable speed. So when i added screen capture into the mix the result looked like crap.

So i rolled my own converter. And the goals were clear:

• I want to capture every single frame of the animation
• I want the highest quality possible
• I want to use the vector scaling of flash to achieve my target size to avoid bitmap scaling later on in the process.

Now what i ended up with is a converter that just writes out every single frame as PNG, no sound, no direct video. But capturing the sound is extremely easy and so is converting a PNG sequence into a movie.

So here is how it’s done.
At first i tried to gotoAndStop( ++frame ); in a loop and writing out the frames, but this results in sub-movieclip animations not being played back.
So what you have to do is just play the movie. But you place a listener on it for Event.ENTER_FRAME. If your host application runs at the same frame rate you can also place the listener on the host application (which is what I’ve done in my reference implementation).

Now in the event listener you just .draw into a BitmapData object, encode it to PNG (using the AsPngEncoder from the AsWing project for example) and then write it to disk.
And this is where you get problems. Cause Flash itself won’t let you write to disk. I had 2 solutions to that problem. I used SWFStudio to compile a .exe that could write binaries to disk and i wrote one version in AIR.

Feel free to look at both implementations, but keep in mind that they are basically proof-of-concept, look like shit and are almost unuseable.

The SWFStudio version expects the name of the swf as the first command-line parameter (which can’t include spaces). The second and third parameter are the width and height. The last parameter is the number of frames to write.

The AIR version includes a GUI to set the input movie and output folder.

Have fun!

SWFStudio Version
Adobe AIR Version

As always, I also provide a larger version.

You can also dig out the source from the Processing repository, but it’s now buried under the more recent revision of the effect i was actually going for. So if you’re interested, better drop me a line ;)

PureMVC-Command.as.fdt
PureMVC-Mediator.as.fdt
PureMVC-Proxy.as.fdt

I hope it helps someone ;)

@echo off

set asdoc_bin="E:\projects\flex_sdk_3\bin\asdoc.exe"
set aswing_path="E:\projects\aswing\trunk\AsWing\bin"

%asdoc_bin% -doc-sources org\dirty_motherfucker\. -main-title "My ActionScript Project" -output "doc" -compiler.library-path %aswing_path%

pause

It also points asdoc to the bin directory of AsWing, where it will find the .swc files needed so it can fully understand each part of the sources in my namespace.
If you use several libraries, you will have to supply the library paths as well.

Now, let’s say you don’t have every library available as .swc and you also don’t feel like compiling one. Then you’d use -compiler.source-path. Here is an example of a project that uses more libraries.

@echo off

set asdoc_bin="E:\projects\flex_sdk_3\bin\asdoc.exe"
set aswing_path="E:\projects\aswing\trunk\AsWing\bin"
set aswingkit_path="E:\projects\AsWingKit\src"
set puremvc_path="E:\projects\PureMVC\src"
set tweenlite_path="E:\projects\TweenFilterLiteAS3"

%asdoc_bin% -doc-sources src\org\dirty_motherfucker -main-title "Content Delivery Framework" -output "doc" -compiler.library-path %aswing_path% -compiler.source-path %puremvc_path% %aswingkit_path% %tweenlite_path% src\ -warnings

pause

Also, note in this second example that i include src\ in the source paths. I only generate the documentation for the files in my namespace, but those use source file which reside in the same project directory, thus you should include the whole source directory to make sure everything runs smoothly.

float tinc = ot+(1.1-t/num)*2*t*TWO_PI/num;

which i ported to:

var tinc:Number = ot + ( 1.1 - cityIdx / NUM_CITIES ) * 2 * cityIdx * MathHelper.TWO_PI / NUM_CITIES;

Now cityIdx (t) and NUM_CITIES (num) are both integers. Java (Processing) will correctly do the integer division (which always results in 0). Thus the whole term “(1.1-t/num)” always equals 1.1.
Now the Flex compiler has a different opinion on how this should be evaluated. The presence of 1.1 makes it cast cityIdx and NUM_CITIES to Number as well.

This whole drama led to further errors in the original port. You can grab the fixed source from svn://dirty-motherfucker.org:8888/processing/trunk

Here are the new stand alone versions:
Buddahbrot
Happy Place
Sand Traveler
Substrate

For this one i have to credit quite a few people.
As always, i started out with the Processing source by Jared Tarbell. He based his code on an implementation by Paul Bourke, who based his work on a technique invented by Melinda Green.

It’s pretty much a straight ahead port of Tarbell’s code. Nothing to say about it. Click it to activate it. This is the version with a bailout value of 20 (nice looking results fast).

I didn’t package up a .zip with the source. But you can get the latest versions of all my processing ports from: svn://dirty-motherfucker.org:8888/processing/trunk
I also changed some of the other ports in the meanwhile. Some small bugs slipped in the versions i uploaded to the blog. So if you’re interested, be sure to grab the latest sources from the repository.

I saved one of my favorites by Jared Tarbell’s for now. The algorithm amazed me almost as much as Substrate did, but when i decided to port Tarbell’s works i knew i could put a little sugar into this one.

I started converting it straight ahead but i also added new blending modes. This implementation is basically Tarbell’s third variation of the original implementation. I made it so that the traveler’s sandpainters will either pick additive or subtractive blending. This leads to some pretty nice results.

I didn’t add a smaller version inside this post as it needs some time to develop and it also needs a certain size so you can fully appreciate it. So please check out the large version (1000×1000).

Be sure to also grab the source and check out the originals by Tarbell.

I also added a preview version:
]]> http://dirty-motherfucker.org/blog/2008/05/22/jared-tarbells-sand-traveller-in-as3/feed/ 0 http://dirty-motherfucker.org/blog/2008/05/15/jared-tarbells-happy-place-in-as3/ http://dirty-motherfucker.org/blog/2008/05/15/jared-tarbells-happy-place-in-as3/#comments Thu, 15 May 2008 12:54:04 +0000 gencha http://dirty-motherfucker.org/blog/?p=56 2008-05-26: I fixed some parts of this port. For further details check the updated works post.

I finished another one of Jared Tarbell’s works. Based on the experience with Substrate, this port was straight-forward.

I also just gave the new Flash Player 10 Beta a run for it’s money. I can only recommend installing it for a test runs on these Processing ports. On my Core2 Duo E6600 with FP9 one core is usually maxed out drawing these demos with reasonable speed. With FP10 i get fluid performance with CPU time to spare.

So here it is (click to start):

There is also a larger version (900×900).

As before you can also grab the source code.