#401 geom daily anim

_.md

[ Launch: #401 geom daily anim ] 5342691 by enjalot
[ Launch: #401 geom daily anim ] 5342642 by enjalot
[ Launch: #401 geom daily ] 5342602 by enjalot
[ Launch: #401 geom daily ] 5342452 by enjalot

config.json

{"description":"#401 geom daily anim","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"style.css":{"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":true,"loop":true,"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/c8Why9x.png"}

inlet.js

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

var outerR = 300;
var innerR = outerR / 2.2;
var insideR = outerR - innerR;

var w = tributary.sw;
var h = tributary.sh;

var n = 80;
var animN;

var cx = w/2;
var cy = h/2;

//tributary.loop_type = "pingpong";
tributary.loop_type = "period";
tributary.duration = 5000;

//outer
svg.append("circle")
.attr({
  cx: cx,
  cy: cy,
  r: outerR
})
.classed("circle", true);

tributary.init = function(g,t) {
  var circles = g.selectAll(".in")
    .data(d3.range(n))
    .enter()
    .append("g")
    .classed("in", true)
    .each(createCircle)
}

tributary.run = function(g,t) {
  animN = 8 + Math.sin(Math.PI * t) * (n-8);
  animN = animN - animN % 2
  g.selectAll(".in")
  .each(function(d,i) {
    updateCircle(d3.select(this), i, t);
  })
  .style("display", function(d,i) {
    if(i < animN) {
      return ""
    } else {
      return "none"
    }
  })
}

function createCircle(d,i) {
  var g = d3.select(this)
  
  
  g.append("path")
  .classed("inner", true)
  .classed("circle", true)
  
  g.append("path")
  .classed("inner", true)
  .classed("circle", true)
}

function updateCircle(g, i, t) {
  
  
  var n = animN
  var anim = 2 * Math.PI * t * 2;
  
  var inc = i * 2 * Math.PI / n;
  
  var x = cx + insideR * Math.cos(inc + anim);
  var y = cy + insideR * Math.sin(inc + anim);
  
  var start =  Math.PI/2 + inc + anim;
  var end = start + 2 * Math.PI * 0.46072;
  
  d = {
    startAngle: start,
    endAngle: end,
    innerRadius: innerR,
    outerRadius: innerR
  }
  start = 2 * Math.PI * -0.2629 + inc;
  end = start + Math.PI/4 * 1.8;
  
  var d2 = {
    startAngle: start,
    endAngle:  end,
    innerRadius: innerR,
    outerRadius: innerR
  }
  var ds = [d,d2];
  var arc = d3.svg.arc();

  g.selectAll("path.inner")
  .each(function(d,i) {
    d3.select(this).attr("d", arc(ds[i]))
  })
  .attr("transform", "translate(" + [ x, y ] + ")")

}

style.css

.circle {
  fill: none;
  stroke: #DF138D;
  stroke-width: 1;
}