Today I stumbled across a link at Simon Willison's blog:

Visual Security: 9-block IP Identification
Smart (and pretty) trick for showing a representation tied to a commenter’s IP address without affecting their privacy

It is very cool indeed. Don Park's idea is to use a commenter's IP address to generate a pretty graphic from a few basic shapes. By combining multiple types of shapes, different colors and rotation it is possible create a lot of different graphics. They then can be used as a kind of avatar to make comments by the same poster easy to spot. He calls this “identicon”, you can see the one generated for my IP on the right.

Here at my blog I currently use the Gravatar service to display avatars in the comments. Unfortunately this means users need to sign up at the Gravatar site¹⁾. Only a few commenters already did that, for all others a boring “no avatar” image is displayed.

Fortunately Gravatar lets you send them a redirect URL with the query for the avatar image which will be used if the commenter doesn't have a Gravatar. The next logic step is to use this to redirect back to a similar mechanism as Don Park's identicon. But aren't geometrical graphics a little bit boring? I thought so and Don Park did as well and listed a few other image generator examples that could be used as well. One of them being Combinatoric Critters. Check it out, its an automatic generator for cute little creatures.

I loved the idea and fired up my GIMP to create my own little monsters…

The above is a randomly generated one. Interested in how the code behind it works? Read on…

It's simple: A monster is created from the following parts: body, arms, legs, eyes, mouth and hair. For each of the parts I created multiple versions – each in it's own PNG image. All I need to do then is using PHP's image support (libGD 2) to merge the images. Lets have a look at the code:

<?php
build_monster($_REQUEST['seed'],$_REQUEST['size']);
 
function build_monster($seed='',$size=''){
    // init random seed
    if($seed) srand( hexdec(substr(md5($seed),0,6)) );
 
    // throw the dice for body parts
    $parts = array(
        'legs' => rand(1,5),
        'hair' => rand(1,5),
        'arms' => rand(1,5),
        'body' => rand(1,10),
        'eyes' => rand(1,10),
        'mouth'=> rand(1,10)
    );
 
    // restore random seed
    if($seed) srand();
 
    // create backgound
    $monster = @imagecreatetruecolor(120, 120)
        or die("GD image create failed");
    $white   = imagecolorallocate($monster, 255, 255, 255);
    imagefill($monster,0,0,$white);
 
    // add parts
    foreach($parts as $part => $num){
        $file = dirname(__FILE__).'/parts/'.$part.'_'.$num.'.png';
 
        $im = @imagecreatefrompng($file);
        if(!$im) die('Failed to load '.$file);
        imageSaveAlpha($im, true);
        imagecopy($monster,$im,0,0,0,0,120,120);
        imagedestroy($im);
    }
 
    // resize if needed, then output
    if($size && $size < 400){
        $out = @imagecreatetruecolor($size,$size)
            or die("GD image create failed");
        imagecopyresampled($out,$monster,0,0,0,0,$size,$size,120,120);
        header ("Content-type: image/png");
        imagepng($out);
        imagedestroy($out);
        imagedestroy($monster);
    }else{
        header ("Content-type: image/png");
        imagepng($monster);
        imagedestroy($monster);
    }
}

You see it's not much code for the real work. To use MonsterID as an identification (eg. the same commenter always gets the same monster assigned) I used a simple trick: I choose body parts with the rand function but initialize the random generator with a value dependent on a provided identification. For this I use the same email MD5 sum that is used to get the user's Gravatar.

Do you like it? Cheer up! I hereby release the code and graphics under the Creative Commons Attribution 2.5 License – unleash the monsters…

Update: Because many people seem to like it, I just enhanced the package a little bit and gave it its own project page. I added a few more bodies and eyes and assign the body color dynamically as well. This makes the monsters even more distinguishable. Get your monsters at MonsterID.

Similar posts:

• Avatar 3D
• Search Delicious with Google CSE
• A Pirate Map with LibGD and Google Maps