11.2.24 Special FX, PixelateThis is NOT the latest copy of this book; click here for the latest version.
The pixelate effect is designed to make images look blockier and less detailed, as if they were created at a lower resolution and then scaled up. As with the other algorithms so far, pixelate is very easy: pick the size of each pixel block, scan through all the rows and columns one block at a size, get the colour at the top-left of each block, and draw a filled rectangle the size of each block in that colour.
In code, that looks like this:
function pixelate(&$image) {
$imagex = imagesx($image);
$imagey = imagesy($image);
$blocksize = 12;
for ($x = 0; $x < $imagex; $x += $blocksize) {
for ($y = 0; $y < $imagey; $y += $blocksize) {
$rgb = imagecolorat($image, $x, $y);
imagefilledrectangle($image, $x, $y, $x + $blocksize - 1, $y + $blocksize - 1, $rgb);
}
}
}
The -1 parts in imagefilledrectangle() are necessary so that we draw the correct block size. For example, as pictures start from 0, if we drew a rectangle from (0,0) to (13,13) it would actually be 14 pixels square. Although this might sound unimportant, creating such a rectangle would overlap our block size by one, which means that the next time go around the loop we would read the pixel colour of our previous rectangle - this would end up making the image all one colour!
The picture generated by the code above is shown below:
The problem with the pixelate effect is that currently we only use the first pixel in a pixel block as the colour for the entire rectangle. Although this is fast and easy, it would be more accurate to read all the colours that will be included in the pixel block and average them to get the new colour. Notice about that to the above-right of the planet is a light-blue patch where a star just happened to be in the right place to be used as the colour for the entire block. Although it does make for quite a nice effect, it also means that the pixelate effect as it stands will often lose large chunks of detail simply because no colour averaging is done.
The code for the improved algorithm is more complicated, as you can imagine, but once you have mastered it you should be able to take the blur effect in your stride!
Here is the improved function:
function pixelate(&$image) {
$imagex = imagesx($image);
$imagey = imagesy($image);
$blocksize = 12;
for ($x = 0; $x < $imagex; $x += $blocksize) {
for ($y = 0; $y < $imagey; $y += $blocksize) {
// get the pixel colour at the top-left of the square
$thiscol = imagecolorat($image, $x, $y);
// set the new red, green, and blue values to 0
$newr = 0;
$newg = 0;
$newb = 0;
// create an empty array for the colours
$colours = array();
// cycle through each pixel in the block
for ($k = $x; $k < $x + $blocksize; ++$k) {
for ($l = $y; $l < $y + $blocksize; ++$l) {
// if we are outside the valid bounds of the image, use a safe colour
if ($k < 0) { $colours[] = $thiscol; continue; }
if ($k >= $imagex) { $colours[] = $thiscol; continue; }
if ($l < 0) { $colours[] = $thiscol; continue; }
if ($l >= $imagey) { $colours[] = $thiscol; continue; }
// if not outside the image bounds, get the colour at this pixel
$colours[] = imagecolorat($image, $k, $l);
}
}
// cycle through all the colours we can use for sampling
foreach($colours as $colour) {
// add their red, green, and blue values to our master numbers
$newr += ($colour >> 16) & 0xFF;
$newg += ($colour >> 8) & 0xFF;
$newb += $colour & 0xFF;
}
// now divide the master numbers by the number of valid samples to get an average
$numelements = count($colours);
$newr /= $numelements;
$newg /= $numelements;
$newb /= $numelements;
// and use the new numbers as our colour
$newcol = imagecolorallocate($image, $newr, $newg, $newb);
imagefilledrectangle($image, $x, $y, $x + $blocksize - 1, $y + $blocksize - 1, $newcol);
}
}
}
I have scattered comments throughout that to make it more easily understood, the but the logic behind it is quite easy: check all the pixels within the block, add up all their red, green, and blue values and divide by the block size to get the average RGB, then use that value for the rectangle. There is error checking in there to make sure we don't try to read pixels that don't exist, but otherwise the whole algorithm is predictable.
The result of the new algorithm is shown below - note the extraneous star is now missing, as one or two dots out of 144 is not enough to sway the overall colour noticeably.
|
Want to see this stuff in print? PHP in a Nutshell takes the core topics covered here, adds in thousands of edits from the editorial team and myself, and combines them to make an unbeatable reference for PHP programmers at all levels.
My latest book has hundreds more tips on how to use PHP, Apache, and MySQL, plus Perl, Python, shell scripts, performance tuning, and more!
|
