1110:"Click and Drag"

[leromarinvit]

References "Luke" who appears to be godly with JS.

Taking a while stab in the dark that propuke helped/coded the JS for the Randallmiester.

Makes sense, there's another (rather more obvious) "Luke" reference. Don't remember if it's above or below the lemonade, I think below.

This seriously needs a disclaimer "Don't open unless you have no plans for the next few hours." I just spent at least 20 min exploring it, and I don't think I've seen anywhere near all of it. All while I should be studying for today's exam...

[Icalasari]

Too save you some time, things I've found in the sky so far:
http://imgs.xkcd.com/clickdrag/3n3e.png
http://imgs.xkcd.com/clickdrag/3n2e.png
http://imgs.xkcd.com/clickdrag/3n10e.png
http://imgs.xkcd.com/clickdrag/3n18e.png
http://imgs.xkcd.com/clickdrag/5n12e.png

I found two more to add to that:

http://imgs.xkcd.com/clickdrag/13n1e.png
http://imgs.xkcd.com/clickdrag/6n1e.png

[SheepEffect]

For those who want a quick solution, I managed to make browsing much easier with a couple CSS tweaks. You'll have to be acquainted with your browser's developer console.

#comic
disable "overflow: hidden;"

For the image that's the first child of the above div, set "display: none;"


Then just hold Ctrl and press minus to zoom out.

[Cecil]

And done.

big8.png is scaled down by a factor of 8, to 20736 x 9984. I can generate bigger images, but my computer (8GB RAM) almost crashed trying to open the scaled-down-by-4 one.

Be very careful opening big4.png. It's only 400K but it's also 41472x19968.

[Annihilist]

I'd buy a massive poster of this.

[mcgaggen]

The farthest right: http://imgs.xkcd.com/clickdrag/1n48e.png is in reference to the first comic http://xkcd.com/1/

I also have no idea how to imbed a URL

[DaveMcW]

Firefox cheat code. (Thanks SheepEffect)

Spoiler:

To enter the code console, type [Crtl] [Shift] K

Paste the following in:

Code: Select all

document.getElementById('comic').style.overflow='';

Type [Crtl] [Shift] K again to close the console.

Use [Ctrl] + and [Ctrl] - to zoom.

[DavidLP]

love it because its awesome, hate it because Im never gonna find everything.

a lot of these jokes I feel like are good enough to be a comic on their own. Ive only just started but so far I love "you maniacs! That sand sculpture trophy was supposed to be mine!" with a guy shaking his fist at a giant statue of liberty head. Also the marco... marco... so very fitting with the common xkcd theme of being lost, I wonder if there is someone saying polo somewhere far away. I'll be sure to keep an eye out as well as for waldo, I know hes there somewhere x_x

[scottgoblue314]

And done.

I had to scale it down by a factor of 8, to 20736 x 9984. I can generate bigger images, but my computer (8GB RAM) almost crashed trying to open the scaled-down-by-4 one. I'll post it in a sec.

Cecil: King of the Nerds. Long live the King! Long live the King!

[Yuri909]

Spoiler:

Captain's log - Day 3: I have finally completed the entire image. I started going west and made it to the island. I followed the tunnels all the way to Super Mario Bros. World 1-1. I then proceeded back to the starting point but backtracked back to World 1-1 and on until I reached the far east edge. Upon return to SMB W1-1 I followed the tunnels back to the island and proceeded west. I was not expecting the Saturn V rocket but it pleased me greatly to see it. When I finally reached the far western side I estimated about 56 minutes were actually spent doing this with my laptop's touch pad. I regret nothing, even if I no longer have a finger print on my index finger.

[Notarikon]

If you're using Chrome ...

1. Right click on the image and select Inspect Element
2. Select the line that begins with <div id="comic"
3. On the right hand side, in the sub-window called Styles, untick the box next to overflow: hidden;
4. Zoom out and waste even more time

[Vervious]

I made an html file that loads it the entire map...

and it takes a while to load, be patient:

http://vervious.com/random/xkcd.html, or
http://pastehtml.com/view/cc4oeb4mx.html

Scroll down halfway and you will see the ground.

[shalafi]

I also hope that Randall is tracking how and where people are moving to. I'd love to see the tracks of people in the map.

My favorite one so far, the guys asking for following on facebook or twitter deep into the caves.

This comic strip is probably the most amazing one I've seen in xkcd ever. And that is quite something on itself spent more than 20 minutes clicking and dragging, wondering what else is in the middle of the ground or the sky.

[Cecil]

Wow, it's taking forever to upload files here.

Here's a torrent file of all the images if anyone wants it.

[The_Kraken]

Cecil: when you're done, can you describe how you stitched them together? I'm using montage right now, but it's taking forever and crashing on my puny 8GB system.

[The Old Wolf]

A few things:

1) Mr. Munroe, you have officially borked my mind. Congratulations.

2) I located the code, but my Javascript-fu wasn't strong enough to determine the exact URL for each tile. Mad props to Cecil for slurping it all up.

3) THERE ARE FAINT RUSTLING NOISES FROM THE DARKNESS BEHIND YOU.
OUT FROM THE SHADOWS BEHIND YOU POUNCES A BEARDED PIRATE! "HAR, HAR,"
I'LL JUST TAKE ALL THIS BOOTY AND HIDE IT AWAY WITH ME
CHEST DEEP IN THE MAZE!" HE SNATCHES YOUR TREASURE AND VANISHES INTO
THE GLOOM.

4) S,E,S,S,S,N,E,N,E,NW - THE PIRATE'S TREASURE CHEST IS HERE!

Arr. Plugh! Plugh! Dammit. Arr. I must be at Witt's End, matey.

[Cecil]

This one's 41472 x 19968: http://imgur.com/o42WQ

This one's half that. http://imgur.com/EXRed

Paint.NET fails to open the big one, but IrfanView works fine. You can't read text even in the bigger one, but you can zoom around and see everything.

I can't make one that's as big as half-size because python crashes trying to new a 3.2 Gigapixel image (who knew). I'm surprised I can make a 800Megapixel one.

[The_Kraken]

Leave it to Randall to make an image so large that it crashes everyone's computer to try and view it.

I'm really enjoying this.

[Nyerguds]

This comic gives me flashbacks to LIMBO.

Also, once I got into the caves, I was sooo waiting for this :3

Creeper!
http://imgs.xkcd.com/clickdrag/18s3e.png

[Cecil]

http://i.imgur.com/oVTiU.png is small enough that chrome can display it.

Here's my python script. It's crappy but works.

Code: Select all

import Image
import os.path

SCALE = 32

big = Image.new("1", (165888/SCALE,79872/SCALE), 1)
for y in range(1, 30):
    for x in range(1, 49):
        for n in ['s','n']:
            for e in ['e', 'w']:
                name = str(y) + n + str(x) + e + ".png"
                if not os.path.exists(name): continue

                pic = Image.open(name)
               
                xpos = x-1 if e=='e' else -x               
                ypos = y-1 if n=='s' else -y
                xpos += 33
                ypos += 14
                xpos *= 2048/SCALE
                ypos *= 2048/SCALE
                print name, xpos, ypos
                big.paste(pic.resize((2048/SCALE,2048/SCALE) ), (xpos,ypos))
big.save("big"+str(SCALE)+".png")


[phlip]

http://www.mrphlip.com/xkcd1110/ - a sort of shrunk-down minimap-style thing that you can click on to see the full-size tiles.

This is just version 1, for now... I just wanted to get something up quickly. Plan is that the next version will be built with Google Maps, so you can zoom in and out wherever you want.

[Mozzz]

I just registered to thank Cecil and Mr Phlip for their efforts, they are much appreciated. Looking forward to version 2!

[JJH]

Wow, this was/is epic.

It was like “I don’t get it”
*checks alt-text*
*clicks-and-drags*
“oh, it moves!”
“It is big!”

Also I found raptors… one classic and one of them feathered ones.

[Catprog]

Well done.

I am wondering though if the bridge is the Sydney Harbor Bridge?

[ThemePark]

Ow. Totally worth it.
Ow. Totally worth it.
Ow. Totally worth it.
...

<5 years later>

...

Ow. Totally worth it.
Ow. Totally worth it.

...

[JustTheBast]

Randall, you are crazy and I love you.

[rossdargan]

I'm working on a deepzoom version (it's taking an age to render)

Will randall be ok with me hosting it? Don't really want to get sued

/Edit: Here is the url for the deepzoom version: http://clickanddrag.azurewebsites.net

[Felstaff]

someone make a side scrolling game that lets you explore this

It's called LIMBO

[taifu]

I downloaded all the tiles and I'm creating a big (scaled down!) PNG. I'll post here a copy

Edited: can't post a link (disapproved by moderator), btw now there are lot of big PNG to download

[Wingman4l7]

I'm working on a deepzoom version (it's taking an age to render)

Will randall be ok with me hosting it? Don't really want to get sued

You might be able to just use http://zoom.it/ -- I was going try uploading one of the stitched full versions up there, but now I don't know if I'll get around to it.
No account needed to make it (although the image does have to be hosted at a URL somewhere -- use Imgur?), and the resulting URL should be publicly viewable.
Like baralong said, Randall's comics are Creative Commons, so it should be ok.

[rossdargan]

I'm working on a deepzoom version (it's taking an age to render)

Will randall be ok with me hosting it? Don't really want to get sued

You might be able to just use - I was going try uploading one of the stitched full versions up there, but I don't know if I'll get around to it.
No account needed to make it, and the resulting URL should be publicly viewable.
Like, his comics are Creative Commons, so it should be ok.

Cool, well the rendering is done so I'm just uploading it now. But it's going to take 2 hours due to the number of files produced (it's 35mb, but there are 19k+ files!)

anyway I'll share the url when it's done. It's a very cool way to navigate it!

[AvatarIII]

http://www.mrphlip.com/xkcd1110/ - a sort of shrunk-down minimap-style thing that you can click on to see the full-size tiles.

This is just version 1, for now... I just wanted to get something up quickly. Plan is that the next version will be built with Google Maps, so you can zoom in and out wherever you want.

good work!

i feel kind of sorry for the X-Wing pilot flying up a narrowing shaft, with a closed hatch on the top.

[Wingman4l7]

Cool, well the rendering is done so I'm just uploading it now. But it's going to take 2 hours due to the number of files produced (it's 35mb, but there are 19k+ files!)

anyway I'll share the url when it's done. It's a very cool way to navigate it!

Thanks for going through the effort, I (and I'm sure many others) appreciate it! I was hoping someone would do that. ZUIs are definitely the future for such giant images =)

[VanI]

Well done.

I am wondering though if the bridge is the Sydney Harbor Bridge?

That was exactly my thought, although I don't remember there being a guy manning a canon at the end of the real Sydney Harbor Bridge.

[JustDoug]

Brilliant, wonderfully creative and perhaps one of the best use of Wasted Time I have seen in decades. Good On You, Randall. You win.

[tjohnman]

someone make a side scrolling game that lets you explore this

I'm already on it. If anyone wants to join or is already working on one please contact me. We don't want to be making it twice. I'll come back later.

[Pfhorrest]

I made an html file that loads it the entire map...

and it takes a while to load, be patient:

http://vervio.us/xkcd, or
http://pastehtml.com/view/cc4oeb4mx.html

Scroll down halfway and you will see the ground.

Best first post ever. This is exactly what I've spent all night/morning trying to hack some javascript together to do...

[lorem]

Hi everybody, I just registered to mention this Hacker News thread about today's xkcd: http://news.ycombinator.com/item?id=4542367
There you can find various hacks that ease the navigation of the comic, complete maps in variuus resolutions, etc.

My favourites:

* JS to add add keyboard controls to the map (from this comment: http://news.ycombinator.com/item?id=4542590):

Code: Select all

// get the map element
var el = $('.map')[0];
// amount in pixels we want to move each keypress/hold
var move = 200;
function fakeMouseEvent(type, x, y) {
    var evt = document.createEvent("MouseEvents");
    evt.initMouseEvent(type, true, true, window,
                       0, 0, 0, x, y, false, false, false, false, 0, null);
    el.dispatchEvent(evt);
}
$(window).keydown(function(e) {
    var key = e.which;
    if (key >= 37 && key <= 40) {
        e.preventDefault();
        var left=0, top=0;
        if (key == 37) { left += move; }
        if (key == 38) { top += move; }
        if (key == 39) { left -= move; }
        if (key == 40) { top -= move; }
        fakeMouseEvent('mousedown', 0, 0);
        setTimeout(function() {
            fakeMouseEvent('mousemove', left, top);
            setTimeout(function() {
                fakeMouseEvent('mouseup', left, top);
            }, 0);
        }, 0);
    }
});

* JS to enlarge the scrollable part of the comic to full window (from this comment: http://news.ycombinator.com/item?id=4542627):

Code: Select all

$('#comic').removeAttr('style');
$('.map').css('z-index',1).css('background','#fff');
$('body').css('overflow','hidden');

How to use in Chrome: Go to http://xkcd.com/1110/ > Wrench icon > Tools > JavaScript Console > paste the code and press enter

[boXd]

This is one of the awesomest things I have ever seen (not counting the real world), and yet the only thing I can think of is "This would make for an incredible Worms map."

[realbart]

If you'd like to cheat...

Code: Select all

<html>
<head>
    <style type="text/css">
        body, table, tbody, tr, td, img, a
        {
            border: 0px;
            margin: 0px;
            border-collapse: collapse;
            padding: 0px;
        }
    </style>
</head>
<body>
    <table>
        <script type="text/javascript">

            for (var n = 10; n >= 0; n--) writerow(n + 'n');
            for (var s = 0; s < 10; s++) writerow(s + 's');

            function writerow(ns) {
                document.write("<tr>");
                for (var w = 50; w >= 0; w--) writecell(ns, w + 'w');
                for (var e = 0; e < 50; e++) writecell(ns, e + 'e');
                document.write("</tr>");
            }

            function writecell(ns, ew) {
                var url = 'http://imgs.xkcd.com/clickdrag/' + ns + ew + '.png';
                document.write('<td><a href="' + url + '" target="_blank"><img src="' + url + '" height="20" width="20" /></a></td>');
            }

        </script>
    </table>
</body>
</html>