electronslibres.ca ça mute avec l'AS3

15Jan/100

Where is my mind (a pixel experiment)

I have always loved pixel effects. So here is a little experiment which allows you to recompose an image from tiny bits.

First of all I import a new image from the library, and define the size in pixels of the tiny pieces I want to use to compose the image. This number will be used as width and height for each fragment. And I also need to define the width and height of the image I will be working with:

 
private var container:Sprite;
private var bd:BitmapData;
private var bmp:Bitmap;
 
// image from the Library
private var bData:Face_;
 
// size in pixels of the fragments
private var pixelSize:int = 4;
 
// width and height of the original image
private var imgWidth:int = 320;
private var imgHeight:int = 400;
 
private var pixelSize:int = 4;

Beware of the size of the fragments : I used 4 pixels because it left enough CPU to animate them. But a smaller number may cause your flashplayer and/ or computer to crash. The size of the fragment is also related to the size of the original image: the smaller the image you use, the smaller the fragment size can be.

/*loop inside my image and pick the color of one pixel every three pixels in order to compose my fragments. This method is less accurate because it doesn't resample exactly the original image but it allows me to reduce the need in memory and CPU. */
 
var i:int;
var j:int;
 
for(i = 0; i < bd.width; i += pixelSize)
{
 
for(j = 0; j < bd.height; j += pixelSize)
{
var _s:Square = new Square( uint( bd.getPixel(i, j) ), pixelSize );
 
_s.alpha = 0;
 
// set the final x and y position for the carre sprite
_s.init_x = i + (stage.stageWidth/ 2 - imgWidth / 2) ;
_s.init_y = j + (stage.stageHeight/ 2 - imgHeight / 2);
 
/*I also need to calculate the offset x and y position. This is the starting position of the Carre*/
_s.x = _s.init_x + Math.random() * imgWidth - imgWidth/2;
_s.y = _s.init_y + Math.random() * imgHeight - imgHeight/2;
 
container.addChild(_s);
 
//tween the fragment from its random position to its original one with a fade in:
TweenLite.to(_s, 1, {x:  _s.init_x,
y: _s.init_y,
alpha:  1,
delay: Math.sqrt(i + j) * Math.random() / 8,
ease: Sine.easeOut
});
}
}
// Last but not least trick: use the original image to fade in over the recomposed one to finalize the illusion of the recomposition.
TweenLite.to(bmp, 1, { alpha: 1, delay: 3, ease:Sine.easeOut });

And that's it ! Hope you'll like it !

source code is here, and tweenlite library is here.