The objective of allRGB is simple: To create images with one pixel for every rgb-color (16777216 to be exact); not one color missing, and not one color twice.

What a cool project! As regular readers will know, I love messing about with image manipulation in PHP, so when I heard about the allRGB project I knew I had to make an entry for it. A few false starts and about half an hour later, I proudly submitted my first entry, a 4096×4096 PNG image containing every single possible RGB colour. As one redditor put it, “It’s like poetry, just without words.”

Click for the high resolution (only 173Kb)

And now on to the code:

The authors of the allRGB project state that;

The most obvious example is a series of 16 by 16 squares, each of which consists of a gradient.

But to me the most obvious approach was to simply loop over red (0-255), green (0-255) and blue (0-255) adding a pixel for each colour; as the PHP code below illustrates:

<?
 
$w = 4096;
$h = 4096;
 
$x = 0;
$y = 0;
 
$im = ImageCreateTrueColor($w, $h);
 
for($r=0 ; $r<=255 ; $r++) {
	for($g=0 ; $g<=255 ; $g++) {
		for($b=0 ; $b<=255 ; $b++) {
			$col = ImageColorAllocate($im,$r,$g,$b);
			ImageSetPixel($im, $x, $y, $col);
 
			if($x<($w-1)) {
				$x++;
			} else {
				$x = 0;
				$y++;
			}
		}
	}
}
 
header("Content-type: image/png");
ImagePng($im);
ImageDestroy($im);
 
?>

You’ll need to up max_execution_time and memory_limit, but it’s not as hungry as you might imagine; under a minute of processing time on my meager home server.

My entry, which I’ve imaginatively entitled “Grid One”, is still undergoing review with the folks at allRGB, but I hope to be listed in their hall of fame shortly (now listed) :0) It’s similar to the existing “suave” and “tvlines” entries.

And for my next trick? I’m working on a script to convert any arbitrary image into an allRGB entry. But loops with 16 million iterations need to be carefully optimised. It’s a fun challenge, especially in PHP.

Update: Many thanks to Alexander for pointing out that my first attempt didn’t actually contain all the colours (*blush*) – code and images updated now :D

Here’s how:

1) Go to Configure->Preferences->Tools->Add->DOS Command:

2) Then enter the following in the popup dialog:

start http://php.net/manual-lookup.php?pattern=$Sel

3) Then in the tool’s preferences, untick “Capture Output” and tick “Close DOS window on exit”:

Now any time you want to lookup a function in your code, simply highlight or double-click it and press Ctrl-1 to be taken to that function’s manual page on PHP.net, in a new tab in your default web browser.

While we’re on the topic of textpad tweaks, did you know you can jump to the matching brace by pressing Ctrl-M? Very handy for spaghetti code. Share your textpad PHP IDE tips below! And if you haven’t already, why not take this opportunity to, you know, actually buy textpad after all this time? <grin>

I was browsing reddit yesterday, and I saw a thread entitled “Someone needs to make a Firefox add-on that lets you step through animated gifs frame by frame“. I thought “hey that’s a nice well defined simple idea” – just the kind of thing I love, so I registered a nice-sounding domain name and started looking at how to use PHP to split an animated gif into its component frames – I figured it couldn’t be too hard.

It wasn’t. Less than an hour later, GIFexplode.com was up and running with some bare-bones functionality based around some freeware code I’d found. I posted the link to reddit and thought “well it’s not quite a firefox extension but it’s close enough” (by the way, click any of the gifs on this page to see how GIFexplode processed them).

Within ten hours, other members of the reddit community had produced a working Firefox extension for GIFexplode, two bookmarklets, a logo, a front-end design and a spoof thread…

not to mention the 700+ animated gif files that were uploaded in that first day.

Why did everyone pitch in like that? Well I can’t speak for anyone else, but I started working on it because I thought it would be an interesting challenge.

Fame? A little – but while I got a few upvotes on reddit and earned a little respect, that really doesn’t go too far online. Fortune? Unlikely – even if GIFexplode became as popular as imageshack or tinyurl (which it won’t), I’d still have to work out a good enough revenue model to cover the hosting and bandwidth charges. Over 1.5GB was uploaded on that first day, and if GIFexplode carried on at that rate I’m sure I’d be asked to upgrade to a private server pretty quickly. Dreamhost coped excellently with the traffic though.

So that’s the story of how GIFexplode was born and, as one commenter aptly phrased it, put in front of “a live firing squad challenge”!

As to the future? Well there are a few extra features I want to implement, but I really have more important work to be doing this month. I expect the traffic to drop very sharply and hit around 10 visits per day by the end of September. Perhaps I’ll post another followup in a few months once we have some more features and the code is a bit more robust.

But in the meantime, a sincere thankyou to everyone who chipped in – if I ever do become a millionaire from this I’ll make sure you get your slice.

Some random stats:

• Around one third of the uploaded files were porn. I am amazed it wasn’t a higher proportion.
• The bouncing gif (you know the one I mean) was uploaded at least 200 times – at one point I was considering making a static page just for that gif (I still may do)
• The largest file uploaded was a 5.14Mb file of a cicada molting
• The non-porn files consisted mainly of people jumping around, trippy stuff, cartoon clips, cats and other animal antics ;0)

I’ve archived everything that was uploaded to my local machine. Is there anything you’d like to know? Any ideas or suggested features?

update: For the moment, you can browse what’s being uploaded (lots NSFW). I will clear the contents of that directory every day or so, so don’t bother linking to the files there. A better way of sharing these gifs will come in a few months.

Availability

Not currently seeking work. Sorry!

Qualifications

Oxford University 2008-2009

Subject: Computer Science MSc

Result: Pass, distinction in dissertation.

My dissertation focused on implementing Adaptive Web Sites using machine learning and Ajax. I passed modules including Object Oriented Programming with JAVA, Information Retrieval, Computational Linguistics and Compilers.

University of Wales Lampeter 2004-2007

Subject: Information Technology and Philosophical Studies BA

Result: First Class Honours, awarded Lampeter Society Prize for IT

I undertook modules in Databases, Computer Modelling, Robotics and Ethics. My final project, a game, was written in VB.NET and MSSQL.

Northampton College 1999-2001

Distinction: City and Guilds “Computer Programming – Games & Quizzes”

Pass: City and Guilds “Computer Programming – Business Applications”

Pitsford Independent School 1995-1998

9 GCSEs: Physics (B), English Lit (B), English Lang (B), German (B), French (B), Maths (C), Chemistry (C), Biology (C), Geography (C).

Commercial Experience

GG.com / Twist Digital Media: Feb 2010-current

Job Title: Web Developer

Returning to my previous role as a web developer, I am developing new products in javascript/json/xul, object oriented PHP 5 and mySQL.

Web Office Systems: Oct 2009-Feb 2010

Job Title: Web Developer

Here I was responsible for developing and maintaining business oriented web applications and web services (SaaS) using PHP, mySQL, XML-RPC and Ajax, as well as performing routine linux server maintenance.

GG.com / Twist Digital Media: 2007-2008

Job Title: Web Developer

Primarily developing in PHP5/mySQL, this role was split 70/30 between maintaining existing systems and R&D for new business directions. The company was looking to expand its web offerings with new in-browser betting games. I provided extensive input on technical feasibility for new projects, as well as being actively sought for my ideas for new business directions. During my time at GG, I redeveloped a javascript bet calculator which was deemed worthy of spinning off to a standalone website in its own right. I wrote a Firefox extension and Internet Explorer plugin for this calculator which allows people to use their sidebar to calculate bets while on other websites.

Freetimers Ltd / Poulson Enterprises Group: 2001-2005

Job Titles: Internet Programmer, Senior Database Programmer

My role at Freetimers progressed rapidly from a junior technical role to being the primary designer and maintainer of the flagship product, Freedom^TM. At Freetimers, I was instrumental in the design and continued development of all technical products now offered to clients. These products include a multi-lingual, multi-website content management system, a web-managed stock control system including ecommerce, and web-based bulk email software, as well as the multi-user admin shell.

When I first started, Freetimers websites were produced from scratch on a per-client basis. My ideas and technical expertise allowed me to create standard, re-usable and upgradable modules that enabled Freetimers to massively reduce development time and continually improve the products offered to clients. I also managed a small number of junior developers, and brought their skill level forwards; under my supervision, a web graphics designer also became a html developer, and a html/PHP developer became a PHP/mySQL developer.

General IT Skills

• Standards-Compliant HTML / JavaScript / jQuery / dHTML / Ajax / JSON / “web2.0 technologies”
• Object Oriented PHP5, PHP4
• MySQL
• VBA, VB6, VB.NET
• Excellent SEO ability; this PHP resumé is ranked in the top results for “php CV” and “programmer CV“.
• Firefox extensions, greasemonkey scripts, MSIE plugins
• Apache administration under both Windows and Linux
• My work on CAPTCHA security has been cited by w3.org
• My GPL PHP CAPTCHA script was used by Apple and Mozilla, among others.
• One of my PHP scripts has an average rating of 4½/5 from 100+ reviewers on hotscripts.net.
• I have some experience with MSSQL/SQL Server and Linux server administration using putty/SSH.

Personal Statement

I am a highly motivated individual who thrives on interesting challenges and works best under pressure. I enjoy varied work and am deeply interested in all aspects of computer technology.

My interests include machine learning, responsive UI design, and programming involving images. I also enjoy photography and science fiction. I am also a keen swimmer and collect robots and swiss army knives.

In addition to puremango.co.uk, I also maintain thingsinbooks.com and gifexplode.com.

References available on request.

function doFunction($var) {
	if(is_numeric($var)) {
		/* do some stuff*/
	} else {
		return -1;
	}
}

BLEH. How ugly is that? There’s no indication whether -1 is actually an error or a valid return value, or what it means. And other functions might use false to indicate errors so there’s inconsistency. So I’ve written a very simple function to help you give meaningful PHP error messages.

Now, PHP already comes with a built-in function for reporting errors, called “trigger_error”. But trigger_error always reports the line and file that trigger_error was called on. Which isn’t very useful.

For example:

main.php:

include('functions.php');
$x = 'test';
doFunction($x); // line 3

functions.php:

function doFunction($var) {
	if(is_numeric($var)) {
		/* do some stuff*/
	} else {
		trigger_error('var must be numeric'); // line 5
	}
}

Because we’re using trigger_error, this will output something like this:

Notice: var must be numeric in functions.php on line 5

Which isn’t very useful, because really we’d want to know that main.php:3 was where the error was actually caused.

We’d really rather see something like this:

Notice: var must be numeric in doFunction called from main.php on line 3

Here’s a function to do just that:

function error($message, $level=E_USER_NOTICE) {
	$caller = next(debug_backtrace());
	trigger_error($message.' in <strong>'.$caller['function'].'</strong> called from <strong>'.$caller['file'].'</strong> on line <strong>'.$caller['line'].'</strong>'."\n<br />error handler", $level);
}

So now in our example:

main.php:

include('functions.php');
$x = 'test';
doFunction($x); // line 3

functions.php:

function doFunction($var) {
	if(is_numeric($var)) {
		/* do some stuff*/
	} else {
		error('var must be numeric'); // line 5
	}
}
 
function error($message, $level=E_USER_NOTICE) {
	$caller = next(debug_backtrace());
	trigger_error($message.' in <strong>'.$caller['function'].'</strong> called from <strong>'.$caller['file'].'</strong> on line <strong>'.$caller['line'].'</strong>'."\n<br />error handler", $level); // line 11
}

now outputs:

Notice: var must be numeric in doFunction called from main.php on line 3
error handler in functions.php on line 11

Isn’t that much nicer. Why yes, yes it is!

By the way, if you’re having trouble getting PHP to display error messages, try setting your php.ini’s error_reporting to E_STRICT (which you should be trying to adhere to anyway), or change $level to E_USER_WARNING

You can also use the E_USER_ERROR constant to halt the PHP interpreter.

5.3.0 isn’t a hugely interesting release, but getting your PHP4 code compatible with 5 will ease the process when PHP 6 comes along. PHP6 is really where it’s at:

What’s out:
No more register_globals (finally)
No more magic_quotes (you kinda liked magic quotes? Admittedly it was handy, but when you think about it, having code that may or may not be sanitised depending on a php.ini setting is a Bad Idea™)
No more HTTP_GET_VARS and cousins. Just change to $_GET etc and you’re fine.

What’s in:
A bunch of minor fixes aaand:
Namespaces – so we can section off bits of code properly. Woohoo! more info here.

Short post today I know, but I’ve got some real coding to do :) If you’re not doing anything better, go download PHP and have a play with it.

Here’s an example of how it works on an actual google images result for “earthrise”. The user clicks the following images result:
… and here’s how the clickthrough page looks:

Before Plugin Installation

After Plugin Installation

Without the wordpress plugin installed, the user has to scroll through miles of content before they find the image they’re looking for – it’s very likely they’ll just leave in disgust.

With Google Images Link Improver, the user is shown the relevant image straight away, without ever even knowing they’ve been redirected!  Improve your search engine optimisation on google images, lower your bounce rate, connect searchers with your content :)

Download the Google Images Link Improver wordpress plugin.

Installation

1. Simply extract the zip file ^(how?) and upload the files to your wordpress blog ^(how?), in the following folder: /wp-content/plugins/
   .
2. Now log in to your wordpress admin dashboard, and navigate to the plugins menu (yourdomain.com/wp-admin/plugins.php)..
   Under “Inactive Plugins”, you’ll see an entry for “Google Images Link Improver”, something like this:
   .
   
3. Click “Activate”

That’s IT!

Now when your blog recieves a hit from google images, the Google Images Link Improver wordpress plugin will examine the keywords and image filename from google images and redirect the user to the search page with those terms as the query, thus ensuring that the user is taken to the most relevant page on your blog.

There are some settings you can use to change the way Google Images Link Improver redirects users:

If the user searched Google Images for “cute puppy pictures” and found “bobby_the_wonder_dog_231.jpg” from your site, then:

• Using Original Google Query – The user is taken to your search page with the query “cute puppy pictures”.
• Using Filename (exact) – The user is taken to your search page with the query “bobby_the_wonder_dog_231″.
• Using Filename (as query) – The user is taken to your search page with the query “bobby the wonder dog”.

I recommend using Filename (exact), but you can adjust it to better suit your own blog.

If you find the plugin useful, why not write up a quick post about it, links are always appreciated! :D

Image String Enhanced!

Demo and source code after the break!

Live Demo: PHP ImageString Demo

ImageString Source Code

The source contains code and usage examples for the following enhanced PHP Image String functions:

• ImageStringRight: Creates a right-aligned string
• ImageStringCenter: Creates a string centered on the x-axis
• ImageStringUnderlined: Underlines ImageString!
• ImageStringItalic: Write a string in italics onto an image
• ImageStringShadow: Write a string with a dropshadow onto an image

They even work with fonts you load via ImageLoadFont, which is pretty awesome!

You can even nest effects, to create for instance, right-aligned italic strings with a drop shadow!

There’s an optional final parameter on each function, $ImageString, which contains a string representing the function to use to write the string. So for instance, if we want to write a right-aligned string in italics, we can use the following code:

ImageStringRight($image, 5, 25, 'Right + Italic', $col, 5, 'ImageStringItalic');

Where:

• $image is the result of an ImageCreate or ImageCreateTrueColor call
• 5 is the font to use
• 25 is the y-offset (i.e. how far down the image the string is to be written)
• $col is the color to write the text in
• 5 is an offset from the right (otherwise the string will be right up against the edge of the image)
• and finally we send “ImageStringItalic” as the ImageString function, so that ImageStringRight creates a right-aligned string using ImageStringItalic.

To nest more than two effects (eg right-aligned, italic and underlined), you’ll need to create a “helper” function, for instance like so:

function ImageStringItalicUnderlined($image, $font, $x, $y, $str, $col) {
	ImageStringItalic($image, $font, $x, $y, $str, $col, 2, 'ImageStringUnderlined');
}

Then you can use that helper function as the “$ImageString” parameter to ImageStringRight, like so:

ImageStringRight($image, 5, 10, 'Nested Effects', $red, 'ImageStringItalicUnderlined');

The PHP source code contains quite a few examples, but if you can’t get the effect you’re looking for just drop a comment here and I’ll help you out :D

What we end up with is a small fast function that can take a source image and create something like the following:

No Blur	PHP5 ImageConvolution
No Blur	PHP4 myImageBlur

In PHP 5 you can just use ImageConvolution and the code example right out of the manual:

$gaussian = array(array(1.0, 2.0, 1.0), array(2.0, 4.0, 2.0), array(1.0, 2.0, 1.0));
ImageConvolution($image, $gaussian, 16, 0);

That’s a nice Gaussian blur in PHP5 for you. But what about your nasty old PHP4 servers? I have the answer. Actually the answer is probably “use ImageMagick and a system call”, but if you want a pure PHP/GD solution, read on.

Using a crafty mix of voodoo and ImageCopyMerge, you can create a PHP 4 blur effect that is virtually identical to the PHP5 method, as you can see by comparing the results of myImageBlur with ImageConvolution above. In tests on my local server, my method takes on average 0.43 seconds to blur a 1024*768 image, while ImageConvolution takes 0.40 – so it’s basically the same, and half a second to blur a desktop sized image is pretty decent – on a live server it’ll be even faster!

There’s some more comparisons and the source code after the break:

On the PHP ImageConvolution manual page, there’s a nice example of how it looks with text, so here’s a comparison of the two techniques:

ImageConvolution

myImageBlur

And here’s how it looks with a hedgehog :)

No Blur	PHP5 ImageConvolution
No Blur	PHP4 myImageBlur

That’s all there is to it really. Drop this function into your PHP library and off you go blurring images with PHP. You can use myImageBlur whether you’re on PHP4 or 5 and it will apply the best function; using ImageConvolution if available, else using my own voodoo-ninja PHP code. It runs pretty quickly too.

function myImageBlur($im) {
	// http://www.puremango.co.uk/2009/04/php-4-and-5-image-blur/
	if(function_exists('imageconvolution')) {
		$gaussian = array(array(1.0, 2.0, 1.0), array(2.0, 4.0, 2.0), array(1.0, 2.0, 1.0));
		imageconvolution($im, $gaussian, 16, 0);
	} else {
		// w00t. my very own blur function!
		$width = imagesx($im);
		$height = imagesy($im);
 
		// the higher, the more blurred (no impact on speed)
		// however, values>2 don't look very good. Sorry.
		$distance = 1;
 
		$temp_im = ImageCreateTrueColor($width,$height);
		ImageCopy($temp_im,$im,0,0,0,0,$width,$height);
		/*
		we *could* use this: 
		ImageCopy($temp_im,$im,0,0,0,$distance,$width,$height);
		instead, but that leads to an anomally at the top of the image.		
		*/
 
		// blur by merging with itself at different x/y offsets:
		$pct = 70; // based on empirical tests, 70% gives the most blur.
		ImageCopyMerge($temp_im, $im, 0, 0, 0, $distance, $width-$distance, $height-$distance, $pct);
		ImageCopyMerge($im, $temp_im, 0, 0, $distance, 0, $width-$distance, $height, $pct);
		ImageCopyMerge($temp_im, $im, 0, $distance, 0, 0, $width, $height, $pct);
		ImageCopyMerge($im, $temp_im, $distance, 0, 0, 0, $width, $height, $pct);
 
		// remove temp image
		ImageDestroy($temp_im);
	}
}
 
// usage:
$im = ImageCreateFromPNG('/path/to/file.png');
 
myImageBlur($im);
 
header('Content-type: image/png');
ImagePng($im);
ImageDestroy($im);

Most of the code on puremango is GPL, but this function is 100% free (as in, no strings attached) , but I do appreciate links and blog posts :D

The Online Demo generates larger camo patterns and has a few other camo types; refresh it to cycle through them.

Download PHP Source

Let me know if you find a use for this code :)

After the break, I go into the detail of how the code is constructed, and you get a funky debug image too!

Ok, so the code isn’t as pretty as it could be, but it’s good enough for me to publish, and I’m confident that it would only take an hour or two to clean it up.

Here’s that debug image I promised you:

The background fill colour is usually chosen from one of the preset camo colours, but in debug mode we make it blue. This helped me make sure that there wasn’t too much background showing through in the final image.

We then draw patches of camo in a randomly chosen camo colour. The patches are drawn in a grid covering in the entire image; each patch begins at one of the red dots in the debug image. We randomly deviate the positions of the patches a little to keep it from being too regular. We also have the patches start and end a little outside the boundary of the final image, to ensure that we don’t get a lot of background colour showing around the edges.

A patch is actually just a big square made of lots of little squares of the same colour. We make the patches irregular by a) randomly altering the dimensions of each patch, and more importantly b) on the outside edge of the patch, we sometimes don’t draw a square, so the patches end up looking like this, instead of a regular square:

Once we’ve created the whole camo pattern, we blur the whole image. Below is a before/after comparison showing the effect of myImageBlur (follow the link for an improved PHP image blur function):

Before Blur

After Blur

If you want to go deeper, the code is fairly well commented :)