Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Browse files

excluding data, local os files

  • Loading branch information...
commit c1f8385d16f7369240a6947c13289afd57e1eb15 1 parent 82914c1
@potch authored
View
BIN  .DS_Store
Binary file not shown
View
4 .gitignore
@@ -0,0 +1,4 @@
+*.pyc
+.DS_STORE
+*.swp
+data
View
278 index.html
@@ -2,6 +2,7 @@
<html>
<head>
<link rel="stylesheet" href="media/screen.css">
+ <meta charset="utf-8">
<style>
#map polygon {
fill: url(#glow);
@@ -9,7 +10,7 @@
</style>
</head>
<body>
- <div id="countdown" class="glow stowed">
+ <div id="bigcounter" class="glow stowed">
</div>
<div id="app">
<section id="ui">
@@ -38,160 +39,189 @@
</div>
</section>
</div>
+ <div id="callout">
+ </div>
<canvas id="c"></canvas>
<svg>
<defs>
- <radialGradient gradientUnits="userSpaceOnUse" id="glow" fx="50%" fy="0">
- <stop offset="0%" style="stop-color:#23497a; stop-opacity:1"/>
- <stop offset="78%" style="stop-color:#011841; stop-opacity:1"/>
- </linearGradient>
+ <radialGradient gradientUnits="userSpaceOnUse" id="glow" fx="50%" fy="0" cx="1800" cy="0" r="1800">
+ <stop offset="0%" style="stop-color:#23497a; stop-opacity:1"></stop>
+ <stop offset="78%" style="stop-color:#011841; stop-opacity:1"></stop>
+ </radialGradient>
</defs>
</svg>
<script src="media/jquery.js"></script>
<script src="media/vast.js"></script>
- <script src="media/map.js"></script>
- <script src="media/bars.js"></script>
<script>
var vast = vast();
</script>
+ <script src="media/map.js"></script>
+ <script src="media/bars.js"></script>
+ <script src="data/init.js"></script>
+ <script src="http://jbalogh.khan.mozilla.org/l10n.js"></script>
<script>
- var qs = "?changed=" + (new Date()).getTime(),
- view = 4, nv,
- zoom = 0,
- $out = $("#out"),
+ var $out = $("#out"),
$mc = $("#map_container"),
- loading = false,
- panning = false,
$map = $("#map");
+ glow.view = "map";
+ glow.map= {};
+ glow.data = {
+ bars: {},
+ map: {},
+ sector: {}
+ };
+
$(function() {
- var sx, sy,
- cx, cy,
- task = false;
+ initMap();
+ loadMap();
+ });
- function posMap(x,y,z) {
- // $out.text(x + ", " + y + ", " + z);
- var pos = $map.position();
- x = x || pos.left;
- y = y || pos.top;
- z = Math.min(Math.max((z+1) || (zoom+1), 1), 5)-1;
- var z2 = z+1,
- ox = $mc.width()/2,
- oy = $mc.height()/2,
- scale = (1 << (z >>> 0)) / (1 << (zoom >>> 0)),
- wid = $map.width()*z2 - ox*2,
- hgt = $map.height()*z2 - oy*2;
- if (x != pos.left || y != pos.top || z != zoom) {
- x = Math.max(Math.min(0, (x-ox)*scale+ox),-wid);
- y = Math.max(Math.min(0, (y-oy)*scale+oy),-hgt);
- zoom = z;
- nv = Math.max(Math.min(z,4),2);
+ function loadMap() {
+ $.get("./maps/world_4.svg", function(resp) {
+ if (vast.capabilities.inlineSVG) {
+ $("#mapdata").empty().html(resp);
} else {
- nv = view;
+ $("#mapdata").empty().append('<iframe width="3600" height"1800" src="maps/world_2.svg"></iframe>');
}
- $map.css({
- left: x + "px",
- top: y + "px",
- '-moz-transform': 'scale('+(1 << (zoom >>> 0)) + ')',
+ $("#mapdata").css({
+ "-moz-transform": "scale(" + $mc.width()/3600 + ")",
+ "-webkit-transform-origin": "0 0",
+ "-webkit-transform": "scale(" + $mc.width()/3600 + ")"
});
- if (nv != view) loadUp(nv);
- }
-
- $(window).keydown(function(e) {
- if (e.which == 61) {
- zoomMap(zoom+1);
- }
- if (e.which == 109) {
- zoomMap(zoom-1);
- }
- });
-
- function zoomMap(z) {
- posMap(false,false,z);
- }
+ initData();
+ }, "text");
+ }
- function loadUp(s) {
- s=4;
- if (loading) {
- task.abort();
- }
- loading = true;
- task = $.get("./maps/world_"+s+".svg", function(resp) {
- if (vast.capabilities.inlineSVG) {
- $("#mapdata").empty().append($(resp).find("svg"));
- } else {
- $("#mapdata").empty().append('<embed type="image/svg+xml" src="maps/world_' + s + '.svg">');
- }
- $("#mapdata").css({
- "-moz-transform": "scale(" + $mc.width()/3600 + ")",
- });
- view = s;
- posMap();
- loading = false;
- });
- }
+ function processData(type) {
+ return function(r) {
+ glow.data[type].next = r;
+ };
+ }
- $mc.mousedown(function(e) {
- cx = e.clientX;
- cy = e.clientY;
- sx = parseInt($map.css("left"));
- sy = parseInt($map.css("top"));
- panning = true;
- vast.GlobalClock.pause();
- $map.css("-moz-transition","none");
- e.preventDefault();
- }).bind("mouseup", function(e) {
- panning = false;
- vast.GlobalClock.resume();
- $map.css("-moz-transition","");
- }).mousemove(function(e) {
- if (panning) {
- var newx = sx - (cx - e.clientX),
- newy = sy - (cy - e.clientY);
- posMap(newx, newy);
- }
- })/*.bind("DOMMouseScroll", function(e) {
- var evt = e.originalEvent,
- amount = evt.detail ? evt.detail * -1 : evt.wheelDelta / 40,
- oldzoom = zoom;
- if (amount > 1) {
- zoomMap(zoom+1);
- }
- if (amount < -1) {
- zoomMap(zoom-1);
- }
- posMap();
- });*/
- $(window).bind("mouseup", function(e) {
- panning = false;
+ function initData() {
+ $.getJSON("data/" + glow.time + "/map.json", function(r) {
+ processData("map")(r);
+ glow.map.playNext();
});
- loadUp(view);
- })
+ }
+ </script>
+ <script>
+ // var qs = "?changed=" + (new Date()).getTime(),
+ // view = 4, nv,
+ // zoom = 0,
+ // $out = $("#out"),
+ // $mc = $("#map_container"),
+ // loading = false,
+ // panning = false,
+ // $map = $("#map");
+ //
+ // $(function() {
+ // var sx, sy,
+ // cx, cy,
+ // task = false;
+ //
+ // function posMap(x,y,z) {
+ // var pos = $map.position();
+ // x = x || pos.left;
+ // y = y || pos.top;
+ // z = Math.min(Math.max((z+1) || (zoom+1), 1), 5)-1;
+ // var z2 = z+1,
+ // ox = $mc.width()/2,
+ // oy = $mc.height()/2,
+ // scale = (1 << (z >>> 0)) / (1 << (zoom >>> 0)),
+ // wid = $map.width()*z2 - ox*2,
+ // hgt = $map.height()*z2 - oy*2;
+ // if (x != pos.left || y != pos.top || z != zoom) {
+ // x = Math.max(Math.min(0, (x-ox)*scale+ox),-wid);
+ // y = Math.max(Math.min(0, (y-oy)*scale+oy),-hgt);
+ // zoom = z;
+ // nv = Math.max(Math.min(z,4),2);
+ // } else {
+ // nv = view;
+ // }
+ // $map.css({
+ // left: x + "px",
+ // top: y + "px",
+ // '-moz-transform': 'scale('+(1 << (zoom >>> 0)) + ')',
+ // });
+ // if (nv != view) loadUp(nv);
+ // }
+ //
+ // $(window).keydown(function(e) {
+ // if (e.which == 61) {
+ // zoomMap(zoom+1);
+ // }
+ // if (e.which == 109) {
+ // zoomMap(zoom-1);
+ // }
+ // });
+ //
+ // function zoomMap(z) {
+ // posMap(false,false,z);
+ // }
+ //
+ // function loadUp(s) {
+ // s=2;
+ // if (loading) {
+ // task.abort();
+ // }
+ // loading = true;
+ // task = $.get("./maps/world_"+s+".svg", function(resp) {
+ // if (vast.capabilities.inlineSVG || true) {
+ // $("#mapdata").empty().html(resp);
+ // } else {
+ // $("#mapdata").empty().append('<iframe width="3600" height"1800" src="maps/world_' + s + '.svg"></iframe>');
+ // }
+ // $("#mapdata").css({
+ // "-moz-transform": "scale(" + $mc.width()/3600 + ")",
+ // "-webkit-transform-origin": "0 0",
+ // "-webkit-transform": "scale(" + $mc.width()/3600 + ")"
+ // });
+ // view = s;
+ // posMap();
+ // loading = false;
+ // }, "text");
+ // }
+ //
+ // $mc.mousedown(function(e) {
+ // cx = e.clientX;
+ // cy = e.clientY;
+ // sx = parseInt($map.css("left"));
+ // sy = parseInt($map.css("top"));
+ // panning = true;
+ // // vast.GlobalClock.pause();
+ // $map.css("-moz-transition","none");
+ // e.preventDefault();
+ // }).bind("mouseup", function(e) {
+ // panning = false;
+ // // vast.GlobalClock.resume();
+ // $map.css("-moz-transition","");
+ // }).mousemove(function(e) {
+ // if (panning) {
+ // var newx = sx - (cx - e.clientX),
+ // newy = sy - (cy - e.clientY);
+ // posMap(newx, newy);
+ // }
+ // });
+ // $(window).bind("mouseup", function(e) {
+ // panning = false;
+ // });
+ // loadUp(view);
+ // })
</script>
<script>
$(function() {
var launchDate = (new Date(2011,2,15,10,0)).getTime(),
diff, soon, os,
l,s,m,h,d,n,n2,
- $el = $("#countdown");
-
+ $el = $("#bigcounter");
+
var num = 0;
- function commas(n) {
- var s = n.toString().split('');
- for (i = s.length-3; i > 0; i-=3) {
- s.splice(i, 0, ',');
- }
- return s.join('');
- }
vast.animate.over(60000, function(i) {
- $el.text(commas(~~(i*3294)+252314442));
+ $el.text(numberfmt(~~(i*3294)+252314442));
}, this);
- // vast.GlobalClock.register(tick, this);
- // setTimeout(function() {
- $("#countdown").addClass("stowed");
- $("#app").css("opacity", 1);
- // }, 0);
- })
+ });
</script>
</body>
</html>
View
2  maps/world_2.svg
@@ -1,5 +1,5 @@
<?xml version="1.0" encoding="utf-8"?>
-<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 3600 1800" width="3600" height="1800">
+<svg version="1.1" xmlns="http://www.w3.org/2000/svg" background="transparent" viewbox="0 0 3600 1800" width="3600" background="transparent" height="1800">
<g title="Asia">
<polygon points="2730,100 2725,100 2720,100 2715,100 2720,95 2725,95 2730,95 2730,90 2735,90 2740,90 2745,90 2750,90 2755,90 2760,90 2765,90 2765,95 2770,95 2770,100 2765,100 2760,100 2755,100 2750,100 2745,100 2740,100 2735,100 2735,105 2730,100"/>
<polygon points="2795,110 2795,115 2790,115 2785,115 2780,115 2775,115 2770,115 2765,115 2760,115 2755,115 2755,110 2750,110 2745,110 2740,110 2735,110 2735,105 2740,105 2745,105 2745,100 2750,100 2755,100 2760,100 2765,100 2770,100 2775,100 2775,105 2780,105 2785,105 2780,100 2785,100 2790,100 2790,105 2795,105 2795,110"/>
View
1  maps/world_4.svg
@@ -1,4 +1,3 @@
-<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 3600 1800" width="3600" height="1800">
<g title="Asia">
<polygon points="2732,97 2731,97 2727,97 2726,97 2725,97 2723,97 2721,97 2720,97 2718,97 2717,97 2715,97 2716,96 2717,96 2720,96 2721,96 2722,96 2720,96 2718,96 2722,95 2723,95 2725,95 2726,95 2727,95 2727,93 2728,93 2730,93 2731,92 2730,92 2728,92 2726,92 2726,91 2728,91 2730,91 2731,90 2733,90 2736,90 2737,90 2738,90 2740,90 2741,90 2742,90 2743,90 2745,90 2746,90 2747,90 2747,88 2748,88 2750,88 2750,87 2751,87 2753,87 2755,87 2756,87 2757,87 2758,88 2761,88 2762,88 2765,90 2766,91 2767,91 2768,91 2773,92 2775,92 2776,92 2778,92 2778,93 2777,93 2773,93 2772,93 2771,93 2770,95 2770,96 2771,96 2771,97 2772,97 2771,98 2768,98 2767,98 2766,98 2762,98 2760,98 2758,98 2755,98 2753,98 2750,98 2747,98 2747,100 2746,100 2745,100 2743,100 2742,100 2741,100 2740,100 2737,100 2737,101 2736,101 2733,100 2732,100 2731,100 2728,100 2727,100 2727,98 2726,98 2725,98 2722,98 2720,98 2721,98 2722,98 2725,98 2723,98 2722,98 2720,97 2721,97 2722,97 2723,97 2725,97 2726,97 2727,97 2728,97 2730,97 2731,97 2732,97"/>
View
2  media/bars.js
@@ -10,7 +10,7 @@ $(function () {
b = d[i];
m = "00" + b[0][4];
v = (b[1] - d[i-1][1]);
- $c = $("<div class='col'><span>" + b[0][3] + ":" + m.substr(-2) + "</span><div data-val=" + v + " class='bar'></div></div>");
+ $c = $("<div class='col'><div data-time='" + (b[0][3] + ":" + m.substr(-2)) + "' data-val=" + v + " class='bar'></div></div>");
$bars.append($c);
max = Math.max(v, max);
}
View
69 media/map.js
@@ -1,16 +1,15 @@
-$(function () {
+function initMap() {
"use strict";
var currentData = [],
- currentTime,
total = 0,
count = 0,
- nextData,
- nextTime,
scale = $mc.width()/(3600*1),
pings = [],
pool = [],
ctx = $("#pings")[0].getContext("2d"),
- row, n, $p;
+ row, n;
+
+ glow.map = {};
ctx.fillStyle = "#fff";
@@ -19,31 +18,23 @@ $(function () {
y = ~~((y+180)*10*scale);
if (pool.length) {
n = pool.shift();
- // $p = pings[n][3];
pings[n] = [0, x, y];
} else {
- // if (Math.random() < pings.length / 500-.1) return;
- // $p = $("<div class='ping'></div>");
- // $p.appendTo("#pings");
- row = [0,x,y];
+ row = [0, x, y];
pings.push(row);
}
- // $p.addClass("born").css({
- // "top": x+"px",
- // "left": y+"px",
- // "opacity": 1
- // });
}
- function playback(data) {
- data = data.d[0];
- currentTime = data[0].join("");
+
+ glow.map.playNext = function() {
+ var response = glow.data.map.next,
+ data = response.data;
total = data[1];
- currentData = data[2];
+ currentData = data[2].slice();
count = 0;
var goal=0, n, row;
function drawPings(i) {
goal = i*total;
- while (count < goal) {
+ while (count < goal && pings.length < 500) {
if (currentData.length < 1) return;
count++;
n = ~~(Math.random()*currentData.length);
@@ -54,18 +45,35 @@ $(function () {
}
addPing(row[1],row[0]);
}
+ $("#out").text(pings.length);
}
- vast.animate.over(60000,drawPings,this,{after: function() {
- getData();
- }});
- }
- function getData() {
- $.getJSON("map.json?" + Math.random(), playback);
- }
+ vast.animate.over(response.interval*1000,drawPings,this,{after: glow.map.playNext});
+ console.log("waiting " + response.interval * 500 + " to fetch " + response.next);
+ setTimeout(function() {
+ $.getJSON("data/" + response.next, function(r) {
+ console.log(response.next + " fetched successfully");
+ glow.data.map.next = r;
+ });
+ }, response.interval * 500);
+ };
+
+ $(window).resize(vast.debounce(function() {
+ $("#pings").css({
+ width: $mc.width() + "px",
+ height: $mc.height() + "px"
+ });
+ $("#pings")[0].width=$mc.width();
+ $("#pings")[0].height=$mc.height();
+ }, 500, this));
+
var i,p,l,el;
function iteratePings(t) {
if (pool.length == pings.length) return;
- ctx.clearRect(0,0,3600,1800);
+ for (i=0; i<pings.length; i++) {
+ p = pings[i];
+ if (p[0] < 0) continue;
+ ctx.clearRect(p[2]-5,p[1]-5,10,10);
+ }
for (i=0; i<pings.length; i++) {
p = pings[i];
if (p[0] < 0) continue;
@@ -77,7 +85,6 @@ $(function () {
ctx.fillStyle = "rgba(255,255,255," + (1-l) + ")";
ctx.arc(p[2],p[1],5*l,0,Math.PI*2,true);
ctx.fill();
- // ctx.fillRect(p[2],p[1],20,20);
if (l > 1) {
p[0] = -1;
pool.push(i);
@@ -85,6 +92,4 @@ $(function () {
}
}
vast.GlobalClock.register(iteratePings, this);
- getData();
- window.gonow = getData;
-});
+}
View
35 media/screen.css
@@ -121,9 +121,9 @@ body, html {
-moz-transition-duration: .2s;
-moz-transition-property: -moz-transform, top, left;
-moz-transform-origin: 0 0;
+ -webkit-transform-origin: 0 0;
background-image: -moz-radial-gradient(center -5% 45deg, #badfef, #4b94d0 20%, #2e70b4 30%, #002a77 60%);
-}
-#map svg {
+ background-image: -webkit-gradient(radial, 50% -5%, 1, 50% -5%, 1800, from(#badfef), color-stop(20%, #4b94d0), color-stop(30%, #2e70b4), color-stop(60%, #002a77));
}
#pings {
position: absolute;
@@ -132,27 +132,22 @@ body, html {
width: 3600px;
height: 1800px;
}
-.ping {
- position: absolute;
- pointer-events: none;
- width: 1px;
- height: 1px;
- background: #fff;
- border: 0;
-}
-/*.ping.born {
- opacity: 1;
-}
-*/#mapdata {
+#mapdata {
-moz-transform-origin: 0 0;
width:3600px;
height:1800px;
}
-embed {
+#mapdata embed {
width: 3600px;
height: 1800px;
pointer-events: none;
}
+#mapdata iframe {
+ width: 3600px;
+ height: 1800px;
+ overflow: hidden;
+ pointer-events: none;
+}
polygon {
fill: #031841;
stroke: none;
@@ -214,7 +209,7 @@ polygon {
width: 40px;
height: 130px;
margin: 0 10px;
-/* padding: 0 10px;*/
+/* padding: 0 1g0px;*/
}
.bars .bar {
position: absolute;
@@ -247,7 +242,7 @@ polygon {
color: white;
z-index: 100;
}
-#countdown {
+#bigcounter {
color: #fff;
font-size: 100px;
border-radius: 10px;
@@ -267,7 +262,7 @@ polygon {
/* display: none;*/
z-index: 9000;
}
-#countdown.stowed {
+#bigcounter.stowed {
margin: 0;
top: 13px;
right: 10px;
@@ -312,7 +307,7 @@ polygon {
vertical-align: top;
display: inline-block;
}
-#countdown.flash {
+#bigcounter.flash {
border-color: #e22;
-moz-box-shadow:
4px 0 18px rgba(128,0,0,.1),
@@ -322,7 +317,7 @@ polygon {
inset 0 0 20px rgba(128,0,0,.4);
}
#app {
- opacity: 0;
+/* opacity: 0;*/
/* -moz-transition: opacity 1s linear;
-webkit-transition: opacity 1s linear;
*/}
View
33 media/vast.js
@@ -1,5 +1,4 @@
function vast() {
-
var exports = {};
//This is the global precision of compounding calculations in vast.
@@ -21,7 +20,6 @@ function vast() {
shim.innerHTML = '<div style="-webkit-transition:color 1s linear;-moz-transition:color 1s linear;"></div>';
var test = document.body.style.webkitTransition !== undefined ||
document.body.style.MozTransition !== undefined;
- delete shim;
return test;
})(),
requestAnimationFrame: false //("mozRequestAnimationFrame" in window) ? "moz" : ("webkitRequestAnimationFrame" in window ? "webkit" : false)
@@ -231,6 +229,13 @@ function vast() {
};
})();
GlobalClock.start();
+ $(window).blur(function() {
+ GLOBAL_CLOCK_INTERVAL = 500;
+ });
+
+ $(window).focus(function() {
+ GLOBAL_CLOCK_INTERVAL = 30;
+ });
function CanvasGroup() {
@@ -276,14 +281,6 @@ function vast() {
return _;
}
- $(window).blur(function() {
- GLOBAL_CLOCK_INTERVAL = 1000;
- });
-
- $(window).focus(function() {
- GLOBAL_CLOCK_INTERVAL = 30;
- });
-
var animate = exports.animate = {
over: function(duration, tick, ctx, opts) {
var prog;
@@ -319,10 +316,10 @@ function vast() {
linear: function(n) {
return safe(n);
},
- out: function(n) {
+ easeout: function(n) {
return safe(Math.sin(n*PI_2));
},
- in: function(n) {
+ easein: function(n) {
return safe(1-Math.cos(n*PI_2));
},
both: function(n) {
@@ -331,6 +328,18 @@ function vast() {
};
+ var debounce = exports.debounce = function(fn, ms, ctxt) {
+ var ctx = ctxt || window;
+ var to, del = ms, fun = fn;
+ return function () {
+ var args = arguments;
+ clearTimeout(to);
+ to = setTimeout(function() {
+ fun.apply(ctx, args);
+ }, del);
+ };
+ }
+
/** 2d vector methods */
function safe(n) {
return Math.round(n * SAFETY) / SAFETY;
Please sign in to comment.
Something went wrong with that request. Please try again.