gradient trip

_.md

[ Launch: gradient trip ] 6473285 by enjalot

config.json

{"description":"gradient trip","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":"pingpong","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"thumbnail":"http://i.imgur.com/37zSwFn.gif"}

inlet.js

var n = 360;
var w = 70;

var ind = 0;


var svg = d3.select("svg");
var sw = parseInt(svg.style("width"), 10);
var sh = parseInt(svg.style("height"), 10);
svg.append("rect")
  .attr("width", "100%")
  .attr("height", "100%")

var data = _.map(d3.range(n), function(d,i) {
  return 1;
})

//make the gradients
var defs = svg.append("defs");
function make_gradient(gradid, i)
{
	var j = i;
  	
   	//else  if(i == 0) { i = 22 }
  	var dtheta = Math.PI * 2 / n + tributary.anim(0, 4*Math.PI);
  
  	//if(i === n/2) { j = 1; }
  	//if(i === 1) { j = n/2 }
  	//total angle is out of n slices
  	var theta1 = dtheta * j + dtheta/2;
  	var theta2 = theta1 + Math.PI;
  	var x1 = Math.cos(theta1) * 50 + 50;
  	var x2 = Math.cos(theta2) * 50 + 50;
  	var y1 = Math.sin(theta1) * 50 + 50;
  	var y2 = Math.sin(theta2) * 50 + 50;
  
  	//weird hack to flip a couple of them;
  	//if(i === n/2 || i === 1) { var t = x1; x1 = x2; x2 = t; }
  //if(i === n-1 || i === 0) { var t = x1; x1 = x2; x2 = t; }
  //console.log(i, x1,x2, y1,y2);
    
    var gradient = defs.append("svg:linearGradient")
        .attr("id", gradid + j)
        .attr("x1", x1 + "%")
        .attr("y1", y1 + "%")
        .attr("x2", x2 + "%")
        .attr("y2", y2 + "%");
    gradient.append("svg:stop")
        .attr("offset", 0 + "%")
        .attr("stop-color", "#FCFAFA")
        .attr("stop-opacity", 0.9);
    gradient.append("svg:stop")
        .attr("offset", 100 + "%")
        .attr("stop-color", "#722E2E")
        .attr("stop-opacity", 0.9);
    return gradient;
}
_.each(d3.range(n), function(d,i) {
  make_gradient("grad", i);
})



svg.append("rect")
  .attr("width", "100%")
  .attr("height", "100%")
  .attr("fill", "url(#grad" + ind + ")")