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

http://xkcd-map.rent-a-geek.de/

by martius • 14 years ago

844 86 14 years ago

xkcd-map.rent-a-geek.de

reinierladan2• 14 years ago

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

ygra• 14 years ago

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

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

bicknergseng• 14 years ago

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

naugtur• 14 years ago

Finally - the way I wanted to explore it :)

rm999• 14 years ago

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.

reinierladan2• 14 years ago

It's a small world after all…

glenntzke• 14 years ago

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?

tomasien3• 14 years ago

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

mayneack• 14 years ago

45 min here.

kin• 14 years ago

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

turshija• 14 years ago

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

adaml_623• 14 years ago

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

crucialfelix• 14 years ago

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.

johndavidback• 14 years ago

"not zooming around like an all knowing cyborg."

Ha ha ha ha!

gpvos• 14 years ago

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.

graeme• 14 years ago

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.

mortenjorck• 14 years ago

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.

pimentel• 14 years ago

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.

AaronBBrown• 14 years ago

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

berserkpi• 14 years ago

Epic!

sbanach• 14 years ago

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!

bthomas• 14 years ago

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

estebank• 14 years ago

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 :)

digitalclubb• 14 years ago

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

ryangallen• 14 years ago

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

DharmaSoldat• 14 years ago

Wow... Just wow.

basseq2• 14 years ago

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...

mdda• 14 years ago

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

AceJohnny2• 14 years ago

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...

basseq2• 14 years ago

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

Did anyone else see the raptor in the grass?

antman• 14 years ago

The answer is 42. [1]

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

aamar• 14 years ago

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

brianstorms• 14 years ago

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...

tomasien3• 14 years ago

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.

tomasien3• 14 years ago

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

joeblau• 14 years ago

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

Achshar• 14 years ago

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

dividuum4• 14 years ago

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

stickfigure• 14 years ago

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/

dividuum4• 14 years ago

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

andrewaylett• 14 years ago

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).

runjake• 14 years ago

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.

alanfalcon• 14 years ago

The movie maps also make the list for me.

chernevik2• 14 years ago

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.

dividuum4• 14 years ago

I just added the three intro panels.

chernevik2• 14 years ago

Thank you.

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

Laremere• 14 years ago

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.

gulbrandr3• 14 years ago

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

frewsxcv• 14 years ago

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

gulbrandr3• 14 years ago

oh ok, thanks.

nostromo• 14 years ago

My favorite caption:

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

yaliceme• 14 years ago

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.'

lprubin• 14 years ago

From a couple trapped deep underground:

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

erikpukinskis• 14 years ago

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.

joshu• 14 years ago

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

thomasfrank09• 14 years ago

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

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

gulbrandr3• 14 years ago

I really liked this, it seems very attractive.

willvarfar• 14 years ago

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

richardjordan• 14 years ago

My days are better when I remember to check xkcd.

nikcub• 14 years ago

Find the 'hackers' reference?

mfringel• 14 years ago

Aye. "No pool?"

tylermenezes• 14 years ago

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

shawndellysse• 14 years ago

wow. I'm sad that this site exists.

pferde• 14 years ago

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.

DiabloD32• 14 years ago

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

dividuum4• 14 years ago

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

DiabloD32• 14 years ago

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

bobajett• 14 years ago

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

Kiro• 14 years ago

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

wannabeartist• 14 years ago

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

dsl• 14 years ago

Yes.

adastra2• 14 years ago

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 ;)

mdanger2• 14 years ago

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!

adastra2• 14 years ago

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.

mdanger2• 14 years ago

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...

mkramlich• 14 years ago

great toy

someone make a game based on this. take my money

chrismorgan• 14 years ago

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.

brettnak• 14 years ago

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

roryokane• 14 years ago

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.

zapfmann• 14 years ago

Wow. That is art!

ludovicurbain• 14 years ago

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.

degenerate• 14 years ago

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

WestCoastJustin• 14 years ago

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

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

tete• 14 years ago

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

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

Related Stories