Mar 25, 2009

Processing "FireCube" example ported to ActionScript 3.0

Processing example FireCube is so interesting to me. I ported it to ActionScript 3.0.

The result is...

Performance improvement

Processing version calculates every pixel color when

  • creating noise,
  • combining values from adjacent pixels and
  • converting color.

So I implement it as follows:

  • creating noise -> BitmapData.noise()
  • combining values from adjacent pixels -> ConvolutionFilter
  • converting color -> BitmapData.paletteMap()

Difficulty

HSV color space is not supported in AS3! I created a function called HSVtoRGB.

Drawing a cube was a pain. So, I changed a cube to circle...

Here is the code: (83 lines)

  1. // Processing FireCube (AS3 version)
  3. package {
  4. import flash.display.*;
  5. import flash.filters.*;
  6. import flash.geom.*;
  7.  
  8. public class FireCube extends Sprite{
  9.     private const WIDTH:int = 200;
  10.     private const HEIGHT:int = 150;
  11.  
  12.     public function FireCube(){
  13.         stage.align = "TL";
  14.         stage.scaleMode = "noScale";
  15.         scaleX = scaleY = 2;
  16.  
  17.         // Create circle
  18.         var circle:Sprite = new Sprite();
  19.         circle.graphics.beginFill(0x808080);
  20.         circle.graphics.drawCircle(0, 0, 10);
  21.         circle.graphics.endFill();
  22.  
  23.         // Create buffered image
  24.         var fire:BitmapData = new BitmapData(WIDTH, HEIGHT, false, 0);
  25.         var pg:BitmapData = fire.clone();
  26.         var noiseBmd:BitmapData = new BitmapData(WIDTH, 1);
  27.  
  28.         var bmp:Bitmap = new Bitmap(pg);
  29.         addChild(bmp);
  30.  
  31.         // Generate the palette
  32.         var r:Array = [], g:Array = [], b:Array = [];
  33.         for(var x:int = 0; x < 256; x++) {
  34.             //Hue goes from 0 to 85: red to yellow
  35.             //Saturation is always the maximum: 255
  36.             //Lightness is 0..255 for x=0..128, and 255 for x=128..255
  37.             HSVtoRGB(x / 3, 1, Math.min(x * 3 / 255.0, 1), r, g, b);
  38.         }
  39.  
  40.         // Use ConvolutionFilter to calculate for every pixel
  41.         var filter:ConvolutionFilter = new ConvolutionFilter(3, 3, [0, 0, 0, 16, 16, 16, 0, 16, 0], 65);
  42.  
  43.         // Prepare points and matrix
  44.         var matrix:Matrix = new Matrix();
  45.         var pt0:Point = new Point(0, HEIGHT - 1);
  46.         var pt1:Point = new Point(0, -1);
  47.         var pt2:Point = new Point(0, 1);
  48.  
  49.         // Do loop
  50.         addEventListener("enterFrame", function(event:*):void{
  51.             // Randomize the bottom row of the fire buffer
  52.             noiseBmd.noise(Math.random() * 0xffffffff, 0, 190, 7, true);
  53.             fire.copyPixels(noiseBmd, noiseBmd.rect, pt0);
  54.  
  55.             // Display circle
  56.             matrix.tx = mouseX;
  57.             matrix.ty = mouseY;
  58.             fire.draw(circle, matrix);
  59.  
  60.             // Add pixel values around current pixel
  61.             fire.applyFilter(fire, fire.rect, pt1, filter);
  62.  
  63.             // Output everything to screen using our palette colors
  64.             pg.paletteMap(fire, fire.rect, pt2, r, g, b);
  65.         });
  66.     }
  67.  
  68.     // AS3 does not natively support HSV...  :-(
  69.     private function HSVtoRGB(h:int, s:Number, v:Number, r:Array, g:Array, b:Array):void {
  70.         if (h < 60) {
  71.             r.push((v * 255) << 16);
  72.             g.push((v * (1 - (1 - h / 60.0) * s) * 255) << 8)
  73.             b.push(v * (1 - s) * 255);
  74.         } else if (h < 120) {
  75.             r.push((v * (1 - (-h / 60.0 - 1) * s) * 255) << 16);
  76.             g.push((v * 255) << 8);
  77.             b.push(v * (1 - s) * 255);
  78.         } else {
  79.             throw Error('not implemented');
  80.         }
  81.     }
  82. }
  83. }