#352 geometrydaily challenge

_.md

[ Launch: #352 geometrydaily challenge ] 4998357 by enjalot
[ Launch: #352 geometrydaily challenge ] 4998346 by enjalot

config.json

{"description":"#352 geometrydaily challenge","endpoint":"","display":"svg","public":true,"require":[],"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":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/XOlSDjl.png"}

inlet.js

var cx = tributary.sw/2;
var cy = tributary.sh/2;
var radius = tributary.sh/2 * 0.75;

var n = 14; //number of arcs

var xoffset = 49;
var yoffset = 0;

var xamplitude = 88;

tributary.loop_type = "pingpong";

var colorScale = d3.scale.linear()
.domain([0, n])
.range([
  "#2D44E9",
  "#06C00E"
  ])
.interpolate(d3.interpolateHcl)

var arcStyle = {
  fill: "none",
  stroke: colorScale,
  "stroke-width": 2,
  "stroke-opacity": 0.75
}

tributary.loop_type = "pingpong";

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

var defs = svg.append("defs")
defs.append("clipPath")
.attr("id", "circleclip")
.append("circle")
.attr({
  cx: cx,
  cy: cy,
  r: radius+2,
})


tributary.init = function(g) {
  var circles = g.append("g")
  .classed("circles", true)
  .attr("clip-path","url(#circleclip)")
  
  var array = d3.range(n);
  circles.selectAll("circle.arc")
  .data(array)
  .enter()
  .append("circle")
  .classed("arc", true)
  .attr({
    cx: function(d,i) { 
      return cx + (i+1) * xoffset
    },
    cy: function(d,i) {
      return cy + i * yoffset;
    },
    r: radius
  })
  .style(arcStyle)
}
tributary.run = function(g,t) {
  var theta = 2* Math.PI;
  g.select("g.circles")
  .selectAll("circle.arc")
  .attr({
    cx: function(d,i) { 
      return cx + (i+1) * xoffset + xamplitude * Math.cos(t * theta * i/n) - xamplitude;
    },
    cy: function(d,i) {
      return cy + i * yoffset;// - 82 * Math.tan(t*theta);
    },
    r: radius
  })
}