petraszd avatar petraszd committed 0f77ecc

Further impromvents

Comments (0)

Files changed (3)

   <script type="text/javascript" charset="utf-8" src="main.js"></script>
 </head>
 <body onload="initialize()">
-  <div id="map"></div>
-  <div id="canvas"></div>
+  <div id="everything">
+    <h1>Title</h1>
+    <div id="map"></div>
+    <div id="canvas"></div>
+    <div id="date"></div>
+  </div>
 </body>
 </html>
+var CFG = {
+  scatttering: 20.0,
+  fillColor: '#333',
+  growAnim: 150,
+  opacityAnim: (1000 / 5) * 8,
+  stepLength: 1000 / 5,
+  initR: 2,
+  multR: 1.5,
+  w: 600,
+  h: 400
+};
+
 var map;
 var overlay;
+var dateDiv;
+var step;
+var timer = 0;
+var paper;
 
 function createMap () {
   var mapOptions = {
   return overlay.getProjection().fromLatLngToContainerPixel(gMapPoint);
 };
 
+function next () {
+  var points = data[step];
+  step++;
+
+  if (!points || !points[1]) {
+    clearInterval(timer);
+    return;
+  }
+
+  changeText(points[0]);
+
+  var h = 0;
+  for (var i = 0, p; p = points[1][i]; ++i) {
+    h += p[2] / 30.0;
+
+    var pos = getPixelPoint(p[0], p[1]);
+    var radius = p[2];
+    var x = pos.x + (Math.random() - 0.5) * CFG.scatttering;
+    var y = pos.y + (Math.random() - 0.5) * CFG.scatttering;
+    var circle = paper.circle(x, y, 1).attr({fill: CFG.fillColor});
+    circle.animate({r: CFG.initR + Math.sqrt(p[2]) * CFG.multR}, CFG.growAnim, "<", function () {
+      this.animate({opacity: 0.0}, CFG.opacityAnim, ">", function () { this.remove(); });
+    });
+  }
+};
+
 function initialize() {
+  dateDiv = document.getElementById('date');
+
   map = createMap();
   overlay = new google.maps.OverlayView();
   overlay.draw = function() {};
   overlay.setMap(map);
+  paper = new Raphael(document.getElementById("canvas"), CFG.w, CFG.h);
 
-  var paper = new Raphael(document.getElementById("canvas"), 800, 600);
-
-  var step = 0;
-  var next = function () {
-    var points = data[step];
-    step++;
-
-    // TODO: what to do when animation stops
-    if (!points || !points[1]) {
-      return;
-    }
-
-    for (var i = 0, p; p = points[1][i]; ++i) {
-      var pos = getPixelPoint(p[0], p[1]);
-      var radius = p[2];
-      var x = pos.x + (Math.random() - 0.5) * 20.0;
-      var y = pos.y + (Math.random() - 0.5) * 20.0;
-      var circle = paper.circle(x, y, 1).attr({fill: '#f00'});
-      circle.animate({r: 10 + p[2] / 20.0}, 300, "<", function () {
-        this.animate({opacity: 0.0}, 150, "<", function () { this.remove(); });
-      });
-    }
-
-    step++;
-  };
-
-  setInterval(next, 1000 / 5);
+  step = 0;
+  timer = setInterval(next, CFG.stepLength);
 }
 
+function changeText (newText) {
+  dateDiv.innerHTML = newText;
+}
   padding: 0;
   margin: 0;
   background-color: #fff;
+  font-family: Arial,sans-serif;
 }
 
 #map {
-  width: 800px;
-  height: 600px;
-  position: absolute;
+  width: 600px;
+  height: 400px;
   z-index: 1;
 }
 
 #canvas {
-  width: 800px;
-  height: 600px;
-  position: absolute;
+  position: relative;
+  margin-top: -400px;
+  width: 600px;
+  height: 400px;
   z-index: 100;
 }
+
+#date {
+  padding: 5px 0 0 0;
+  width: 600px;
+  font-size: 32px;
+  text-align: right;
+}
+
+#everything {
+  width: 600px;
+  margin: 0 auto;
+}
Tip: Filter by directory path e.g. /media app.js to search for public/media/app.js.
Tip: Use camelCasing e.g. ProjME to search for ProjectModifiedEvent.java.
Tip: Filter by extension type e.g. /repo .js to search for all .js files in the /repo directory.
Tip: Separate your search with spaces e.g. /ssh pom.xml to search for src/ssh/pom.xml.
Tip: Use ↑ and ↓ arrow keys to navigate and return to view the file.
Tip: You can also navigate files with Ctrl+j (next) and Ctrl+k (previous) and view the file with Ctrl+o.
Tip: You can also navigate files with Alt+j (next) and Alt+k (previous) and view the file with Alt+o.