This movie requires Flash Player 10
I’ve had some time to experiment more with BitmapData and specifically the fillRect(); method. I hope to utilize some of this soon when creating a new site for myself. Below is another example showing how efficient this type of animation can become.
This movie requires Flash Player 10
6 Comments
awesome. very pretty!
Hi Lex,
Very cool! Source would be nice
Any change on posting them?
cheers, Sidney
Nice idea!!
But what I’m most interesting in, is in the second example.
I would like to be able to create some particles effects like that one or even be able to generate some visuals like in your other blog entry (“Generative Visuals”).
Is there any possibility to have a look to that code or to be pointed to some tutorials?
Thanks.
it’s perfect for me.
thank you very very much
Simone
Hi Simone,
thank you – I hesitate to post code examples for this one. But I’m happy to explain how it works for the most part, that should lead you to finding a way to do something similar.
1) I create a BitmapData instance (let’s call it letterBmd) based on the width and height of the TextField containing the letter “P” for example.
2) I draw the TextField onto the BitmapData instance using BitmapData.draw().
3) I create a new empty BitmapData (let’s call it stageBmd) instance and then create a new Bitmap using new Bitmap(stageBmd) and add that to the stage. This is completely blank right now, well, all of its pixels are at zero alpha – so you can’t see it yet.
4) Then, I loop through the width and height of letterBmd and store each pixel’s x,y position, and it’s ARGB (BitmapData.getPixel32()) color into generic objects, and store those objects into an Array (I use a Vector, but array will work). It would look something like this, but there are hundreds of these objects in the Vector, one for each pixel of the letterBmd: vect = [{originalx:1,originaly:1,clr:0x000000, x:0, y:0}, {originalx:1,originaly:2,clr:0x000000, x:0, y:0}, {originalx:1,originaly:3,clr:0x000000, x:0, y:0}...]. So, basically, I now have a an array containing all the pertinent image info for each pixel in the letterBmd. And at this point, I no longer need letterBmd or the original TextField. The oldx, oldy, x, and y properties will be used in a bit.
5) To display the scattered pixels, I simply loop through the array of objects and draw a 1×1 pixel color to the stageBmd at random x,y values. I use Bitmap.setPixel32() to draw those pixels to stageBmd. This is simply applying the stored color within the generic objects (the clr property) to the stageBmd so it looks like salt/pepper. As far as getting those pixels to randomly fall in the circle, bar, or cross patterns, I’m using a biased distribution algorithm. So, the x,y values are random within a certain area. Whatever these random values are, they are stored into each of the generic object’s x and y properties.
6) Upon mouse over, I have an ENTER_FRAME event running. Within the event handler, I redraw the pixels on the stageBmd over and over until the pixels appear to move to their original positions, hence forming the letters, or text. So, those small pixels aren’t individually animated – I’m simply redrawing pixels every frame until they become drawn at their original positions. This is done using a simple easing equation such as vect[i].x += (vect[i].originalx – vect[i].x)*easeAmt Then I redraw that pixel, of that color, at the new x position. There are a few tricky things you’ll have to figure out if you’re not used to animating via drawing pixels – such as making sure the pixels end up at their interger original values, along with getting the stageBmd to clear before each new pixel is drawn. Those are some of the challenges you’ll face, as did I.
Hope this helps give a bit of insight into the process!
Hi Lex, very cool…
There is the chance to have the source of this examples??? Is interesting how you transform the text in pixel
thank you very much
Simone