Xkcd "Click and Drag" in a "map" interface | Hacker News Reader

Xkcd "Click and Drag" in a "map" interface

xkcd-map.rent-a-geek.de

844 pointsmartius86 comments

Wow, that's... epic.

According to the reddit comments the world is 165888x79872 pixels, and the guy at the beginning is 40 pixels tall. If we assume he's 6 feet tall, the world is ~25000 x 12000 feet, 4.7 x 2.3 miles, or 7.6 x 3.7 km.

Hence the two miles comment full west from center. I declare Randall and dividuum 1st and 2nd place winners of the internet today. What's the under-over on tech world productivity loss this morning?

Billions. Seriously, 100's of millions in short term losses, but I say we make up for it in the long run.

i came into work an hour early and spent it on this

45 min here.

It's a small world after all…

There's a serious psychological phenomenon where working in a place with no windows decreases productivity by a lot. This has been attributed to the need to look out into the world in order to imagine solutions that aren't readily apparent.

Scrolling through this was like looking out the window times 100. I've already gotten more done in the last hour after looking at it than I usually do in a day.

(Wrote a blog about this btw http://news.ycombinator.com/item?id=4544257) - I think it's interesting

My favorite caption:

"Because it's there" is more poetic than, "I'm rich enough that my goals are arbitrary."

I also enjoyed:

'I'm working at a small startup. Our business model is "Taking free drinks from industry events and reselling them." Oh, hey, I should get going.'

From a couple trapped deep underground:

"Is anybody up there? If you can hear us, friend us on Facebook and follow us on Twitter!"

Here's a similar one, made with Seadragon (Deep Zoom):

http://dump.ventero.de/xkcd1110/

Thanks for using Seadragon. First thing I thought of when I clicked on the angular.js version also in the top on hn.

you guys have totally destroyed this thing ;) the beauty was that it got me to wander around like a little kid for a while. the little spots by the beach, textures, jokes, wondering which way was out of a mine shaft, the sense of taking a hike for a while. not zooming around like an all knowing cyborg.

not that I'm trying to spoil your fun of course.

After 40 minutes or more of doing that, I think it doesn't take away the wonder if I stitch together a large image just to check if I'd missed anything in the sky or underground.

These sites do make it a bit too easy, but then again, it's a nice display of a piece of technology.

I did both. Eventually got tired of wandering in tunnels, and zoomed out.

But it recaptured the joy of exploring a new video game world.

I don't know if you've ever played the 1980s-90s Spectrum/Amiga Dizzy series, but exploring this squirted pretty much the same wonderful cocktail of neurotransmitters as exploring Spellbound Dizzy did when I was a small boy.

The problem for me was the lack of metrics of how long have I dragged in every direction. Getting lost in the sky is no fun.

"not zooming around like an all knowing cyborg."

Ha ha ha ha!

The interface is a powerful extension of the piece. Wonderful stuff. Thank you.

I do wish the extension somehow captured the first three panels of the comic. The last panel is a masterpiece, but it is part of a larger story.

I think this browser is best for making sure you didn't miss anything. Part of what makes the original comic effective is that your viewing window is so small that it makes the size of the world feel very large.

I just added the three intro panels.

Thank you.

I'm looking forward to figuring out how you did this.

Randall is one of those artists that truly enriches (my) life. The IP addressing visual and the other comic that illustrated the size of scale among astronomical objects were two others that impressed me. This one tops them all.

The movie maps also make the list for me.

I like the Minecraft part ^^ http://d.pr/i/Ui9J

Thank you for explaining that. It looked familiar but not having played Minecraft I really had no idea.

Here's a 5% version I stitched together: http://basseq.com/fun/xkcd1110/

It's a big world. What are those whales doing in the sky!? Silly whales...

Douglas Adams reference (though I don't see the Bowl of Petunias...) : http://www.youtube.com/watch?v=MsK6aRuSBIc

Not sure, they don't seem to be falling. I thought they might be a reference to the Star Trek "whale probe" from The Voyage Home [1] but they're too small for that. Maybe just some random fun like the flying or underground jellyfish.

[1] http://en.memory-alpha.org/wiki/Star_Trek_IV:_The_Voyage_Hom...

Those aren't underground jellyfish, they are underwater. That part of the word (west of center, where the ships are) is ocean. But yeah, it's confusing at first.

HHGTTG was my first thought, too. But there are two whales (and no petunias).

Did anyone else see the raptor in the grass?

The answer is 42. [1]

http://m.imdb.com/title/tt0371724/quotes?qt=qt0351054

Look like humpback whales. Unlikely to be a reference, but it did remind me of the whale sequence from the second Fantasia movie: http://www.youtube.com/watch?v=LGZeT07rqlU

There's a great animated short from the 1980s called SKY WHALES. Check it out if you can find it.

I assumed this was the reference...

When you're in a region without a matching image (i.e. in the blank sky or uncarved ground), the tile is only a 1x1 image; in Firefox at least, the default image rendering technique for this is bad, as it uses something along the lines of bicubic interpolation to some shade of grey, where what is intended is that it be a solid block of colour.

My solution was to add this to the CSS:

    .leaflet-container img { image-rendering: optimizeSpeed; }

Note also that the 1x1 blank ground tiles (e.g. http://xkcd-static.rent-a-geek.de/converted/4-4-8.png) are #0a0a0a rather than #000000.

This is awesome even though it crashed my phone so hard that I had to do a battery pull! :)

If you'd like the full-screen view and ability to navigate using the keyboard, but with tiles that load when needed not just when you stop moving, try http://ares.aylett.co.uk/xkcd/ -- it uses the original tiles, so you've probably got at least some of them cached already :).

Only browser zoom, but I think that helps keep the mystique (and I don't want to try to implement it myself).

Best interface to the full high res image yet. Love it.

Is http://xkcd-map.rent-a-geek.de/#10/-21.4805/18.7811 supposed to be the Money Pit?

http://en.wikipedia.org/wiki/Oak_Island#History_of_the_Money...

Reminds me a little of Proteus (http://www.visitproteus.com) which I just came across a few days ago. There's something special about wandering around in a world where you don't know why you're there or when or where it will end.

THANKS! I saw this at XOXO but there was no name and I wanted to explore it more.

The software used to make this is on Github, plus some scaled down originals: https://github.com/dagar/xkcd-1110

Here is the real code used to run this: https://github.com/dividuum/xkcd-1110#readme

My link was to the code that made xkcd #1100 ;)

Normally a curmudgeon, I love everything about this story. The original comic is brilliant, and the various HN takes on it are getting better and better. Thanks everyone!

http://xkcd.com/1110/ for those that don't have a clue what this is about (like me).

Yet http://www.isxkcdshittytoday.com/ still isn't impressed.

wow. I'm sad that this site exists.

If xkcd really was shitty, nobody would bother making such site about it.

EDIT: I actually liked http://xkcdexplained.com, back when they were still keeping up with Randall.

Same for http://xkcdexplainedexplained.tumblr.com

Finally - the way I wanted to explore it :)

There’s also this map: http://sumamimasen.com/xkcd/1110/. It has some of the usability of this rent-a-geek map while keeping the perhaps-symbolic inability to see ahead of the original comic. It also loads faster than this rent-a-geek map.

Features: use the arrow keys to scroll (you actually can’t click and drag anymore). You can’t zoom out, but you can hold Shift to scroll quickly. This map loads tiles while you scroll, so you can keep on scrolling without stopping.

Looks like Randall had a pretty good time playing Insanely Twisted Shadow Planet.

(for those curious - http://michelgagne.blogspot.com/)

I really liked this, it seems very attractive.

Felt like the first day I got my ant farm when I was a kid. :)

What, no Gandalf chasing a Balrog down the hole?!

My days are better when I remember to check xkcd.

If you think this is cool, check out a game with the same 2D "grid-like" world that blew me away when I played it a couple years ago: Within a Deep Forest. http://nifflas.ni2.se/?page=Within+a+Deep+Forest

If he just updates it and adds to it every so often, think how he'll magnify the productivity impact! :)

Love the Cryptonomicon influences. In case anyone is wondering what those mushroom-shaped caverns are that jut up off some of the tunnels... well, you can read the book and find out ;)

Cryptonomicon is one of my favorite books of all time - I stared at that mushroom-shaped cave for the longest time trying to recall where I'd seen it!

Epic action sequences combined with cryptography, information theory, currency/economics, WWII, and a crazy ambitious tech startup idea. It doesn't get any better than that.

In case you did not see it, dividuum put together how this was served.

[1] http://news.ycombinator.com/item?id=4547840

This is amazing! I would like to see how they put this together.

If you mean the maps-type interface, just look at the page source - it's a couple lines of javascript. This is just Leaflet's standard behavior. The map itself is a series of image tiles with a predictable naming convention.

Leaflet is great: http://leaflet.cloudmade.com/

Here is the code and some information about handling the traffic https://github.com/dividuum/xkcd-1110

Will i be wrong to hope for a blog post explaining the process shortly?

Nope. I'll post the python code I used on github later/tomorrow.

The only JavaScript file seems to be http://cdn.leafletjs.com/leaflet-0.4/leaflet.js

Leaflet wasn't used on the real site though, it was used to here for easier navigation (and it's an awesome JS library). Here's the JS library xkcd.com was using

http://imgs.xkcd.com/clickdrag/1110.js

oh ok, thanks.

I love this refernce: http://xkcd-map.rent-a-geek.de/#9/33.3282/1.3815

Wow... Just wow.

apart from the javascript part, how was this drawn? by hand? software, using tools?

Yes.

Thanks for bothering to make it work with pinch to zoom on my tablet! Impressive!

First time I looked I didn't realize you could zoom out...

You can!?

I just modified the source to remove the `overflow: hidden` to the `div#comic`. That was enough to find stuff that I would have missed otherwise :)

There is also this snazzy site to get the full zoomed out version: http://xkcd-map.rent-a-geek.de/

Wow. That is art!

great toy

someone make a game based on this. take my money

Find the 'hackers' reference?

Aye. "No pool?"

Epic!

It's awesome, but the guy who coded it forgot to replace the all black squares by <div class=black> . that would've loaded so much faster - and even better with class=white above the earth.

Reply on news.ycombinator.com