Skip to content

Instantly share code, notes, and snippets.

@swifthand

swifthand/full_map.html

Created September 19, 2012 09:40
Show Gist options
  • Save swifthand/3748723 to your computer and use it in GitHub Desktop.
Save swifthand/3748723 to your computer and use it in GitHub Desktop.
Download ZIP
Downloads and then pieces together the images from XKCD 1110 "Click and Drag", uses on Ruby 1.9.X and jQuery 1.8. Has not been tested in Internet Explorer :P
Raw
full_map.html
<!--
Happy exploring, Ladies n' Gents.
And props as always to Mr. Munroe for his fantastic comic.
- Paul Kwiatkowski
-->
<html lang="en">
<head>
<title>Cultural Learnings of XKCD Clickdrag Make Benefit Glorious Nation of The Internets</title>
<style type="text/css">
#map {
width: 169984px;
}
.region-white {
height: 2048px;
width: 2048px;
min-height: 2048px;
min-width: 2048px;
background-color: white;
float: left;
/*display: inline-block;*/
}
.region-black {
height: 2048px;
width: 2048px;
min-height: 2048px;
min-width: 2048px;
color: white;
background-color: black;
/*display: inline-block;*/
float: left;
}
.clear {
clear: both;
height: 0px;
}
</style>
<script src="jquery-1.8.1.min.js" type="text/javascript"></script>
</head>
<body>
<div id="map">
</div>
<div style="width:169984px; text-align:right; padding-right:12px;">
From &lt;http://www.xkcd.com/1110&gt; "Click and Drag" by Randall Munroe.<br>
Compiled as quick and dirty as possible using a combination of Ruby, Curl and JavaScript by Swifthand.
</div>
</body>
<script type="text/javascript">
$(document).ready(function() {
var $map = $('#map');
var northBound = 13;
var eastBound = 48;
var southBound = 19;
var westBound = 33;
// North
for(var n = northBound; n >= 1; n--) {
// North West
for(var w = westBound; w >= 1; w--) {
$map.append($('<div class="region-white" style="background-image:url(\''+n+'n'+w+'w.png\');"></div>'));
}
// North East
for(var e = 1; e <= eastBound; e++) {
$map.append($('<div class="region-white" style="background-image:url(\''+n+'n'+e+'e.png\');"></div>'));
}
$map.append($('<div class="clear"></div>'));
}
// South
for(var s = 1; s <= southBound; s++) {
// South West
for(var w = westBound; w >= 1; w--) {
$map.append($('<div class="region-black" style="background-image:url(\''+s+'s'+w+'w.png\');"></div>'));
}
// South East
for(var e = 1; e <= eastBound; e++) {
$map.append($('<div class="region-black" style="background-image:url(\''+s+'s'+e+'e.png\');"></div>'));
}
$map.append($('<div class="clear"></div>'));
}
});
</script>
</html>
Raw
xkcdclickdrag_grabber.rb
#!/usr/bin/env ruby
# Fetching all images in XKCD 1110 Images.
# Apparently the bounds here are a bit beyond what was necessary. Oh well.
def pull_file(vert_pos, vert_dir, hor_pos, hor_dir, output_path = './')
filename = "#{vert_pos}#{vert_dir}#{hor_pos}#{hor_dir}.png"
`curl -o #{output_path}/#{filename} http://imgs.xkcd.com/clickdrag/#{filename}`
end
quadrants = [
{ :vert_dir => 'n', :hor_dir => 'e', :vert_range => (0..14), :hor_range => (0..48) },
{ :vert_dir => 'n', :hor_dir => 'w', :vert_range => (0..14), :hor_range => (0..33) },
{ :vert_dir => 's', :hor_dir => 'e', :vert_range => (0..25), :hor_range => (0..48) },
{ :vert_dir => 's', :hor_dir => 'w', :vert_range => (0..25), :hor_range => (0..33) }
]
quadrants.each do |quad|
quad[:vert_range].each do |vert_pos|
quad[:hor_range].each do |hor_pos|
pull_file vert_pos, quad[:vert_dir], hor_pos, quad[:hor_dir]
end
end
end
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment