Page 3 of 15

Re: 1110:"Click and Drag"

Posted: Wed Sep 19, 2012 7:10 am UTC
by leromarinvit
glasnt wrote: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...

Re: Stuff in the sky

Posted: Wed Sep 19, 2012 7:12 am UTC
by Icalasari

Re: 1110:"Click and Drag"

Posted: Wed Sep 19, 2012 7:13 am UTC
by 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.

Re: 1110:"Click and Drag"

Posted: Wed Sep 19, 2012 7:13 am UTC
by 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.

Re: 1110:"Click and Drag"

Posted: Wed Sep 19, 2012 7:14 am UTC
by Annihilist
I'd buy a massive poster of this.

Re: 1110:"Click and Drag"

Posted: Wed Sep 19, 2012 7:14 am UTC
by 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

Re: 1110:"Click and Drag"

Posted: Wed Sep 19, 2012 7:14 am UTC
by 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.

Re: 1110:"Click and Drag"

Posted: Wed Sep 19, 2012 7:15 am UTC
by 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

Re: 1110:"Click and Drag"

Posted: Wed Sep 19, 2012 7:16 am UTC
by scottgoblue314
Cecil wrote: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!

Re: 1110:"Click and Drag"

Posted: Wed Sep 19, 2012 7:17 am UTC
by 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.

Re: 1110:"Click and Drag"

Posted: Wed Sep 19, 2012 7:18 am UTC
by 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 :P

Re: 1110:"Click and Drag"

Posted: Wed Sep 19, 2012 7:19 am UTC
by 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.

Re: 1110:"Click and Drag"

Posted: Wed Sep 19, 2012 7:21 am UTC
by 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.

Re: 1110:"Click and Drag"

Posted: Wed Sep 19, 2012 7:22 am UTC
by Cecil
Wow, it's taking forever to upload files here.

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

Re: 1110:"Click and Drag"

Posted: Wed Sep 19, 2012 7:32 am UTC
by 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.

Re: 1110:"Click and Drag"

Posted: Wed Sep 19, 2012 7:33 am UTC
by The Old Wolf
A few things:

1) Mr. Munroe, you have officially borked my mind. Image 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.

Re: 1110:"Click and Drag"

Posted: Wed Sep 19, 2012 7:39 am UTC
by 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.

Re: 1110:"Click and Drag"

Posted: Wed Sep 19, 2012 7:57 am UTC
by 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.

Re: 1110:"Click and Drag"

Posted: Wed Sep 19, 2012 8:04 am UTC
by 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

Re: 1110:"Click and Drag"

Posted: Wed Sep 19, 2012 8:09 am UTC
by 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")

Re: 1110:"Click and Drag"

Posted: Wed Sep 19, 2012 8:44 am UTC
by 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.

Re: 1110:"Click and Drag"

Posted: Wed Sep 19, 2012 9:45 am UTC
by Mozzz
I just registered to thank Cecil and Mr Phlip for their efforts, they are much appreciated. Looking forward to version 2!

Re: 1110:"Click and Drag"

Posted: Wed Sep 19, 2012 9:55 am UTC
by 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.

Re: 1110:"Click and Drag"

Posted: Wed Sep 19, 2012 10:00 am UTC
by Catprog
Well done.

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

Re: 1110:"Click and Drag"

Posted: Wed Sep 19, 2012 10:01 am UTC
by ThemePark
Ow. Totally worth it.
Ow. Totally worth it.
Ow. Totally worth it.
...

<5 years later>

...

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

...

Re: 1110:"Click and Drag"

Posted: Wed Sep 19, 2012 10:03 am UTC
by JustTheBast
Randall, you are crazy and I love you.

Re: 1110:"Click and Drag"

Posted: Wed Sep 19, 2012 10:04 am UTC
by 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

Re: 1110:"Click and Drag"

Posted: Wed Sep 19, 2012 10:06 am UTC
by Felstaff
berbatov wrote:someone make a side scrolling game that lets you explore this

It's called LIMBO

Re: 1110:"Click and Drag"

Posted: Wed Sep 19, 2012 10:12 am UTC
by 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 :)

Re: 1110:"Click and Drag"

Posted: Wed Sep 19, 2012 10:16 am UTC
by Wingman4l7
rossdargan wrote: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.

Re: 1110:"Click and Drag"

Posted: Wed Sep 19, 2012 10:21 am UTC
by rossdargan
Wingman4l7 wrote:
rossdargan wrote: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!

Re: 1110:"Click and Drag"

Posted: Wed Sep 19, 2012 10:24 am UTC
by AvatarIII
phlip wrote: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.

Re: 1110:"Click and Drag"

Posted: Wed Sep 19, 2012 10:25 am UTC
by Wingman4l7
rossdargan wrote: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 =)

Re: 1110:"Click and Drag"

Posted: Wed Sep 19, 2012 10:27 am UTC
by VanI
Catprog wrote: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.

Re: 1110:"Click and Drag"

Posted: Wed Sep 19, 2012 10:34 am UTC
by 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.

Re: 1110:"Click and Drag"

Posted: Wed Sep 19, 2012 10:35 am UTC
by tjohnman
berbatov wrote: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.

Re: 1110:"Click and Drag"

Posted: Wed Sep 19, 2012 10:39 am UTC
by Pfhorrest
Vervious wrote: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...

Re: 1110:"Click and Drag"

Posted: Wed Sep 19, 2012 10:40 am UTC
by 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

Re: 1110:"Click and Drag"

Posted: Wed Sep 19, 2012 10:41 am UTC
by 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."

Re: 1110:"Click and Drag"

Posted: Wed Sep 19, 2012 10:41 am UTC
by 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>