explode animation based on promises

src/js/visuals/index.js

@@ -1,4 +1,5 @@
 var _ = require('underscore');
+var Q = require('q');
 // horrible hack to get localStorage Backbone plugin
 var Backbone = (!require('../util').isBrowser()) ? Backbone = require('backbone') : Backbone = window.Backbone;
 
@@ -119,6 +120,49 @@ GitVisuals.prototype.toScreenCoords = function(pos) {
   };
 };
 
+GitVisuals.prototype.finishAnimation = function() {
+  var deferred = Q.defer();
+
+  deferred.promise
+  .then(_.bind(this.explodeNodes, this))
+  .then(_.bind(this.
+
+  deferred.resolve();
+};
+
+GitVisuals.prototype.explodeNodes = function() {
+  var deferred = Q.defer();
+  var funcs = [];
+  _.each(this.visNodeMap, function(visNode) {
+    funcs.push(visNode.getExplodeStepFunc());
+  });
+
+  var interval = setInterval(function() {
+    // object creation here is a bit ugly inside a loop,
+    // but the alternative is to just OR against a bunch
+    // of booleans which means the other stepFuncs
+    // are called unnecessarily when they have almost
+    // zero speed. would be interesting to see performance differences
+    var keepGoing = [];
+    _.each(funcs, function(func) {
+      if (func()) {
+        keepGoing.push(func);
+      }
+    });
+
+    if (!keepGoing.length) {
+      clearInterval(interval);
+      // next step :D wow I love promises
+      deferred.resolve();
+      return;
+    }
+
+    funcs = keepGoing;
+  }, 1/40);
+
+  return deferred.promise;
+};
+
 GitVisuals.prototype.animateAllFromAttrToAttr = function(fromSnapshot, toSnapshot, idsToOmit) {
   var animate = function(obj) {
     var id = obj.getID();

src/js/visuals/tree.js

@@ -750,14 +750,50 @@ var VisNode = VisBase.extend({
     }, this);
   },
 
-  finishAnimation: function() {
+  getExplodeStepFunc: function() {
     var circle = this.get('circle');
 
     // decide on a speed
-    var speedMag = 10;
+    var speedMag = 20;
-    var angle = Math.random() * 2 * Math.PI;
+    // aim upwards
+    var angle = Math.PI + Math.random() * 1 * Math.PI;
+    var gravity = 1 / 5;
+    var drag = 1 / 100;
+
     var vx = speedMag * Math.cos(angle);
-    var vy = speedMap * Math.sin(angle);
+    var vy = speedMag * Math.sin(angle);
+    var x = circle.attr('cx');
+    var y = circle.attr('cy');
+
+    var maxWidth = this.gitVisuals.paper.width;
+    var maxHeight = this.gitVisuals.paper.height;
+    var elasticity = 0.8;
+    var dt = 1.0;
+
+    var stepFunc = function() {
+      // lol epic runge kutta here... not
+      vy += gravity * dt - drag * vy;
+      vx -= drag * vx;
+      x += vx * dt;
+      y += vy * dt;
+
+      if (x < 0 || x > maxWidth) {
+        vx = elasticity * -vx;
+        x = (x < 0) ? 0 : maxWidth;
+      }
+      if (y < 0 || y > maxHeight) {
+        vy = elasticity * -vy;
+        y = (y < 0) ? 0 : maxHeight;
+      }
+
+      circle.attr({
+        cx: x,
+        cy: y
+      });
+      // continuation calculation
+      return (vx * vx + vy * vy > 0.01) ? true : false;
+    };
+    return stepFunc;
   },
 
   genGraphics: function() {

src/style/main.css

@@ -83,7 +83,7 @@ body,
 }
 
 #canvasWrapper {
-  box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8) inset;
+  /*box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.8) inset;*/
   background-color: #4183C4;
 }
 

todo.txt

@@ -14,6 +14,7 @@ Medium things:
 [ ] view for anything above the fold
 [ ] rebase styling (get it better. even cuter -- make it like a command window)
 [ ] fix multiple rebases
+[ ] z index reflow update
 
 Small things to implement:
 ~~~~~~~~~~~~~~~~~~~~~~~~~~~~~