Re-Painting Pixels with Actionscript 3

In this little experiment I am reading in all of the pixel values from the image of the strawberries below using the BitmapData class. I then attach a MovieClip and color it to match the pixel value. This is animated over time to give off a nice effect. Each time it runs through I am choosing a random scale value for the MovieClips. It’s fun to watch this thing run for a while to see the different patterns that it makes. Click on the image below to check it out.

[as]var bmd:BitmapData = new BitmapData(tucc.width, tucc.height);
bmd.draw(tucc);

var xc:int = 1;
var yc:int = 0;

var scale:Number = Math.random()*10;

var t:Timer = new Timer(1);
t.addEventListener(TimerEvent.TIMER, drawIt);
t.start();

var rots:Array = [90,270,180];
var rotCount = 0;

var cont:MovieClip = new MovieClip();
this.addChild(cont);

function drawIt(e:TimerEvent):void
{
var d:dot = new dot();
var colorTransform:ColorTransform = d.transform.colorTransform;
colorTransform.color = bmd.getPixel(xc, yc);
d.transform.colorTransform = colorTransform;
cont.addChild(d);
/*var am:Number = Math.random();
if(am<0.25) d.rotation = rots[0];
if(am<0.50 && am>0.25) d.rotation = rots[1];
if(am<0.75 && am>0.50) d.rotation = rots[2];*/
d.rotation = rots[rotCount];
if(rotCount == 2) rotCount = 0;
else rotCount++;
d.scaleX = d.scaleY = scale;
d.x = xc*2-10;
d.y = yc*2+20;
if(xc >= 500 && yc >= 333)
{
trace(“in”);
t.stop();
clearIt();
}
else if(xc >= 500)
{
xc = 0;
yc += 15;
}

xc += 15;
}

function clearIt():void
{
this.removeChild(cont);
cont = new MovieClip();
this.addChild(cont);
xc = 0;
yc = 0;
scale = Math.random()*8;
t.start();
}[/as]

Lee :-)


Commentary

  1. Gromit says:

    Great choice of example image. Some of the patterns it gives off are simply gorgeous.

  2. MadMac says:

    nice one… i like Red ! any chance to get the fla ? thx

  3. Okedi Alfred says:

    Consider this. I have a photo that I’d like to make into collage made of several other small photos. How would you go about?

  4. oliver_l1 says:

    Cool!

    btw…i think it is time for the new AIR desktop version of gtal and some brand new tutorials.Perhaps a little bit game programming.

    thx

  5. Man, it runs so smooth…

  6. vamapaull says:

    Nice and interactive :)

  7. Unique idea and really a great example

  8. uyang says:

    It’s Cool.I like it.

  9. Otto says:

    This is the type of idea that only Lee gets… How does he do it?!

  10. theRemix says:

    simply amazing… great job!

  11. james says:

    I saw something related (pixel reading and stretching) yesterday here:

    http://www.blog.lessrain.com/?page_id=573

  12. Otto says:

    Hey lee, better fix GTAL soon, I’m getting bored…

  13. felisan says:

    man, another amazing piece by Lee Brimelow.
    is it possible for you to make the .fla-file public, or perhaps comment the actionscript?

    thanks for being way out cool
    felisan

  14. felisan says:

    I’ve managed to figure some of it out myself.
    you can see what you’ve inspired me to make here:
    http://felisan.wordpress.com/2007/07/08/nye-eksempler-pa-brug-af-bitmapdata/

    you can see the actionscript i’ve used here:
    http://felisan.wordpress.com/2007/07/12/bitmapdata-eksempel/

    hope you’re enjoying you trip on the road :)

    felisan

  15. Juliano says:

    Great job.
    The fla, can we download…

  16. stijn says:

    I tried the example but it gives an error:
    “var d:dot = new dot();: call to a possible undefined method”
    he doesn’t recognize the dot-class.
    How can you fix this?

    grtz

  1. [... In this little experiment I am reading in all of the pixel values from the image of the strawberries below using the BitmapData class. I then attach a MovieClip and ...]

Leave a Comment