Path animation - complex

_.md

[ Launch: SVG Path Element ] 4958914 by roundrobin
[ Launch: SVG Path Element ] 4958860 by roundrobin
[ Launch: Bootstrap Trib ] 4711978 by roundrobin
[ Launch: Tributary inlet ] 4711690 by roundrobin

config.json

{"description":"Path animation - complex","endpoint":"","display":"svg","public":true,"require":[{"name":"Helpers","url":"https://raw.github.com/roundrobin/svg-path-generator/master/svg-path-generator.js"}],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"thumbnail":"http://i.imgur.com/yTV6Ua3.png"}

inlet.js

//Uses the svg-path-generator class
//https://github.com/roundrobin/svg-path-generator

var svg = d3.select("svg");

var path0 = new Path(svg)
path0.canvasDOM().attr({transform:'translate(300,150)'})

var r = 12;
var n = 61;
var sp = 8;
var delay = 0;
var speed = 36;
var delta = 'M0,0'

//Initiaze delta for path 
for(var i = 0; i < n+1; i++){
	delta += 'L0,0';
}
 
var el = path0.el();
      
    
el
.attr('d',delta)  
.transition()
.duration(500)
.delay(0)
.attr('d',delta);  
    
     delay += 0;
    
var pointsSoFar = [];

  for(var i = 0; i < n+1; i++){
    
     var cx = r * Math.cos(sp * Math.PI * i / n);
     var cy = r * Math.sin(sp * Math.PI * i / n);
     pointsSoFar.push([cx.toFixed(2),cy.toFixed(2)]);
	 //Create inbetween delta 
     var newDelta = interpolateDelta(pointsSoFar,n);
	 var current = el.attr('d');
     el
      .attr('d',current)
      .transition()
      .duration(speed)
      .delay(delay)
      .attr('d',newDelta) 
     
     r+= Math.exp(6.5)/188;    
     delay += speed;  

  } 
  
   
function interpolateDelta(points, n){
    var newDelta = 'M0,0';
    var x = 0;
    var y = 0;
	for(var i = 0; i < n+1; i++){
	  
      if(i < points.length){
        var p = points[i];
		x = p[0];
		y = p[1];
      	
      }
      newDelta += ' L'+[x,y]; 
	}
	return newDelta;
}