Image Mosaics with GD

Image mosaics are pretty damn cool. They're those pictures that were fantastically popular in advertising during the late 1990s, invented by a clever chap at MIT. A picture made up of hundreds, even thousands, of tiny little pictures. Actually making them seems like a complicated affair, but with some PHP, the GD library, and MySQL its not as bad as it might appear. In fact, the principle is extremely simple.

On a computer images are made up of pixels. Each one is a solid block of colour. Computer based images are all made up of this individual building blocks.

If you take a small image, and add up the colour values for all the individual pixels, then divide the total by the number of pixels in the image you will end up with the average colour value for the overall image. So, if you have an image of, for example, a lawn, the average image colour will be a shade of green. This is the key to making an image mosaic. We take an image, and for each of the pixels in it we draw a small image that has approximately the same average colour. When viewing the larger image our eyes see the average colour and build the original image back up.

The image mosaic process is made up of 2 distinct stages. First of all you need to collect the images you will be using as "tiles", the small images. These all need to have their average colour values calculated and stored. Then, once you have enough images to make a good looking mosaic, you need to go through another image taking one pixel at a time and finding a small image of approximately the same overall colour. These small images are copied into a larger grid that will eventually become the final mosaic image.


<?php

$tiledir = "tiles";

$dir = openDir($tiledir);

while ($file = readDir($dir)) {

if ($file != "." and $file != "..") {

//Process tile image and //save information to database

}

}

?>

As we step through the tile images we need to calculate the average colour of each one. In this example we'll use a MySQL database as there are RAM limitations in some PHP installations. If you're running the code on your own server it might make sense to copy the colour data into memory when it comes to generating the mosaic.


<?php

$image = imagecreatefromjpeg($tiledir."/".$file);

for ($x=0;$x<imagesx($image);$x++) {

for ($y=0;$y<imagesy($image);$y++) {

$rgb = imagecolorat($image,$x,$y);

$r = ($rgb >> 16) & 0xFF;

$g = ($rgb >> 8) & 0xFF;

$b = $rgb & 0xFF;

$i[$file]['r'] += $r; $i[$file]['g'] += $g; $i[$file]['b'] += $b; $i[$file]['total']++;

}

}

?>

Each of the colour channels, red, green, and blue is extracted from each pixel, and the values are added together in an array. Also, a count of the total number of pixels is kept.


<?php

$sql = "insert into sourceimage (filename, r, g, b) ";

$sql .= "values ";

$sql .= "("; $sql .= "'".$file."',";

$sql .= "'".round($i[$file]['r']/$i[$file]['total'])."',";

$sql .= "'".round($i[$file]['g']/$i[$file]['total'])."',";

$sql .= "'".round($i[$file]['b']/$i[$file]['total'])."',";

$sql .= ");";

?>

Move to page: 1 2

Comments

Comments are not currently being accepted for this article.

Sidebar

Published:

17/01/2007

Views:

2599

Author:

Chris Neale

Labels:

gd, image, mosaic, php

Print:

View print version