Something Wrong with the System

A Flash/Actionscript blog

Pixelizer (.swf and source)

Ok, new project!
This took a few hours to get going, largely because I did the ball spin animation and scrollbar from scratch. Hopefully I’ll reuse them!

You can pretty much ignore every class in this project except: pixelEngine
That’s where the magic happens!

public function setBitmapSize(newScale:Number) {
var newBitmapWidth:Number = maxBitmapWidth / newScale;
var newBitmapHeight:Number = maxBitmapHeight / newScale;
//
myBitmapData = new BitmapData(newBitmapWidth, newBitmapHeight, false, 0x000000);
//
var bitmapScale:Number = 1 / newScale;
myMatrix = new Matrix();
myMatrix.scale(bitmapScale, bitmapScale);
//
myBitmapData.draw(mySource, myMatrix);
myBitmap = new Bitmap(myBitmapData);
myBitmap.width = maxBitmapWidth;
myBitmap.height = maxBitmapHeight;
...
}

Here are the fundamentals:

  1. Figure out the size of your new bitmapData by dividing the maximum size by your reduction value. So if you’re doing a 4x reduction and your fullsize image is 200 pixels: 200 / 4 = 50 pixels.
  2. Create a matrix and change it’s scale. This will squeeze the captured image into the reduced space of the new bitmapData
  3. Draw the source data into your bitmapData, make sure to include the Matrix.
  4. Stretch your new small bitmap to fill the screen

That’s it! The rest of the code is there as support structure.

Click to see the finished project and download the source.


Change the pixelization amount by dragging the scroll bar.

Click to Download the Source

In terms of future improvements; I don't think it's very efficient to constantly recreate the bitmaps. So maybe instead of using the Matrix class I could sample pixels with setPixel() and do a fillRect to fill the specified areas with colour.
It would be more labor intensive, but it should be faster...

April 29th, 2008 by Peter Organa
Posted in AS3, Programming

One Response to “Pixelizer (.swf and source)”

  1. Anya Says:

    Very impressive, as always. 🙂