Pixels from the Edge

For some reason I decided I wanted to create a comic-ized image of myself from a photo. I think initially I wanted it to create myself some sort of digital avatar, but in the end it was out of pure obsession. See I figured it was a really normal thing to want to do and I’d find a bunch of free websites out there where I could upload a photo of myself and it would convert it. Not so (admittedly I was searching from ‘comicize’ when I think the correct term is more like ‘posterize’), there are some sites out there that do it but they’re pretty lame. In my mind I was looking to do something along the lines of A Scanner Darkly to a photo of myself. I was so convinced it was such a normal thing to want to do that I started researching how to do it in code. There’s a lot of websites out there explaining how to do it in Photoshop but nothing in code. So after an hour reacquainting myself with the PHP GD library I was all set and ready to do it, and I realized I didn’t have a clue how to actually achieve this. So after some messing around I came to the conclusion that GD just isn’t powerful enough, and there’s something new called ImageMagick that is way more powerful and seems like it really has the capabilities to pull something like this off. Except it’s not really available for Windows yet and it isn’t installed on my Linux box, and I’m way too impatient to switch gears and work on getting it installed before I continue of my quest to comicize a photo. So I found this tutorial which is showing how to achieve the look in some old software, it seems to do a fairly good job at a basic level, so I figured if I could replicate that in PHP I’d at least satisfy myself for the time being.

Step 1
Just as the tutorial says, the first step is to open the image.

<?php
$imgName="beard.jpg";
$imgSource = imagecreatefromjpeg($imgName);
?>

Step 2
The second step is to create the black and white canvas, using getimagesize() to size it to the original photo.

<?php
list($w,$h)=getimagesize($imgName);
$imgK=imagecreatetruecolor($w,$h);
?>

Step 3
The third step is the most complicated. Unlike the application used in the tutorial which has a nice interface, we have to create the code to do this ourselves. We loop through every pixel of the source image and compare its tone. This was the only variable in the code I had to tweak to match the example image in the tutorial. The RGB sum image can add up to a total of 765 (255*3). I played around and found that 300 was pretty much an exact match to the “Threshold Level” of 104 called out in the tutorial, this value may change depending on the contrast of the source image. So in the code if the sum of the RGB value is above 300 we allocate a white pixel to the coordinate, otherwise we allocate to it a black pixel.

<?php
for($y=0;$y<$h;$y++){
  for($x=0;$x<$w;$x++){
    $rgb = imagecolorat($imgSource, $x, $y);
    $r = ($rgb >> 16) & 0xFF;
    $g = ($rgb >> 8) & 0xFF;
    $b = $rgb & 0xFF;
    $bw=$r+$g+$b>300?imagecolorallocate($imgK,255,255,255):imagecolorallocate($imgK,0,0,0);
    imagesetpixel($imgK,$x,$y,$bw);
  }
}
?>

Step 4
Just like in the tutorial, in step 4 we merge the black and white image over the original with an opacity of 40%. We’ll also use this step to write out the image to the browser (sending the correct headers also).

<?php
imagecopymerge($imgSource,$imgK,0,0,0,0,$w,$h,40);
header("Content-type: image/png");
imagepng($imgSource);
?>

The dark shadows help give the image more shading, and the white layer helps smudge and tone down the number of colors that the original photo had, both of which contribute to a more comic-ish effect. It’s worked out quite well with this image when using the exact same settings as created replicating the tutorial, but testing it out on other images it’s obvious it all needs to be adjusted on a case by case basis, and as the tutorial points out, this technique only really works well with faces.

Anyways this has been a taste at something I’ve never tried before. For a long time I’ve thought about what makes up an image, where the light and colors come from and how they all work together to make or break and image. It’s all very interesting and I am eager to pickup Photoshop and really start learning how to do some usefull effects, and install imageMagick and replicate what I’ve learnt in my code.