Archives

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.

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.

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.

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.

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.