September 19, 2012

Analyzing XKCD: Click and Drag

Today, xkcd featured a comic with a comically large image that is navigated by clicking and dragging. In the interests of SCIENCE (and possibly accidentally DDoSing Randall's image server - sorry!), I created a static HTML file of the entire composite image.1

The collage is made up of 225 images2 that stretch out over a total image area 79872 pixels high and 165888 pixels wide. The images take up 5.52 MB of space and are named with a simple naming scheme "ydxd.png" where d represents a cardinal direction appropriate for the axis (n for north, s for south on the y axis and e for east, w for west on the x axis) along with the tile coordinate number; for example, "1n1e.png". Tiles are 2048x2048 png images with an average size of 24.53 KB. If you were to try and represent this as a single, uncompressed 32-bit 79872x165888 image file, it would take up 52.99 GB of space.

Assuming a human's average height is 1.8 meters, that would give this image a scale of about 1 meter per 22 pixels. That means the total composite image is approximately 3.63 kilometers high and 7.54 kilometers wide. It would take an average human 1.67 hours to walk from one end of the image to the other. Note that the characters at the far left say they've been walking for 2 miles - they are 67584 pixels from the starting point, which translates to 3.072 km or ~1.9 miles, so this seems to indicate my rough estimates here are reasonably accurate.

If Randall spent, on average, one hour drawing each frame, it would take him 9.375 days of constant, nonstop work to finish this. If he instead spent an average of 10 minutes per frame, it would take ~37.5 hours, or almost an entire 40-hour work week.

Basically I'm saying Randall Munroe is fucking insane.

1 If you are on firefox or chrome, right-clicking and selecting "Save as" will download the HTML file along with all 225 images into a separate folder.
2 There are actually 3159 possible images (39 x 81), but all-white and all-black images are not included, instead being replaced by either the default white background or a massive black <div> representing the ground, located 28672 pixels from the top of the image, with a height of 51200.

18 comments:

  1. Someone else had pointed out that the blank tiles actually return as an empty URL and that his 'viewer' just interprets it as black, below the horizon, and white, above the horizon. So the overall number of tiles that contain art is a bit smaller than your estimate. That being said, its still a huge undertaking and Randall Munroe is still fucking insane.

    ReplyDelete
    Replies
    1. On second thought, perhaps this was just speculation: https://plus.google.com/u/0/103067286453763274834/posts/8jBSM31xBCX

      Delete
  2. Good on you Sir! I have been too lazy to do so...

    ReplyDelete
  3. Here is a low-res version of the whole image:
    http://www.wickedglitch.com/2012/09/full-low-res-image-spoiler-map-xkcds-click-and-drag/

    ReplyDelete
  4. Randall being insane wasn't a known fact?

    ReplyDelete
  5. Thanks for the static HTML file, much better to 'walk' around. :D
    There's a hidden jellyfishes: 2s9w.png 1s6w.png
    Or two flying wales: 13n1e.png
    Or a falling guy: 3n2e.png
    Don't miss the airplanes: 3n3e.png 3n10e.png 3n18e.png 2n4w.png 7n7w.png
    What about a hot-air balloons? 5n12e.png 6n1e.png
    Star Wars TIE Fighter: 8n6e.png
    Or space rocket: 9n2e.png
    Falling stuff (?): 6n5w.png

    There's still so much space that hasn't been used. ^^
    This reminds me of those websites where you create big pixel images by collaboration. :D

    ReplyDelete
  6. Ah, come on. Most of the elements in the assembled image are taken from photo reference, and silhouetted using brightness/contrast functions. There weren't "drawn".

    Don't get me wrong. It's cool.

    But seriously, the full scale image is a project more like a research paper than it is a drawing. It's a matter of gathering usable images, and treating them with filters, and then assembling them. It's like gathering your favorite tracts of text from an encyclopedia, and then running search and replace/spell check functions. Keeping the images in scale with each other, and working with a very large image, while keeping it free of defects are the true difficulties. That problem is solved the same way it's processed, square by square. 225 x 225 is a lot, but many get thrown out as white space or black space.

    Yes, I understand that the picture is annotated with Randall's characters, but those annotations to the image would have been done in-line, while Randall is stitching together the image and inspecting it for flaws.

    I'm not saying it isn't impressive in it's own right, but the scale of it's difficulty should be measured by the count of individual recognizable elements, not it's literal dimensions, or how many tiles. The dimensions are a by-product of the included elements.

    ReplyDelete
    Replies
    1. This comment has been removed by the author.

      Delete
  7. I made a fullscreen version similar to the HTML file you created. Take a look.

    ReplyDelete
    Replies
    1. That one doesn't respond very well to zooming out, but it's a lot easier to navigate.

      Delete
  8. The best version I've seen allows you to zoom in and out. A more efficient waste of time!

    ReplyDelete
  9. Have you guys seen the velociraptors?

    ReplyDelete
    Replies
    1. The velociraptors are on 1n27w.png, for any interested.

      Delete
  10. Why hasn't anyone loaded this in Photosynth yet? :p

    ReplyDelete
  11. It's not Photosynth, but I have done one using deepzoom (seadragon for the pedants)

    http://clickanddrag.azurewebsites.net

    ReplyDelete
  12. What? Why is spending 40+ hours on an artful web thingy "insane"? This is what art is about people!

    ReplyDelete
  13. I don't think he does it for the money, or for the readers...
    I think he does it for himself.

    Don't get me wrong he thinks of us as he does what he does, and I am not trying to paint him as any sort of selfish person.

    I think he does stuff that he thinks is cool or fun, stuff he can be proud of. anyone remember when he added depth to all of his comics for a short time?

    Look at this as something done not to reach a goal per say but more to see if he can or to use an idea that he came up with that seems awesome. Suddenly the time consumed becomes less of an issue, and the question goes from why to what is he going to do next? who to tell? who will think this is as awesome as I do?

    and as far as:
    "Basically I'm saying Randall Munroe is fucking insane."

    Since first finding this comic years ago not once have I thought he was totally sane, and that is why I keep coming back!

    ReplyDelete