Technically, this is a really stupid thing to do, and move over it isn't the cleverest thing to do, regardless though I've done it just for the hell of it.

The aim of this post is to prevent anybody else from making the same stupid mistakes! end product isn't too bad though.

To give a quick over view, Sound.extract() gives access to raw sound data, as a ByteArray of floats; typically you setup two sound objects, the first loads the sound data from source, the second requests sound data from the first at regular intervals, extracting 2048-8192 samples per request and then playing it - idea is that in the method that requests the samples you can quickly pre-process it before its played and make some nice effects.

So my illogical train of thought was to visualize the raw sound data in real time as it plays to create some nice effects.

The Numbers Game

Music in flash is sampled at 44100 Hz Stereo - 44100 samples per second,  per channel - we're getting it at intervals of either 2048, 4096 or 8192 samples - meaning our visualization can run at either 21.53fps,  10.76fps or 5.45fps - which lets be honest is hardly going to make a nice smooth effect is it.

So our only option is to somehow synchronize the "timeline" (the screen updating) with the raw sound being played.

The Approach

I decided the only real way to do this was to make a continual buffer of sound that could be read independently by both the SampleDataEvent and by my own code to do the visualizations - after some playing around with numbers I finally gathered that if one was to run at a framerate of 63fps and render the 700 samples per channel at a time then I'd be consuming (63*700 = 41000 Hz / samples per second) = the data in realtime.

To make this possible I needed some kind of fast buffer to store the data in, obvious choice was fast memory which is a ByteArray and can be read and written to directly.

More number came in to play when the size of the buffer needed calculated, had to be a multiple of both the render speed (700) and the data feed rate (2048); which is a buffer of 358400 samples, or sample requests. (358400/175 = 2048).

To get the data in to the buffer I was finding the next offset at which i should write the data to my buffer, sound.extract'ing the data in to the buffer and using a modulo to create wrap around so after 175 samples data was written back at the start.

This covers getting the sound in to a fast memory buffer without consuming too many resources, next up to get it out and render it!

The Rendering

Rendering uses the same idea of requesting samples from the buffer, however this time the magic number is (358400/700 =) 512.

I implemented a simple framecounter that increments each frame and resets to 0 every 512 frames (giving the loop on the buffer), then quickly read 700 pairs of samples from the buffer each frame.

The left channel float value is then scaled by 300 used as an X position, whilst the right channel creates the Y position - both x and y are then fed to setPixel() on BitmapData whilst a simple calculation of 0xFFFFFF*leftChannel / 2 sets the color value.

Each frame the 700 dual channel samples are rendered creating 700 realtime 2D particles (hopefully) in time with the sound, and a simple blur filter is used to clear the previous frame in a nicer way.

The Point

It's all stupid, pointless and just stick to computeSpectrum - you only get 256 samples rather than 700 but it's perfectly in time and allows you do something other than exactly 63 fps; further it'll always be in time with the music.

The Result

Well, it's here - I've got it tuned in to my other halfs radio station citybeat radio at the minute (which i wholeheartedly recommend for any electronic / trance music fans) and well.. here it is with source.

Other than the really obvious bit that its direct access to a block of ram/fast memory which works extremely quickly, there is one other small but vital detail that's haXe specific and makes a vast difference between alchemy and haxe.

The Big Difference

You can think of flash.Memory as a static ByteArray, thus it is accessible from both static class and instance methods.

Now, another feature which offers huge speed increases in haXe is inlining.

Spelling it out - You can only inline static private methods, flash.Memory is all static access. So stick all your data (or big chunks of it) in flash.Memory and then inline  most of your heavy number crunching class.

All inlined, all using fast memory = very very quick swfs!

Ideas and Tricks

First of all, get the thought of only being able to have one chunk or type of data in fast memory at a time, you can partition it up and load everything in there.

A common setup I use is to have the first 1024 bytes as fast storage for float, int, byte, uint variables, the next xxx-thousand bytes as raw bitmap data, then all the other data I may want - like a block of 500k x,y,z floats for 3d data, followed by a few lookup charts.

the first 1024 bytes as fast storage for float, int, byte, uint variables - because you can then access the most commonly used vars using small int offsets (0-255) - and since its a small int your using it avoids all stacks completely, the bytecode will only contain the opcode to get the value from fast memory followed by the offset actually in the bytecode - for anything 256 and over its going to hit the int stack to get the offset first (which is barely noticable, but you know every fraction counts)

the next xxx-thousand bytes as raw bitmap data - because you can then work on your bitmap data ultra fast and write it back to the BitmapData instance using setPixels; very fast indeed, faster than a fixed sized vector even.

then all the other data - this is partially obvious, what may not be is the use of lookup charts, but I'll cover that in a moment.

Accessing..

Remember flash.Memory differs from a byte array in that you have to add in the offset for each value you want to grab

• Byte = 1 Byte
• Int = 4 Bytes
• Float = 4 Bytes
• Double = 8 Bytes

To use flash.Memory with functions which require a ByteArray.. [ like BitmapData.getPixels() -  Sound.extract() ] .. you can access it directly from flash.system.ApplicationDomain.currentDomain.domainMemory for example:

// set position to start of the data we need
flash.system.ApplicationDomain.currentDomain.domainMemory.position = SOME_OFFSET;
// use the fast memory
bitmapData.setPixels( bitmapData.rect , flash.system.ApplicationDomain.currentDomain.domainMemory );

note: don't be fooled though, you can't simply call the functions on the bytearray in currentDomain, although it is the data that is in fast memory, it does not use the opcodes, which are what speed it up!

Lookup Charts

Often you'll find yourself calling the same code over and over and over; perhaps without realising just how much; consider we make an animation which uses perlin noise to generate 2d or 3d data - like this example - the example reads about 40k uint values from perlin noise, then converts each pixel to individual r,g,b values, then turns it in to a float -1 to 1 using a simple calculation. Thing is.. that means the same calculation runs 3x40000 times per frame at 50 frames a second.. 6 million times a second!

In this scenario, there are only 256 possible inputs to the calculation and 256 results - so rather than working it out 6 million times we can load it all in to a lookup chart, stick the lookup chart in fast memory and then lookup values rather than calculating - often you can really speed things up by doing this. Practical example with comments here.

Hope this is of use to somebody and clears things up a bit; I use the methods often so you'll see them in the source of my experiments.

Elliot Rock asked me 3 fantastic questions about my previous post, it's good information so best to share for all I think!

So the inline methods and variables is the main optimisation in the final version?

it's the only optimisation made, I simply added the "inline" keyword to 2 methods and all static vars.

Can you explain where and why the HaXe methods greatly improve performance please :)

haxe offers 3 main forms of performance optimisation (we're being swf specific here);

1. haXe produces bytecode/opcodes which are optimized better than the adobe compilers / mxmlc. This provides a small but significant increases in speed which all mount up. See the links at the foot of the page for more information.
2. haXe provides the ability to inline, which I'll explain further in a moment, this often gives a fantastic increase in speed.
3. haXe provides access to the new opcodes for fast memory access; the only other place to get them is through Alchemy.

I must stress that these are 3 minor benefits of haxe compared to the hundreds of others, but they are very good ones none the less!

I know inlines are so great but haven't found an explanation on why :)

The simple answer is it produces less and better optimized opcodes + reduces calls to the stack(s).

I'm going to jump straight in to full on detail here! from the examples in question, here is snippet of code from the non-optimised version:

Non-Optimized

private static var WIDTH : Int = 550;
// ...
po = pointToOffset( Std.int(realVector[a*3]) , Std.int(realVector[(a*3)+1]) , WIDTH );
// ...
private static function pointToOffset( vx : Int , vy : Int , vw : Int ) : UInt {

taking the single functional line only (the middle one) here is are the opcodes produced for it:

OLabel
OGetLex(Idx(62))
OFindProp(Idx(83))
OGetProp(Idx(83))
OReg(6)
OSmallInt(3)
OOp(OpIMul)
OGetProp(Idx(17))
OToNumber
OToInt
OFindProp(Idx(83))
OGetProp(Idx(83))
OReg(6)
OSmallInt(3)
OOp(OpIMul)
OSmallInt(1)
OOp(OpIAdd)
OGetProp(Idx(17))
OToNumber
OToInt
OGetLex(Idx(62))         // get name Identical
OGetProp(Idx(47))        // get property WIDTH
OCallProperty(Idx(67),3) // call pointToOffset with arg count: 3 (from previous uncommented opcodes)
OToUInt                  // set result as UInt
OToInt                   // set above as Int
OSetReg(5)               // store it in variable po

and here's the pointToOffset opcodes

OReg(1)
OReg(2)
OReg(3)
OOp(OpIMul)  // multiply argument 1 and 2
OOp(OpIAdd)  // add argument 3 to result of previous op
ORet         // return result

so.. it's going to get the static var WIDTH from the class, then pass it and the other 2 arguments from our vector through to pointToOffset, run all the pointToOffset code, get the result, convert it and store in variable po. *phew* quite a lot really.

Optimised

now let's look at the optimised version, remember the only thing to change here is the addition of the keyword "inline":

private static inline var WIDTH : Int = 550;
// ...
po = pointToOffset( Std.int(realVector[a*3]) , Std.int(realVector[(a*3)+1]) , WIDTH );
// ...
static inline function pointToOffset( vx : Int , vy : Int , vw : Int ) : UInt {

and the corresponding op codes (snipped as the rest if the same)

OToNumber
OToInt
OIntRef(Idx(4)) // value 550 on the int stack
OOp(OpIMul)     // multiply first two arguments (vector values)
OOp(OpIAdd)     // add the third (width)
OToInt          // set to int
OSetReg(5)      // store in po

the static var width and the function point to offset are removed and never called.

back to an english explanation, we've removed some normal but heavy operations and replaced them with 3 simple and light operations, giving us a big speed increase.

All credit to Nicolas the creator of haxe for this, it's amazing what he's done.

Reading

• http://ncannasse.fr/blog/flash_9_optimizations
• http://ncannasse.fr/blog/haxe_swc (specifically "More Optimizations")
• http://haxe.org/ref/inline

Hope that answers the questions, and thanks Elliot.

Ralph Hauwert created a great demo of the power of Flash 10 / PixelBender / Alchemy that you're probably familiar with, then Joa Ebert made a fantastic Flash 9 pure AS3 version that's very impressive, then I gave it a go with haXe and flash.Memory which turned out rather well too.

It's been bugging me for some time that the code just wasn't real world enough though - so I thought I'd give it a go using AS3 and flash 10, using only native methods and no fancy 3D calculations that us commoners don't quite get. In short I've stripped it down and turned it into a simple class which uses flash 10 Vectors and Matrix3D.

I've taken a different approach with these demo's, rather than all in realtime, you simply click and it runs the enterFrame code once and displays the time in ms that it took. There is however a final realtime version using this code at the end.

Four examples are provided, Pure AS3, then the same code converted to haxe, then the haxe "inline" keyword added and finally the whole thing working in realtime.

AS3 Flash 10 Version with Vector / Matrix3D

Here's the main source used:

private function enterFrameHandler( event : Event ): void {
 var d : Date = new Date();
 var t : Number = d.getTime();

 updateMatrix( mouseX , mouseY );
 _matrix.transformVectors( particleVector , realVector );

 var pxs : Vector.<uint> = new Vector.<uint>( PIXELS , true );
 var po : int = 0;
 var a : int = 0;

 while( a < PARTICLES ) {
   po = pointToOffset( int(realVector[a*3]) , int(realVector[(a*3)+1]) , WIDTH );
   if( 0 < po && po < PIXELS) {
     pxs[po] = increaseColor( pxs[po] );
   }
   a++;
 }
 // update display
 this.bitmapData.lock();
 this.bitmapData.setVector( this.bitmapData.rect , pxs );
 this.bitmapData.unlock( this.bitmapData.rect );

 d = new Date();
 textField.text = "single frame time: " + ( d.getTime() - t );
}

private function updateMatrix( mx : Number , my : Number ) : void {
 tx = tx + ((mx - tx)/10);
 ty = ty + ((my - ty)/10);
 _matrix.identity();
 _matrix.appendRotation( tx , Vector3D.Y_AXIS );
 _matrix.appendRotation( ty , Vector3D.X_AXIS );
 _matrix.appendTranslation( CX, CY, 10 );
}

private static function increaseColor( c : uint ) : uint {
 return c < MAXCOLOR ? c + SHADE : 0xFFFFFF;
}

private static function pointToOffset( vx : int , vy : int , vw : int ) : uint {
 return vx + ( vy * vw );
}

And here's the AS3 result (with full source)

The same code in haXe

next up I spent literally 2 minutes converting this to haXe syntax, changed no functionality - just slight syntax changes between the languages.

private function enterFrameHandler( event : Event ) : Void {
 var d : Date = Date.now();
 var t : Float = d.getTime();

 updateMatrix( mouseX , mouseY );
 _matrix.transformVectors( particleVector , realVector );

 var pxs : Vector<UInt> = new Vector<UInt>( PIXELS , true );
 var po : Int = 0;
 var a : Int = 0;

 while( a < PARTICLES ) {
   po = pointToOffset( Std.int(realVector[a*3]) , Std.int(realVector[(a*3)+1]) , WIDTH );
   if( 0 < po && po < PIXELS) {
     pxs[po] = increaseColor( pxs[po] );
   }
   a++;
 }
 // update display
 this.bitmapData.lock();
 this.bitmapData.setVector( this.bitmapData.rect , pxs );
 this.bitmapData.unlock( this.bitmapData.rect );

 d = Date.now();
 textField.text = "single frame time: " + ( d.getTime() - t );
}

private function updateMatrix( mx : Float , my : Float ) : Void {
 tx = tx + ((mx - tx)/10);
 ty = ty + ((my - ty)/10);
 _matrix.identity();
 _matrix.appendRotation( tx , Vector3D.Y_AXIS );
 _matrix.appendRotation( ty , Vector3D.X_AXIS );
 _matrix.appendTranslation( CX, CY, 10 );
}

private static function increaseColor( c : UInt ) : UInt {
 return c < MAXCOLOR ? c + SHADE : 0xFFFFFF;
}

private static function pointToOffset( vx : Int , vy : Int , vw : Int ) : UInt {
 return vx + ( vy * vw );
}

And here's the identical haXe result (with full source)

Optimized haXe Version

Next up I spent another minute optimizing (literally, one minute) - haXe supports inlining of variables and methods, so I added the inline keyword to the static vars and two of the static methods (increaseColor and pointToOffset)

private function enterFrameHandler( event : Event ) : Void {
 var d : Date = Date.now();
 var t : Float = d.getTime();

 updateMatrix( mouseX , mouseY );
 _matrix.transformVectors( particleVector , realVector );

 var pxs : Vector<UInt> = new Vector<UInt>( PIXELS , true );
 var po : Int = 0;
 var a : Int = 0;

 while( a < PARTICLES ) {
   po = pointToOffset( Std.int(realVector[a*3]) , Std.int(realVector[(a*3)+1]) , WIDTH );
   if( 0 < po && po < PIXELS) {
     pxs[po] = increaseColor( pxs[po] );
   }
   a++;
 }
 // update display
 this.bitmapData.lock();
 this.bitmapData.setVector( this.bitmapData.rect , pxs );
 this.bitmapData.unlock( this.bitmapData.rect );

 d = Date.now();
 textField.text = "single frame time: " + ( d.getTime() - t );
}

private function updateMatrix( mx : Float , my : Float ) : Void {
  tx = tx + ((mx - tx)/10);
  ty = ty + ((my - ty)/10);
  _matrix.identity();
  _matrix.appendRotation( tx , Vector3D.Y_AXIS );
  _matrix.appendRotation( ty , Vector3D.X_AXIS );
  _matrix.appendTranslation( CX, CY, 10 );
}

static inline function increaseColor( c : UInt ) : UInt {
  return c < MAXCOLOR ? c + SHADE : 0xFFFFFF;
}

static inline function pointToOffset( vx : Int , vy : Int , vw : Int ) : UInt {
 return vx + ( vy * vw );
}

And here's the inlined haXe result (with full source)

Summary

In under five minutes and with tiny code changes we've gained well over 100% speed increase; using nothing fancy and the speed rivals all the heavily optimized versions using every trick in the book.

The final result (simply with the event listener changed to Event.ENTER_FRAME and fps added) is available here.

In this post I'm looking at the layout of BitmapData and the fastest way to access / manipulate the raw data. The syntax used is haXe, however the information is good for as3/flash10 right up until the last section which deals with using fast memory and is haXe/Alchemy specific.

The Simple Stuff

A BitmapData 5px by 5px will comprise of 25 pixels; the flash API is a bit misleading as to the point coordinate system used,
as such here's the layout of the data contained:

       X
   0,-,-,-,-
   -,1,-,-,-
 Y -,-,2,-,-
   -,-,-,3,-
   -,-,-,-,4

the upper left corner is point(0,0) - the lower right is point(4,4); [not 1,1 to 5,5 as the manual suggests]

to access the data I'm going to be using three specific methods:

• BitmapData.getPixel( x, y );
• BitmapData.getPixels( rect );
• BitmapData.getVector( rect );

the data returned by getPixels and getVector is in array format (ByteArray and Vector<UInt> respectively), both are 0 indexed with 25 entries.

Pixel values run from left to right, so the 5px example above converts to

index[0] = point(0,0)
index[1] = -
index[2] = -
index[3] = -
index[4] = -
index[5] = -
index[6] = point(1,1)
index[7] = -
index[8] = -
index[9] = -
index[10] = -
index[11] = -
index[12] = point(2,2)
index[13] = -
index[14] = -
index[15] = -
index[16] = -
index[17] = -
index[18] = point(3,3)
index[19] = -
index[20] = -
index[21] = -
index[22] = -
index[23] = -
index[24] = point(4,4)

Converting between X,Y and Offsets

to work with the data in its raw format we're going to need some helper functions/code to convert between point(x,y) and offset.

X,Y to Offset

function pointToOffset( x : Int , y : Int , width : Int ) : Int {
    return (y * width) + x;
}

thus for point(3,3):

    (3 x 5) + 3 = 18

Offset to X,Y

function offsetToPoint( offset : Int , width : Int ) : Point {
    return new Point( offset%width , Std.int(offset/width) );
}
// or
bitmapData.getPixel( offset%width , Std.int(offset/width) );

thus for offset 18 :

    x: 18%5 = 3
    y: 18/5 = 3

Speed Tests

For each of the three methods [ getPixel(x,y); getPixels(rect); getVector(rect); ] I've done a lot of testing to see which is fastest. All tests use a non transparent bitmapData of 1,920,000 pixels (1600x1200) the task of the test itself is to get all pixels from the bitmapData, load them in to an array/bytearray/vector, add 1 to the color for each pixel and then write the new data back to the BitmapData.

Starting with the Flash 9 methods available:

Test One, getPixel -> array -> setPixel
This method incurs two full loops because there is no setPixels(array) method, the time of a bare loop of 1920000 is 8ms.

var o : Array<UInt> = new Array<UInt>();
for( i in 0...1920000 ) {
    o[i] = bitmapData.getPixel( i%WIDTH , Std.int(i/WIDTH) ) + 1;
}
for( i in 0...1920000 ) {
    bitmapData.setPixel( i%WIDTH , Std.int(i/WIDTH) , o[i] );
}

results [all times in ms]

555, 569, 574, 573, 575, 570, 570, 570, 568, 576, 575, 573, 569, 563, 570

Test Two - getPixels -> ByteArray -> setPixels

This method needs two ByteArrays to avoid using temporary var's and setting positions multiple times, the time of simply calling getPixels() alone is 90ms!

var b : ByteArray = bitmapData.getPixels( bitmapData.rect );
var n : ByteArray = new ByteArray();
n.endian = b.endian; // getPixels often returns big endian values and byte arrays are little endian by default
b.position = 0; // other wise we get an error
for( i in 0...1920000 ) {
    n.writeUnsignedInt( b.readUnsignedInt() + 1 );
}
n.position = 0; // otherwise we get an error
bitmapData.setPixels( bitmapData.rect , n );

results [all times in ms]

597, 590, 591, 598, 591, 591, 595, 593, 595, 591, 591, 594, 591, 594, 588

Rather disapointing results really, we'd get a lovely 2fps at that rate (all tests ran on a quad core btw).

On to the methods available in flash 10, which let's us use Vectors

Test Three, getPixel -> Vector -> setVector

This test is included purely to show the speed difference between Vectors and Arrays (test one)

var o : Vector<UInt> = new Vector<UInt>( 1920000 , true );
for( i in 0...1920000 ) {
    o[i] = bitmapData.getPixel( i%WIDTH , Std.int(i/WIDTH) ) + 1;
}
for( i in 0...1920000 ) {
    bitmapData.setPixel( i%WIDTH , Std.int(i/WIDTH) , o[i] );
}

results [all times in ms]

439, 443, 447, 444, 447, 445, 448, 447, 446, 447, 447, 445, 447, 449, 448

Test Four, getVector -> Vector -> setVector (unfixed vector)

unfixed vector initialization is virtually instant, way too quick for me to measure anyways (or to make a difference)

var v : Vector<UInt> = bitmapData.getVector( bitmapData.rect );
var o : Vector<UInt> = new Vector<UInt>();
for( i in 0...1920000 ) {
    o[i] = v[i] + 1;
}
bitmapData.setVector( bitmapData.rect , o );

results [all times in ms]

96, 66, 80, 71, 75, 65, 74, 72, 76, 68, 77, 73, 72, 77, 68, 70, 72, 72, 81, 68

Test Five, getVector -> Vector -> setVector (fixed size vector)

fixed size vectors take time, in this instance Vector<UInt>(1920000,true) takes circa 5ms

var v : Vector<UInt> = bitmapData.getVector( bitmapData.rect );
var o : Vector<UInt> = new Vector<UInt>( 1920000 , true );
for( i in 0...1920000 ) {
    o[i] = v[i] + 1;
}
bitmapData.setVector( bitmapData.rect , o );

results [all times in ms]

53, 41, 41, 46, 45, 47, 41, 40, 45, 45, 46, 41, 40, 46, 45, 47, 41, 50, 42, 46

Test Six, getVector -> setVector

this time we cut out the second vector, as essentially it's not needed

var v : Vector<UInt> = bitmapData.getVector( bitmapData.rect );
for( i in 0...1920000 ) {
    v[i] = v[i] + 1;
}
bitmapData.setVector( bitmapData.rect , v );

results [all times in ms]

44, 36, 38, 36, 38, 36, 36, 38, 36, 36, 37, 39, 35, 38, 38, 36, 39, 36, 38, 38

Some fantastic speed gains, and since we're getting to smaller figures we need to start counting the cost of each line:

bitmapData.getVector( bitmapData.rect );

10, 8, 9, 9, 8, 10, 8, 9, 8, 11, 8, 10, 8, 10, 8, 9, 8, 9, 8 [ms]

for( i in 0...1920000 ) {
    v[i] = v[i] + 1;
}

25, 25, 25, 27, 27, 26, 25, 26, 25, 25, 26, 25, 27, 25, 25, 26, 25, 26, 25, 25

however the loop alone takes 8ms so we're looking at av 19ms for this part

bitmapData.setVector( bitmapData.rect , v );

11, 5, 6, 4, 4, 6, 4, 6, 4, 4, 5, 5, 6, 4, 6, 4, 5, 5, 4, 5

and finally to be really count the cost we need to see what the uint+1 would take by itself

for( i in 0...1920000 ) {
    0xFFFFF9 + 1;
}

9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 9, 8, 9, 9

so the true cost of using this single vector method in test six is 37-9 = 28ms for getVector, update vector, setVector

the true cost of using a vector inside the loop is 26-9 = 17ms (we need this later)

Adding haXe in to the equation.

Finally, as you probably know haXe provides access to fast memory; fast memory is essentially a ByteArray set in flash.system.ApplicationDomain.currentDomain.domainMemory and accessed through the new opcodes.

A little trick we can use with haxe is to write info from this fast memory to BitmapData via setPixels() since it is a ByteArray.

First off we need to set up the fast memory storage somewhere in our app:

var storage : ByteArray = new ByteArray();
storage.endian = Endian.LITTLE_ENDIAN;
storage.length = BYTES;
flash.Memory.select( storage );

to calulate the value of BYTES we simply do WIDTH*HEIGHT*4 (because a UInt takes up 4 Bytes of memory)

we know from earlier that getVector only takes circa 9ms, whereas getPixels takes a shocking 90ms; so what I'm going to do is:

Test Seven : getVector -> flash.Memory -> setPixels

var v : Vector<UInt> = bitmapData.getVector( bitmapData.rect );
for( i in 0...1920000 ) {
    flash.Memory.setI32( i*4 , v[i] + 1 );
}
// ensure position of fast memory is 0
flash.system.ApplicationDomain.currentDomain.domainMemory.position = 0;
bitmapData.lock();
bitmapData.setPixels( bitmapData.rect , flash.system.ApplicationDomain.currentDomain.domainMemory );
bitmapData.unlock( bitmapData.rect );

results [all times in ms]
34, 31, 32, 34, 32, 32, 32, 33, 32, 33, 31, 33, 32, 31, 33, 32, 33, 32, 33, 31,

We've shaved off 5ms! but hold on.. there's more - we need to analyse this

bitmapData.getVector( bitmapData.rect ); as we know from earlier takes 9ms

the loop takes 9ms

flash.system.ApplicationDomain.currentDomain.domainMemory.position = 0;
bitmapData.lock();
bitmapData.setPixels( bitmapData.rect , flash.system.ApplicationDomain.currentDomain.domainMemory );
bitmapData.unlock( bitmapData.rect );

together all takes 5ms

which means that the true cost of using flash.Memory is 32-9-9-5 = 9ms

if you remember from test six, the vector cost was 17ms so we've gained some and lost some, but overall came out on top, and certainly a tonne better than flash 9!

now, these tests where all with a big chunk of 1600x1200 pixels, in a real world app we'd have less.. so lets see with 800x450px (360,000 pixels)

Vector Only:

var v : Vector<UInt> = bitmapData.getVector( bitmapData.rect );
for( i in 0...360000 ) {
    v[i] = v[i] + 1;
}
bitmapData.setVector( bitmapData.rect , v );

results [all times in ms]
13, 6, 6, 6, 6, 7, 6, 7, 6, 6, 7, 6, 6, 7, 7, 7, 7, 7, 7, 7  = 137 / 20 : av 6.85ms = 146fps

Vector + Memory

var v : Vector<UInt> = bitmapData.getVector( bitmapData.rect );
for( i in 0...360000 ) {
flash.Memory.setI32( i*4 , v[i] + 1 );
}

// ensure position of fast memory is 0
flash.system.ApplicationDomain.currentDomain.domainMemory.position = 0;
bitmapData.lock();
bitmapData.setPixels( bitmapData.rect , flash.system.ApplicationDomain.currentDomain.domainMemory );
bitmapData.unlock( bitmapData.rect );

results [all times in ms]
7, 6, 6, 6, 5, 6, 6, 5, 5, 5, 6, 5, 5, 5, 6, 5, 5, 5, 5, 5 = 109 / 20 : av 5.45ms = 183fps

Summary

so, there's your choices 800x450px swf using methods to update raw bitmap data at 3fps for flash 9 vs 146fps for pure as3 vs 183 fps for haXe (and probably alchemy).

imho: vectors are a fantastic choice, my personal preference goes to using fastmemory, but thats because i can avoid the stack using it and know that whilst its a little more coding, you can't get faster.

overall: I'm just grateful we've got options to be able to deliver this kind of performance, really opens the doors for some stunning work and libraries not least the upcoming version of papervision and no doublt some libs for haXe.

Been doing some more playing with Perlin Particles, this time going for more natural, and indeed more useful!

Full source and comments included with this one: 3D Perlin Particle Light Cloud

I was flicking through Joa Eberts site the other day and came across a post he did, speed coding 2; the product of which was a load of 2D perlin noise particles that looked.. well great! Kindly Joa gave me permission to dissect, modify and port it to haxe. Ultimately though I ended up recoding it all from scratch, I did however borrow the nice color transform code from the original though, they're damn nice.

Typically you'd call BitmapData.perlinNoise() to generate a 2 color, 2 octave fractal perlin noise image - you then take the 0-255 color values for both of the channels, scale them and use them as your x & y coordinates.

I decided to twist it a bit and try 3D, so in the experiments I'm generating a 3 color, 4 octave fractal perlin noise image then using the scaling the values to provide x,y,z coordinates. Then mapping each particle into a 3d space, calculating it's color by merging values of particles which land on the same display pixel together.

Enough of the going on anyways, I'll post the full code for the examples once I've cleaned and commented it - all done in haXe of course.

First off, we have a 3D version of Joa's original; in this one the particles are all mapped into an imaginary cube and some nice effects added : 3D perlin noise particles tracing a cube.

Next up I thought I'd try some variations:

• Lazer tracing a cube (runs v fast)
• Perlin Noise, In a Box!

Quite impressed with the base performance here from haxe, I get 100fps on the lazer tracing example, and circa 45-50 fps on the versions with effects or more complex algo's.

liking perlin noise (and haXe).

Doesn't need much of an introduction, after my previous post "Amazing what happens when you modify a Sphere"; I realised that I'd missed a few combinations, and as such thought it'd be a good idea to finish off the obvious combinations.. you know, to see what they looked like.

One of the best, and the one that makes the most sense formula wise is M16.. here's the formula for it

x = Math.cos(a) * Math.cos(r);
y = Math.cos(a) * Math.sin(r);
z = Math.sin(a) * Math.sin(r);

makes sense to me! anyway, on with the show - here are the rest:

• M8
• M9
• M10
• M11
• M12
• M13
• M14
• M15
• M16

Taking the 3d particle primatives a bit further (and adding color) I've found that some very nice and rather interesting models can be made when you simply change a sphere a little bit.

Normally I'd do these in order, but in this case I'd recommend you checkout M4 first to get a taste (it's certainly my fav).

Before the list, a very brief description; here we have the code to generate a sphere:


for( i in 0...PARTICLES ) {
a = (PARTICLES/360)*i;
r = (i/PARTICLES) * Math.PI;
x = Math.cos(a) * Math.cos(r);
y = Math.cos(a) * Math.sin(r);
z = Math.sin(a);
}


now all we are going to be doing is adding in some steps, or changing the odd cos/sin with cos/sin/tan - nothing complex.

• M1 Variation
• M2 Variation
• M3 Variation
• M4 Variation (my fav)
• M5 Variation
• M6 Variation
• M7 Variation
  

Now.. M7 is a rather interesting one.. because it has two very interesting variations (imho) primarily the eye which produces a flat, yet 3d shaded circle..?

• M7 Strange Variation - The Eye
• M7 Strange Variation - The Feather

In addition there are a few more which are created by simply stepping colors or values:

• 3D Abstract Rainbow
• One, Three, TwentyFour
• Three, Six, Twelve
• Six, Six, Twelve

again, thanks to haXe for allowing this - remember it's all just particles rendered in realtime.

Following earlier unpublished work, and my version of 300k particles in flash, I found that I've created a nice little setup for rendering the results of mathematical functions in flash; specifically rendering the results as 300k/500k particles - I'm kind of fascinated with particles and plotting functions, as are many others - my preference is to work with strange attractors; however I thought I'd shoot right back to basics and see what can be made with primatives and modifications of.

pre-warning, if you're looking for eye candy, forget it - these are simple practical examples and a bit boring, but useful if you need to know how

Starting with the simplest we have the Particle Cube - 500k random particles plotted in 3d space within an invisible cube. Then I modified it a bit..

• Sine Modified Particle Cube (it's all skewed)
• Sine and Time Modified Particle Cube (double cube with a flow of particles between)
• Sine, Tan and Cos Modified Particle Cube (one function applied to each axis)
• Alternative Flattened Sine, Tan, Cos Modified Particle Cube (patchwork circular flattened cube!)

Next up the Particle Sphere - another 500k particles in 3d space, all random, and then some modified versions..

• Spherical Circles (evenly distributed particles, creates a single line wrapped around a sphere)
• Emphasized Particle Sphere (double spaced to create a messy particle sphere - but more like particles)
• Half a Sphere (go on, guess)
• White Particle Bubble (evenly distributed to create a kind of bubble effect)
• Split Sections of a Sphere (two opposing but differing chunks of sphere, again all particles, like a swing bin lid)

And finally a couple of simple experiments..

• Random Warped Particle Plane (random x, random y, atan2(x,y) for z)
• Beach Bubble (the white bubble with some colour, like a beach ball but translucent)

In summary, it's good to see how easily different effects and primatives can be build, and even better to see how easily they can be modified with basic mathematical functions. (and how good haXe is :p)

Ralph Hauwert somehow managed to push 300k+ 3D particles around in realtime using alchemy, pixelbender and flash 10; I played around with the code a bit and made similar in pure as3, nothing magnificent.. a month later in a totally unrelated event (namely me getting thoroughly p'd off with PHP) I discovered haXe and set to work playing around with it.

Finally in another totally unrelated event I came across Joa Eberts AS3 only version of Ralphs earlier work; upon closer inspection I found it wasn't as fast as Ralph's alchemy version but completely awesome code non-the-less, to do this in pure AS3 is simply amazing.

As if you can't guess where this is going.. I thought I'd give it a go in "pure haXe" to see if one could replicate the speed of Ralphs version or maybe even top it. Sparing any further detail..

Here's haXe pushing 300k+ 3d particles around in realtime (source included)

and...

here's haXe pushing 600k particles (twice as many), and erm 1 Million (a bit stuttery but hell why not)

and.. (just for fun)

here's haXe pushing 300k particles in color, and 500k in color for good measure! - before downplaying the color versions, it's worth noting that each r,g,b value is independantly calculated and weighted as a float then combined to a render color right before updating the bitmap, so in effect it's not just x,y,z stored for each pixel, it's r,g,b as well - so 2x more number crunching + a bit more.

think I can safely say I love haXe and since doign this I've been going nuts doing lots of experiments using similar code :p

so, any doublts about haXe's perfomance with flash can be considered resolved imho.

regards, nathan