billion-second-party/index.html at master · sseefried/billion-second-party · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
<!DOCTYPE HTML PUBLIC "-//IETF//DTD HTML//EN">
<html> <head>
<title></title>
<script type="text/javascript" src="date.js"></script>
<script type="text/javascript" src="jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="raphael-min.js"></script>
</head>

<body>
<script>

  var MAX = 1000000000;

  function getUrlVars() {
      var vars = {};
      var parts = window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/gi, function(m,key,value) {
          vars[key] = value;
      });
      return vars;
  }


  function secondsAlive(date_str) {
    return Math.round((Date.now() - Date.parse(date_str))/1000);
  }

  var t;
  var N = 9;

  var cs = new Array(N);
  var a = 0;

  var pi = 3.14159;

  var FONT_SIZE = 128;

  var TEXT_ATTR = { font: "Helvetica", "font-size": FONT_SIZE};

  var RAD = 200;
  var INTERVAL = 1000;
  var WIDTH = 1400;
  var HEIGHT = 800;
  var CENTER_X = WIDTH/2 - FONT_SIZE/2;
  var CENTER_Y = HEIGHT/2 - FONT_SIZE/2;

  var first;

  function rotateCircle() {
    first.animate({ x: CENTER_X, y: CENTER_Y, fill: Raphael.getColor() }, INTERVAL);
    var i;
    for (i=0; i < N; i = i + 1) {
       cs[(i+a)%N].animate({x: CENTER_X + RAD * Math.cos(i * (2*pi/N)),
                            y: CENTER_Y + RAD * Math.sin(i * (2*pi/N)),
                            fill: Raphael.getColor()
                           }, INTERVAL);
    }
    a = a + 1;
  }

  function moveFirst() {

  }

  var intervalID;
  var counter;

  var r;

  function increment(date_str) {
    return function() {
      s = secondsAlive(date_str);
      if (s < MAX) {
        counter.attr({ text: s });
      } else {
        clearInterval(intervalID);
        counter.hide();
        var start = (WIDTH-6*FONT_SIZE)/2;
        first = r.text(start,CENTER_Y, "1");
        first.attr(TEXT_ATTR);

        for (i = 0; i < N; i = i + 1) {
          cs[i] = r.text((FONT_SIZE/2+FONT_SIZE/16)*(i+1)+start,CENTER_Y, "0");
          cs[i].attr(TEXT_ATTR);
        }
        setInterval("rotateCircle()", INTERVAL);
      }
    };
  }

  $(document).ready(function () {
    var url_vars = getUrlVars();
    var date_str = unescape(url_vars.date || "1 January 1986 00:00");
    console.log(date_str);
    $('#counter').html();
    r = Raphael("canvas", WIDTH, HEIGHT);
    counter = r.text(CENTER_X, CENTER_Y, "");
    counter.attr(TEXT_ATTR);
    intervalID = setInterval(increment(date_str), 500);
});


</script>


<div id="canvas"></div>


</body> </html>