Actionscript 3 – PixelMorphing class first test (morphing with particles)

Feb 15, 2008

actionscript 3, BitmapData, classes, morphing, Particles

Hi there,
I am back after some pause with this interesting effect. This class takes every pixel from two pictures, sort them by averaged luminosity e reconstruct the second picture animating pixels from the first one.

The effect is a very nice pixel morphing (particles morphing) and the final result resambles some color ramp recolor tecnique.

Start demo

This is the second algorythm I wrote. The first one was build to do the calculation about moving pixels and then draw the full picture parsing the full array of pixels. The bigger problem in the first one was speed of execution.

The setPixel method of the BitmapData class is far too slow for this kind of effect and even slower was the parsing every frame of the full array containing all the pixel of the first image.

So I come with completely new algorythm that uses three bitmaps/bitmapdatas where the first only displays original image and set to trasparent only pixels that have moved away.
The scond one redraws every frame, but only displays moving pixels which are stored in a much shorter array and the last one shows only pixels which reached the final position.

With this second approach only pixels effectively changing are redrawn and a lot of speed can be gained.

This first post is only for showcase, during next days I will write a technical post about class structure, speed optimisations etc. off course with source code.

Don’t forget to leave a comment if you like it

22 Comments

20 Comments

Exey • Feb 15, 2008 @6:44 pm

Amazing!
Fardeen • Feb 16, 2008 @6:22 pm

Excellent ! A little long but beautiful effect .
Thomas Joos • Feb 19, 2008 @11:40 am

I can’t wait to see the source code, could you also put the source code of the equalizer online please? quite a stunning effect!
jouni • Feb 29, 2008 @1:03 pm

very cool! any way to do this in flash 8 with as2?
oliver_l1 • Mar 5, 2008 @8:25 pm

awesome! good work.show the world the source code…
renovationdoctors • Apr 4, 2008 @8:46 pm

I can’t wait to see the source code
Dimitar • Apr 7, 2008 @4:31 pm

It’s amazing
phoenix • Apr 9, 2008 @8:06 am

Wonderful! yearning for source code!
Ben Ashcroft • Apr 22, 2008 @12:20 pm

WOw, really impressive. Looking forward to seeing how you did it?
dantesnake • May 2, 2008 @12:52 pm

very cool! good work
gallypette • May 27, 2008 @3:20 pm

Brilliant, any sources ?
mitch • Aug 6, 2008 @3:37 am

really awesome!!!
good work!!!
Man • Aug 25, 2008 @1:20 am

Totally rad
brad • Sep 25, 2008 @9:59 pm

can you share the source?
Rafael Rinaldi • Oct 28, 2008 @6:00 pm

Oh, very nice! Great effect!
Ian • Jan 6, 2009 @8:26 pm

This is a very nice effect. I’m a little new to bitmapData work. How do you determine the luminosity of a pixel? Are larger uints simply more luminous than smaller ones?
Pierluigi Pesenti • Jan 7, 2009 @7:58 am

I’ve posted the source code (downloadable zipped class):
http://blog.oaxoa.com/2008/09/27/actionscript-3-pixelmorphing-class-now-with-source-code/

However the analyzing function is the following:

private function analyzePicture(picture:DisplayObject):Array {

var bd:BitmapData=new BitmapData(w,h);
var outputArray:Array=new Array();

var avg:uint;
var rgb:Object;
var col:Number;
var i:uint;
var j:uint;

bd.draw(picture);

for (i=0; i<w; i++) {
for (j=0; j<h; j++) {
col=bd.getPixel32(i, j);
rgb=hex2rgb(col);
avg=rgb.r+rgb.g+rgb.b;
var o1:Object={color:col, x:i, y:j, avg:avg};
outputArray.push(o1);
}
}

outputArray.sortOn(“avg”, Array.NUMERIC | Array.DESCENDING);
bd.dispose();

return outputArray;
}

As you can see I draw the picture in a bitmapdata so have access to the pixels then simply get the color, convert it to rgb with another simple function and average it with avg=rgb.r+rgb.g+rgb.b;
The I put the value in an array and sort it based on the numerical value.
Pierluigi Pesenti • Jan 7, 2009 @8:01 am

p.s.: the avg variable is off course the sum not the average, but it’s the same… simply divide by 3 if you want the average
Kolyan • Apr 3, 2009 @10:15 pm

This is what I was thinking to build. It reminds me that particle engine from AE since version 4.
If someone familiar there are 2 major implications of bitmap manipulation in that pixel tool: kinda “canon” to use as a center of “pixelation” beginning and the whole object collapsable into sizable rectangles.

Then rectangles could swirl along with spiral path, explosion and so in programmable directions following mouse or just timeline flow.

So I am wondering if there is not a source code to copy but AS3 semantics of implying the same effect. I wish I could learn.

I think that pixelCopy will need to be utilize to collect and copy initial bitmap(?).

Then after(or before) measurement of the initial bitmap object(picture) script should create a copy/clone of exact instance “sliced” in certain arrangement, something like 3×3 pixels or any proportional measurement, right?
And store it as a template. As soon as it’s done the initial bitmap should fade away.
Next will need to have a set of synchronic or random moves to swirl, cloud, explosion, etc. of the whole collection of these rectangles, right?

And then apply either mouse (as a center of gravity) or just following to a certain point in the Sprite and scale down to a negative side of a Sprite (outside) for instance, or fade and return backwards (or in different path) to fill into new temp instance.

During collapse the rectangles may turn around in random axis’s, skew, rotate, change RGB properties and sizes.

Then as soon as all the rectangles snapped back in places by old stats(template kinda), original image fades in and temp “sliced” instance discarded from memory. Back in AE there one image(picture) “squares” away via some path or displacement map (black and white gradient, for example) and returning another picture, totally different. Rectangles in AE are not a slices of the original picture. They either painted bitmaps or “skinned” with some images. There even option for 3D objects to utilize instead of plain 2D rectangles.

I think it would be awesome photo gallery effect, huh?
Could someone get into this here? And everyone will be able to contribute, I think.
Again, I prefer not to copy and paste but learn semantics of AS3.
Thank you all.
Pierluigi Pesenti • Apr 9, 2009 @6:22 pm

I thought about something similar too (I also did many similar things in as1) but it’s a totally different thing.

What you suggest is just some tile fade out on the first picture followed by a tiled fade in of a second one, with no correlation. In this experiment instead the pixels of the first recontruct the second one by moving to the better position (calculated by color ramping the colors of the first and the second). This couldn’t be made with tiles but just with single pixels. A square composed by many pixels contains not a single color, but shapes and details. To make something like this you shold need an alghorythm similar to the jpeg (or png) compression logic.

By far too hard for me

Cheers