FixOutlook mosaic avatar finder

As I wrote earlier, the fantastic FixOutlook.org initiative created an enormous mosaic of all supporter’s avatars. Because it’s quite a lot of work to find your own avatar between 18,040 avatars I decided to give it a try using PHP and GD.

First I tried to do it by pixel scanning, using GD’s imagecolorat() function. By looping over every pixel (there are 30,992,064 in the image) and saving its RGB values to a MySQL database we create a table describing every pixel. By feeding a tile to the same pixel scanning functions we can look the pixels of that tile up in the table and have the coordinates of the tile returned. Nice solutions, but an enormous resource hog.

My colleague Andries suggested a different method: clipping the image in separate tiles and then calculating the MD5 hash of the image. We then do the same for the needle tile and look for a collision. This should be much faster but only works when the original tiles are not edited when put in the mosaic. I know that the avatars are resized from the original 73×73 pixels to 48×36 pixels, but I don’t know whether any other filters are applied. My own avatar is actually not in the mosaic (I can tell that with certainty because the mosaic was already high and dry upon the Redmond wall when I tweeted my support) and I don’t know anyone who is included. So if you happen to be in the picture and still have the original Twitter avatar, please leave a comment. I fired off an e-mail to The E-mail Standards Project asking them whether any filters were applied during the creation of the mosaic.

Another idea (by my colleague Nils) would be to use ImageMagick’s compare function which shows the differences between two images. Using this method has the advantage that the original avatar may be edited, since it can return the actual difference between the needle and the haystack. But first I need a source avatar… I’ll keep you updated!

For those who are interested in the code which did the clipping, here it is. It only took 16.2656 seconds to complete the tiling of the full mosaic on my Macbook Pro. Quite impressive! I had to increase the memory limit in my php.ini file though. After clipping is completed you’ll have 18,040 avatars sitting in the tiles/ directory which can be read by PHP’s md5_file() function.

// Create image resource (from mosaic file)
$image = imagecreatefrompng('fixoutlook-mosaic.png');

$i = 0;
for ($x = 0; $x < $width; $x = $x + 48) {

    for ($y = 0; $y < $height; $y = $y + 36) {

        // Create resource for new tile
        $dest = imagecreatetruecolor(48, 36);

        // Copy tile from mosaic
        imagecopy($dest, $image, 0, 0, $x, $y, 48, 36);

        // Save tile
        imagepng($dest, 'tiles/tile_' . $i . '.png', 0);

        // Remove tile from memory
        imagedestroy($dest);

        $i++;
    }
}

PS: This great syntax highlighting is done using the Syntax Highlighter WordPress plugin.