Flash | sakri rosenstrom blog

Archive for the ‘Flash’ Category

FITC Amsterdam 2009

Friday, February 27th, 2009

In one word, FITC was hectic for me. I spent the week before frantically preparing my presentation. Having ran into some technical issues, I was behind schedule. So much so that I spent most of sunday and monday in my hotel room cranking out code, slides and examples.

Here’s me rocking the Artemis hotel room:

I finished my last example Tuesday morning around 9, followed by a thrilling cab ride to FITC. Steven told the cab that we were in a hurry, and the driver certainly delivered : He ran 4 red lights, drove on bus and tram lanes, honked a lot, and seemed to just LOVE it all the way! He deserved a FAT tip Alas, I was on time for my presentation. The “Tekenzaal” filled up slowly with hungover attendees.

I was worried that I wouldn’t have enough time to go through my slides, so, wired on coffee I managed to whiz through my slides in just 30 mins… Questions anybody? I have to say that I’m a bit bummed about it, having put that much effort, only to rush through whilst forgetting half of what I was meaning to say. In the end, I got some positive feedback, and it seems there’s some genuine interest in my framework.

I won’t be posting my slides just yet, as it seems some of my examples fail on macs Instead, I’m gonna be posting bits and pieces with code, in easily digestible portions.

After my preso I managed to catch a couple of really inspirational ones, namely Keith Peters “Art From Code” and Mario Klingemanns “The Tinkerer’s Box”. Got me all Juiced up for actionscript adventures

The evening was followed by an Adobe dinner… Om Nom Nom… Exhausted from the lack of sleep, we stopped by the party for a quick beer then retreated to our hotel.

All in all was a great experience! Thanks again Shawn!

Posted in Flash | 2 Comments »

Get first non transparent pixel in a bitmap Part III

Wednesday, February 18th, 2009

I know, I know... such a riveting topic, just can't get enough!

So I felt quite embarrassed when Mario commented on my previous entry, stating that in fact I had misunderstood his method. Either just me being an idiot, or me being an idiot after a few drinks at the Max party.

He then proceeded to blog about the real deal. Indeed this requires less code, looks cleaner and more 1337 in every way! I then included the new method into my test run.

Here is Marios code:


PLAIN TEXT
Actionscript:




public static function getFirstNonTransparentPixel( bmd:BitmapData )  oint{


    var r1:Rectangle = bmd.getColorBoundsRect( 0xff000000, 0, false );


    if ( r1.width> 0 ){


        var temp:BitmapData = new BitmapData( r1.width, 1, true, 0 );


        temp.copyPixels( bmd, r1, new Point());


        var r2:Rectangle = temp.getColorBoundsRect( 0xff000000, 0, false );


        return r1.topLeft.add( r2.topLeft );


    }


    return null;


}

Here (once again) be the results:

Test with image w:100,h:100
testFirstBitmapLooping() first:(x=30, y=30)
testFirstBitmapLooping() test took : 3 milliseconds
testFirstBitmapFloodFill() first:(x=30, y=30)
testFirstBitmapFloodFill() test took : 4 milliseconds
testFirstBitmapHitTest() first:(x=30, y=30)
testFirstBitmapHitTest() test took : 1 milliseconds
testFirstBitmapMario() first:(x=30, y=30)
testFirstBitmapMario() test took : 1 milliseconds

Test with image w:500,h:500
testFirstBitmapLooping() first:(x=150, y=150)
testFirstBitmapLooping() test took : 30 milliseconds
testFirstBitmapFloodFill() first:(x=150, y=150)
testFirstBitmapFloodFill() test took : 17 milliseconds
testFirstBitmapHitTest() first:(x=150, y=150)
testFirstBitmapHitTest() test took : 1 milliseconds
testFirstBitmapMario() first:(x=150, y=150)
testFirstBitmapMario() test took : 3 milliseconds

Test with image w:1000,h:1000
testFirstBitmapLooping() first:(x=300, y=300)
testFirstBitmapLooping() test took : 62 milliseconds
testFirstBitmapFloodFill() first:(x=300, y=300)
testFirstBitmapFloodFill() test took : 41 milliseconds
testFirstBitmapHitTest() first:(x=300, y=300)
testFirstBitmapHitTest() test took : 7 milliseconds
testFirstBitmapMario() first:(x=300, y=300)
testFirstBitmapMario() test took : 10 milliseconds

Test with image w:2000,h:2000
testFirstBitmapLooping() first:(x=600, y=600)
testFirstBitmapLooping() test took : 306 milliseconds
testFirstBitmapFloodFill() first:(x=600, y=600)
testFirstBitmapFloodFill() test took : 96 milliseconds
testFirstBitmapHitTest() first:(x=600, y=600)
testFirstBitmapHitTest() test took : 32 milliseconds
testFirstBitmapMario() first:(x=600, y=600)
testFirstBitmapMario() test took : 55 milliseconds

...so it turns out this wasn't an entirely futile exercise after all! I felt like a schmuck having misunderstood Mario, but I'm quite chuffed that the HitTest method is faster (even if by a practically irrelevant amount).

To be sure, I ran the two competitors 20 times on a bitmap of 2000 by 2000 and took the averages:

Mario Average: :36.7
HitTest Average: :21.2

In any case, I got to better terms with some of the BitmapData methods, which is something we all should aspire to anyway Thanks again Mario!

********** FINAL UPDATE (hopefully)************

Mario had a go at the HitTest version, and modified it slightly for even better performance:


PLAIN TEXT
Actionscript:




public static function getFirstNonTransparentPixel( bmd:BitmapData )  oint{


    var hit_rect:Rectangle=new Rectangle(0,0,bmd.width,1);


    var p:Point = new Point();


    for( hit_rect.y = 0; hit_rect.y <bmd.height; hit_rect.y++ ){


        if( bmd.hitTest( p, 0x01, hit_rect) ){


        var hit_bmd:BitmapData=new BitmapData( bmd.width, 1, true, 0 );


        hit_bmd.copyPixels( bmd, hit_rect, p );


        return hit_rect.topLeft.add( hit_bmd.getColorBoundsRect(0xFF000000, 0, false).topLeft );


        }


    }


    return null;


}

Mind you, I am testing this in debug player... I should use a release version with the release player, but for the sake of consistency with my previous posts I'll stick to my old "test suite".

Results:

HitTest Averages: :16
Mario Averages: :35.285714285714285
Hybrid Averages: :14.142857142857142

Now, finally, back to the code where I actually use this algo

Posted in AS3, experiment, Flash | 3 Comments »

Get first non transparent pixel in a bitmap update

Tuesday, February 10th, 2009

On the way home I realized I had made a mistake in my previous blog post. In my hitTest() version, for some reason I had used a Rectangle which was the full size of the target bitmap. Like the FloodFill version, this "hit test" rectangle only needs to be one pixel in height. This means a lot less checking.

Behold the updated version:


PLAIN TEXT
Actionscript:




public static function getFirstNonTransparentPixelHitTest(bmd:flash.display.BitmapData,test_fill_color:uint=0xFFFFFF00)  oint{


    var hit_rect:Rectangle=new Rectangle(0,0,bmd.width,1);


    for(var i:uint=0;i<bmd.height;i++){


        if(bmd.hitTest(new Point(),0x01,hit_rect)){


            var hit_bmd:BitmapData=new BitmapData(bmd.width,1,true,0);


            var m:Matrix=new Matrix(1,0,0,1,0,-i);


            hit_bmd.draw(bmd,m);


            hit_bmd.floodFill(0,0,test_fill_color);//use yellow, assume that the image tested is monochrome... (black and transparent)


            var bounds:Rectangle=hit_bmd.getColorBoundsRect(0xFFFFFFFF,test_fill_color);


            return new Point(bounds.width,i);


        }


        hit_rect.y++;


    }


    return null;


}

Now behold the new results:

Test with image w:100,h:100
testFirstBitmapHitTest() first:(x=30, y=30)
testFirstBitmapHitTest() test took : 2 milliseconds
testFirstBitmapLooping() first:(x=30, y=30)
testFirstBitmapLooping() test took : 1 milliseconds
testFirstBitmapFloodFill() first:(x=30, y=30)
testFirstBitmapFloodFill() test took : 3 milliseconds

Test with image w:500,h:500
testFirstBitmapHitTest() first:(x=150, y=150)
testFirstBitmapHitTest() test took : 8 milliseconds
testFirstBitmapLooping() first:(x=150, y=150)
testFirstBitmapLooping() test took : 32 milliseconds
testFirstBitmapFloodFill() first:(x=150, y=150)
testFirstBitmapFloodFill() test took : 20 milliseconds

Test with image w:1000,h:1000
testFirstBitmapHitTest() first:(x=300, y=300)
testFirstBitmapHitTest() test took : 13 milliseconds
testFirstBitmapLooping() first:(x=300, y=300)
testFirstBitmapLooping() test took : 117 milliseconds
testFirstBitmapFloodFill() first:(x=300, y=300)
testFirstBitmapFloodFill() test took : 42 milliseconds

Test with image w:2000,h:2000
testFirstBitmapHitTest() first:(x=600, y=600)
testFirstBitmapHitTest() test took : 23 milliseconds
testFirstBitmapLooping() first:(x=600, y=600)
testFirstBitmapLooping() test took : 282 milliseconds
testFirstBitmapFloodFill() first:(x=600, y=600)
testFirstBitmapFloodFill() test took : 102 milliseconds

So the hitTest approach wins after all

***EDIT :

AND CLICK HERE TO READ UPDATE!

***

Posted in AS3, experiment, Flash | No Comments »

Get first non transparent pixel in a bitmap, 3 approaches and benchmarks

Tuesday, February 10th, 2009

I was (once again) very inspired by Mario Klingemanns presentation at the Max in Milan. He showed an example of finding the "perimeter of non transparent pixels" in a bitmap. Not long ago I did the same thing while trying to generate 3d text . He briefly mentioned "you just find the first non transparent pixel, then..." which left me wondering.

I had taken the "brute force approach" of just looping through the pixels, doing a if(bmd.getPixel32(ix,iy)>0x00000000) approach, which (unsurprisingly) isn't very fast. So, at the afterparty, I decided to harass Herr Klingemann. He gladly explained that you 'just create a one pixel high BitmapData, the width of your source BitmapData, iterate from top to bottom draw()ing this "scan line", using floodFill() and getColorBoundsRect() each time to compare if the bounds rect was the width of the source bitmap'.

This sounded incredibly slow. In preparation for my FITC presentation, i'm now returning to the 3d text code, and I just had to test this out. I had this "Brilliant" idea to use BitmapData.hitTest() instead... surely this was faster?! I would create a Rectangle, position it above the source BitmapData, then iterate all the way down, merrily hitTesting() all the way.

Here are my findFirstTransparentPixel() mutations:


PLAIN TEXT
Actionscript:




public static function getFirstNonTransparentPixelLooping(bmd:flash.display.BitmapData)  oint{


    var ix:uint,iy:uint,bmd_height:uint=bmd.height,bmd_width:uint=bmd.width;


    for (iy=0;iy<bmd_height;iy++){


        for(ix=0;ix<bmd_width;ix++){


            if(bmd.getPixel32(ix,iy)>0x00000000){


                return new Point(ix,iy);


            }


        }


    }


    return null;


}


 


public static function getFirstNonTransparentPixelFloodFill(bmd:flash.display.BitmapData,test_fill_color:uint=0xFFFFFF00)  oint{


    //var hit_bmd:BitmapData=new BitmapData(bmd.width,1,true,0);


    var hit_bmd:BitmapData;


    var m:Matrix=new Matrix();


    for(var i:int=0;i<bmd.height;i++){


        m.ty=-i;


        hit_bmd=new BitmapData(bmd.width,1,true,0);


        hit_bmd.draw(bmd,m);


        hit_bmd.floodFill(0,0,test_fill_color);//use yellow, assume that the image tested is monochrome... (black and transparent)


        var bounds:Rectangle=hit_bmd.getColorBoundsRect(0xFFFFFFFF,test_fill_color);


        if(bounds.width!=bmd.width){


            return new Point(i,bounds.width);


        }


        //hit_bmd.floodFill(0,0,0);


        hit_bmd.dispose();


    }


    return null;


}


 


public static function getFirstNonTransparentPixelHitTest(bmd:flash.display.BitmapData,test_fill_color:uint=0xFFFFFF00)  oint{


    var hit_rect:Rectangle=new Rectangle(0,-bmd.height+1,bmd.width,bmd.height);   


    for(var i:uint=1;i<bmd.height;i++){


        if(bmd.hitTest(new Point(),0x01,hit_rect)){


            var hit_bmd:BitmapData=new BitmapData(bmd.width,1,true,0);


            var m:Matrix=new Matrix(1,0,0,1,0,-(i-1));


            hit_bmd.draw(bmd,m);


            hit_bmd.floodFill(0,0,test_fill_color);


            var bounds:Rectangle=hit_bmd.getColorBoundsRect(0xFFFFFFFF,test_fill_color);


            return new Point(bounds.width,i-1);


        }


        hit_rect.y++;


    }


    return null;


}

Here's my test code:


PLAIN TEXT
Actionscript:




protected function createTestBitmap(w:uint,h:uint):BitmapData{


    var b:BitmapData=new BitmapData(w,h,true,0x00000000);


    b.fillRect(new Rectangle(Math.round(w*.30),Math.round(h*.30),Math.round(w*.40),Math.round(w*.40)),0xFFFF0000);


    return b;


}


 


protected function testFirstBitmapFloodFill(w:uint,h:uint):void{


    var start:uint=flash.utils.getTimer();


    var b:BitmapData=createTestBitmap(w,h);


    trace("testFirstBitmapFloodFill() first:"+BitmapDataUtil.getFirstNonTransparentPixelFloodFill(b));


    trace("testFirstBitmapFloodFill() test took : "+(flash.utils.getTimer()-start)+" milliseconds");    


    b.dispose();


    b=null;


}


 


protected function testFirstBitmapHitTest(w:uint,h:uint):void{


    var start:uint=flash.utils.getTimer();


    var b:BitmapData=createTestBitmap(w,h);


    trace("testFirstBitmapHitTest() first:"+BitmapDataUtil.getFirstNonTransparentPixelHitTest(b));


    trace("testFirstBitmapHitTest() test took : "+(flash.utils.getTimer()-start)+" milliseconds");


    b.dispose();


    b=null;


}


 


protected function testFirstBitmapLooping(w:uint,h:uint):void{


    var start:uint=flash.utils.getTimer();    


    var b:BitmapData=createTestBitmap(w,h);


    trace("testFirstBitmapLooping() first:"+BitmapDataUtil.getFirstNonTransparentPixelLooping(b));


    trace("testFirstBitmapLooping() test took : "+(flash.utils.getTimer()-start)+" milliseconds");  


    b.dispose();


    b=null;


}

I tested all three functions with images ranging from 100x100 to 2000x2000 pixels:

Here be the results:

Test with image w:100,h:100
testFirstBitmapHitTest() first:(x=30, y=30)
testFirstBitmapHitTest() test took : 2 milliseconds
testFirstBitmapLooping() first:(x=30, y=30)
testFirstBitmapLooping() test took : 7 milliseconds
testFirstBitmapFloodFill() first:(x=30, y=30)
testFirstBitmapFloodFill() test took : 8 milliseconds

Test with image w:500,h:500
testFirstBitmapHitTest() first:(x=150, y=150)
testFirstBitmapHitTest() test took : 29 milliseconds
testFirstBitmapLooping() first:(x=150, y=150)
testFirstBitmapLooping() test took : 34 milliseconds
testFirstBitmapFloodFill() first:(x=150, y=150)
testFirstBitmapFloodFill() test took : 20 milliseconds

Test with image w:1000,h:1000
testFirstBitmapHitTest() first:(x=300, y=300)
testFirstBitmapHitTest() test took : 147 milliseconds
testFirstBitmapLooping() first:(x=300, y=300)
testFirstBitmapLooping() test took : 111 milliseconds
testFirstBitmapFloodFill() first:(x=300, y=300)
testFirstBitmapFloodFill() test took : 41 milliseconds

Test with image w:2000,h:2000
testFirstBitmapHitTest() first:(x=600, y=600)
testFirstBitmapHitTest() test took : 644 milliseconds
testFirstBitmapLooping() first:(x=600, y=600)
testFirstBitmapLooping() test took : 210 milliseconds
testFirstBitmapFloodFill() first:(x=600, y=600)
testFirstBitmapFloodFill() test took : 75 milliseconds

Started out good for me! With a small image my hitTest approach was over 3 times faster! Then, the bigger the sample image got, the more my method started sucking, and Mario started Rocking. Eventually the "looping" method became faster than the hitTest()

So, Conclusion : For small images, the amount of difference is so little it really doesn't matter, with bigger images go FloodFill... Hats off Quasimondo

If you have ideas for faster approaches, or improvements to the above three, don't hesitate to comment!

***EDIT :
CLICK HERE TO READ UPDATE

AND CLICK HERE TO READ UPDATE 2

***

Posted in experiment, Flash | 2 Comments »

VAIO P-Series showcase goes live!

Thursday, January 8th, 2009

Nascom was asked to produce a showcase site for the release of Sony VAIOs new P-Series notebook. Due to the forces that be, production could only start halfway through December, meaning my Holidays were spent frantically coding. It's a minor miracle that we squeezed this baby out on schedule:

As far as actionscript goes, there isn't really anything revolutionary going on. The biggest challenge infact was to incorporate lots of timeline animation into an application, effectively and fast. I went for an Actionscript project using PureMVC, as I could reuse a lot of the localization and loading logic from the Vaio10 site. I then designed a "template flash" for the various subloaded "stories", which communicate with the main application via Events. This was quite tricky, as the template needed to be flexible for the copious amounts of animation done by the designers (really nice stuff btw). These "stories" only contain animations, leaving the handing of text and navigation buttons to the main app. Getting all this to synchronize, along with managing loading/unloading etc. was not as straight forward as it might look, but in the end it all worked out

The other challenge was the navigation. It's possible to navigate through the entire site by just clicking the left and right "scroll arrows", and naturally through the regular navigation. This kind of "dual access" to the state of the navigation model is famous for causing headaches. Couple that with a third navigation mechanism in the form of the "home page map" hotspots, and, well, I'm beginning to sound like a broken record

This is phase one of the release, look out for more updates in future releases.

To everybody involved, great job!

check it out!

Posted in AS3, Flash, PureMVC | 1 Comment »

sakri rosenstrom blog