This is a relatively simple solution. I didn’t use any complex algorithms like edge-detection, dithering or whatever (maybe I could add those later), just plain old RGB matching. I’ll try to explain the process as best and as simply as I can.

Creating the image pool

The first step is to create your image pool.  The image pool is a directory of all the tiles that will be used in your mosaic, and every tile must be of the same size. The more tiles you have, the better results you get.

I used Irfanview to resize, crop, rotate and rename 1,983 photos for my image pool, plus a Python script I wrote to separate the portrait oriented photos from the landscape oriented ones.

Next, I wrote another Python script to create an SQLite database which stores all the data I need to create a photomosaic, instead of calculating each value every time I want to create a mosaic. It holds a reference to an image file, and 9 RGB values.

To calculate the RGB values of a tile, I didn’t just get the average color of the entire tile, instead I divided the tile into a 3×3 grid, then calculated the average RGB value of each cell in the grid (resulting in 9 values). I think this method is called “sub-sampling”. This helps in making more accurate matches. (Pardon the crappy images, I’m making these in Paint.NET)

Subdivided tile –> (Pseudo) Average colors

Generating the mosaic

Now that I have my image pool ready, I can start generating the photographic mosaic itself. I won’t go into the too much detail but basically I subdivide the source image with the size of my tiles. I then iterate over the subdivisions and further subdivide each cell into a 3×3 sub-grid to match against the tiles. I calculate and compare the RGB differences between every tile in my image pool, and get the best result (least difference). I then place the best tile into its proper position in the mosaic.

Subdivided cell –> Average colors of cell   =   Average colors of tile –> Best matching tile

I added an extra method that starts matching from the middle of the source image, going outward. This generates a mosaic where the best matches are in the center, and leftover tiles go to the edges, resulting in a better looking mosaic, especially for portraits.

Top-down matching vs. Inside-out matching

In the first one, by the time I got to the center, I ran out of good tiles to use. For the second one, the best tiles are used in the center.

Results

Try it out

This is just a bunch of Python scripts, so there is no executable to run.

Just type

>python photomosaic.py path\to\source.jpg path\to\output.jpg path\to\imagepool\dir [-options]

on the command line. Type --help to see possible options.

Of course, preparing the image pool is the most difficult part of creating a mosaic. You can use the create_image_pool.py script to do that for you. Just make sure all your tiles are of the same size, and it will automatically create an SQLite file inside your pool directory which the photomosaic generator can use.

>python create_image_pool.py path\to\imagepool\dir

If you don’t have 2,000 images lying around, you can go to this page. At the bottom of his post he has a link to .zip of photos of chemical elements. It’s already resized for you.

Right now, generating a 1,600 tiles mosaic from ~2,000 tiles takes about ~5 minutes on my slow-ish machine. My next goal would have to be speed and better matching algorithms.

Download photomosaic.zip

I wanted to post about this last week, during Tetris’ 25th anniversary, but it wasn’t done. This is my first Python app, so the code is filthy. I am quite proud of it though.

Unfortunately, I don’t know how to make an executable from a Python program, and the guys at the #python channel are less than helpful, so I’ll just put up a zip of all the files.

Python is fun and easy to learn, but I think I’ll stick with Flash. I will also be studying Django.

You need to have Python and Pygame installed to run it though, until I figure out how to make an executable.

Download the zip. Extract and run Main.py in ‘src/’ folder using Python.

private function RGBToHex(r:uint, g:uint, b:uint):uint{
    var hex:uint = (r << 16 | g << 8 | b);
    return hex;
}

private function HexToRGB(hex:uint):Array{
    var rgb:Array = [];

    var r:uint = hex >> 16 & 0xFF;
    var g:uint = hex >> 8 & 0xFF;
    var b:uint = hex & 0xFF;

    rgb.push(r, g, b);
    return rgb;
}

private function RGBtoHSV(r:uint, g:uint, b:uint):Array{
    var max:uint = Math.max(r, g, b);
    var min:uint = Math.min(r, g, b);

    var hue:Number = 0;
    var saturation:Number = 0;
    var value:Number = 0;

    var hsv:Array = [];

    //get Hue
    if(max == min){
        hue = 0;
    }else if(max == r){
        hue = (60 * (g-b) / (max-min) + 360) % 360;
    }else if(max == g){
        hue = (60 * (b-r) / (max-min) + 120);
    }else if(max == b){
        hue = (60 * (r-g) / (max-min) + 240);
    }

    //get Value
    value = max;

    //get Saturation
    if(max == 0){
        saturation = 0;
    }else{
        saturation = (max - min) / max;
    }

    hsv = [Math.round(hue), Math.round(saturation * 100), Math.round(value / 255 * 100)];
    return hsv;

}

private function HSVtoRGB(h:Number, s:Number, v:Number):Array{
    var r:Number = 0;
    var g:Number = 0;
    var b:Number = 0;
    var rgb:Array = [];

    var tempS:Number = s / 100;
    var tempV:Number = v / 100;

    var hi:int = Math.floor(h/60) % 6;
    var f:Number = h/60 - Math.floor(h/60);
    var p:Number = (tempV * (1 - tempS));
    var q:Number = (tempV * (1 - f * tempS));
    var t:Number = (tempV * (1 - (1 - f) * tempS));

    switch(hi){
        case 0: r = tempV; g = t; b = p; break;
        case 1: r = q; g = tempV; b = p; break;
        case 2: r = p; g = tempV; b = t; break;
        case 3: r = p; g = q; b = tempV; break;
        case 4: r = t; g = p; b = tempV; break;
        case 5: r = tempV; g = p; b = q; break;
    }

    rgb = [Math.round(r * 255), Math.round(g * 255), Math.round(b * 255)];
    return rgb;
}

The code above requires and returns:

• RGB values between 0 to 255
• Hexadecimal in RRGGBB format
• Hue values between 0 to 360
• Saturation and Value between 0 to 100

Notice that the “middleman” is RGB.

And, just in case you only have the Hexadecimal string to work with, here is the code to convert that string into a usable decimal value.

private function HexToDeci(hex:String):uint{
	var deci:uint = 0;
	var power:uint = hex.length - 1;
	for(var i:uint = 0; i < hex.length; i++){
		var char:String = hex.charAt(i);
		if(parseInt(char) >= 0 &&  parseInt(char) <= 9){
			deci += parseInt(char) * Math.pow(16, power);
		}else{
			switch(char){
				case "A": case "a":	deci += 10 * Math.pow(16, power); break;
				case "B": case "b":	deci += 11 * Math.pow(16, power); break;
				case "C": case "c":	deci += 12 * Math.pow(16, power); break;
				case "D": case "d":	deci += 13 * Math.pow(16, power); break;
				case "E": case "e":	deci += 14 * Math.pow(16, power); break;
				case "F": case "f":	deci += 15 * Math.pow(16, power); break;
			}
		}

		power --;
	}
	return deci;
}

EDIT: I’ve just gathered that there is a much much simpler way to convert a Hexadecimal string into a usable number. I feel kind of stupid right now.

private function HexToDeci(hex:String):uint{
        if (hex.substr(0, 2) != "0x") {
                hex = "0x" + hex;
        }
        return new uint(hex);
}

Metaballs – move your mouse around.  Click to change the target ball.

Still looking for a more elegant solution for Flash. This is done on a very small stage size, with only 4 balls. I want to do a full screen version, with at least 10 balls moving around.

After Googling around, I found this tutorial on Metaballs and computer graphics.

I ported the code into AS3, but the result is not very impressive. It is very slow and processor heavy. If you click on the stage, the last Metaball added will be moved, and as you can see, it takes a bit of time to redraw them. I’m not even thinking about animating this.

I’m still looking for a more elegant solution for Flash, hopefully one that uses the Vector-based drawing API of Flash, and not BitmapData.

UPDATE: I have an updated version here. Also, I linked the image above to the updated one. For comparison, the old one is here.

Link.

If anyone knows something better, please let me know. 

I’ve been playing around with Papervsion lately, and have finally understood how to make it work, albeit only lightly. Here is one of my first attempts with Papervision. It’s just a bunch of spheres, where clicking on one will move the camera to its position, while the camera focuses on the center.

It’s not much. I’m still working on it, but I just wanted to post something here. Check it out. Flash Player 10 is required.

Update: I’ve added a depth of field effect. It’s not very “accurate”, but it’s a nice touch. I don’t know how to do it efficiently, so it might be CPU intensive.

Update 2: I’ve added random movement to the particles.

As always, the source.

I finally figured out how to setup external class libraries in FlexBuilder, which took longer than I would have hoped. Now I can use Papervision3D, Away3D and have a central library for all other API’s and classes.  It’s not as enjoyable as FlashDevelop, but, it’s better than nothing.

I also started playing with PV3D, which is just awesome. Very fun to play around with, and I can’t wait to make something I could use for my eternally work-in-progress site.

And finally, there’s a new tweening engine on the block. It’s called gTween and it’s made by Grant Skinner, so you know it’s great. Like TweenLite, it aims for speed and it’s also very lightweight. It’s still in beta, and not as powerful and feature-packed as TweenMax or other tweening engines. I haven’t tested it enough to choose it over TweenLite yet, but, I like it’s different approach to creating and managing (yep, you could manage, edit, reuse and even nest) tweens. Check it out here.

And, yeah, I would post my little “experiment” with Papervision, but I can’t seem to extract/find the swf file. I even tried using the .as file as a Document class to a Flash file, but I still can’t double-click and play the movie.

I am also having trouble with FlexBuilder, whenever I Run/Play button to test a project, it often doesn’t show anything until several retries or not at all, but using the .as file as a Doc class to a Flash file, it plays fine. Any help would be very much appreciated.

Click on the image below to see the effect.

What’s happening is, I get the size of the image, divide it by the size of the “pixels” I want, then create an array of Rectangles positioned in a grid over the image.
I then fill each Rectangle with the color of the pixel in it’s center by using the getPixel() and fillRect() methods of the BitmapData class.
Here is the central function doing the pixelating.

private function pixelate(bitmap:Bitmap, strength:Number):void {
var _x:int = 0; // position of the rectangle
var _y:int = 0;
if (strength > 1){
_strength = 1;
}
var _strength:Number = strength; // multiplier for size of "pixels"

var _w:Number = bitmap.bitmapData.width * _strength; //size of "pixels"
var _h:Number = bitmap.bitmapData.height * _strength;

var nH:int = Math.ceil(bitmap.bitmapData.width / _w); // number of rectangles needed horizontally
var nV:int = Math.ceil(bitmap.bitmapData.height / _h);// number of rectangles needed vertically

var rectangles:Array = []; // Rectangles array

//create rectangles
for (var i:int = 0; i < nV; i ++){
var targH:Number = _h;
if (i >= nV - 1){
targH = bitmap.bitmapData.height - _y;
}
for (var j:int = 0; j < nH; j ++){
var targW:Number = _w;
if (j >= nH - 1){
targW = bitmap.bitmapData.width - _x;
}
rectangles.push(new Rectangle(_x, _y, targW, targH));
_x += _w;
}
_x = 0;
_y += _h;

}
//fill in rectangles
for (i = 0; i < rectangles.length; i++){

var rect:Rectangle = rectangles[i];
var pix:uint = _states[0].getPixel((rect.x + rect.width / 2), (rect.y + rect.height / 2));
bitmap.bitmapData.fillRect(rect, pix);
}

saveCurrentState(bitmap.bitmapData);

}

Now for the reverting to the original image part, I had to improvise. Since I overwrote the BitmapData with a bunch of filled rectangles, I couldn’t do much with it.
So I used an array which stores each “state” the BitmapData is in. And I could just retrieve the BitmapData in the array and copy it into the original BitmapData.

private function saveCurrentState(bitmapData:BitmapData):void {
_states.push(bitmapData.clone());
}
private function revertToState(stage:int):void {
try{
bmData.copyPixels(_states[stage], bmData.rect, new Point(bmData.rect.x, bmData.rect.y));
}catch (e:Error){
throw new Error("Invalid state. ");
}
}

To create the animation, I just called the pixelate() function through a Timer at 300 milliseconds.

Flash Player 9 introduced a new system management feature called a garbage collector (GC). Basically, what it does is “sweep” for objects that can not be used/accessed anymore, and delete them, freeing memory. Until those ‘null’ objects are removed by the GC, they will sit in memory until the Player is closed.

So, whenever you want something to be deleted (escpecially with CPU intensive particle systems), you must be aware of what and where you are referencing your objects, so you could easily remove them.  You have to do this by hand. One method is to set all objects you want to delete, and all references to it,  to null. Even then, you have to wait for the GC to do its “sweeping motion” for those objects to be deleted.

Another thing to watch out for are event listeners. Make sure you remove any listeners (by calling removeEventListener()) from objects you want to delete, since they also hold a reference to your objects.

Check this article series for more details and info about the GC and resource management in Flash Player 9/AS3.

And lastly, it is about unloading external swf’s through Loader. You might think that using unload() from a Loader would remove that swf completely, but that isn’t the case.  In fact, unload() does a pretty poor job at “unloading” swfs. Here is a quote from another article that explains this in great detail:

In AS3, calling Loader.unload() simply removes the reference to the loaded movie. If any other references exist to the loaded content, it will not be unloaded.

My site has been delayed by almost a month now, trying to figure out and fix my memory leak problem. I finally have an idea of what’s wrong, now I have to figure out a solution.