Ross McNab

Random thoughts and code from a
.Net software developer.

Cheating at XKCD's Click and Drag

I've been a long time fan of the geek comic XKCD. Occasionally there's an epic map or interactive easter egg. Today's comic, Click and Drag was one of those days. It's a huge picture which you can pan around, Google Maps style. Go take a look, I'll wait here for you to return.

I spent a happy five minutes exploring before my inner programmer kicked in and I started to wonder how big the image actually was, and how it worked. A quick "view source" later and I had some Javascript to hack on.

The picture's made up from a grid of image tiles, each one is pretty big (2048 x 2048 pixels), here's a scaled down example:

The function that generates the image file names, shows that they look like 1n1e.png: tile_name=function(x,y){ x-=size[3]; y-=size[0]; return (y>=0?(y+1)+'s':-y+'n')+(x>=0?(x+1)+'e':-x+'w'); }; With n(orth) for positive y co-ordinates, s(outh) for negative, and simmilarly e(ast) and w(est) for x co-ords. There's no zero, we flip from 1n to 1s:

    2n1w.png   2n1e.png   2n2e.png
    1n1w.png   1n1e.png   1n2e.png
    1s1w.png   1s1e.png   1s2e.png

Now we know the naming scheme, we just need the bounds. Back to the source. var size=[14,48,25,33]; var tilesize=2048; var map_size=[(size[1]+size[3])*tilesize,(size[0]+size[2])*tilesize];

Which gives 81 tiles wide by 39 high, a whopping 165,888 by 79,872 pixels - that's a whole lotta dragging!

The size array also tells us how many tiles are east/west and north/south of center. So armed with this information we can now display them all on one page. I've run out of time tonight, but here's the full strip across the horizon to whet your appetite, scaled so that each 2048px image is 10px.