471 Split second

_.md

[ Launch: #471 Split second ] 6484098 by zeffii
[ Launch: #471 Split second ] 5877519 by zeffii
[ Launch: zeffii default ] 5876874 by zeffii
[ Launch: zeffii default ] 5033869 by zeffii

config.json

{"description":"471 Split second ","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},"data2.csv":{"default":true,"vim":false,"emacs":false,"fontSize":12},"util.js":{"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/S4HZfWS.png"}

inlet.js

// #471 Split second   after @Tilman    recode by @zeffii
// http://geometrydaily.tumblr.com/post/54014292826

// not close enough yet.

d3.select("body").style("background-color", d3.rgb(125,125,125))

var svg = d3.select("svg");
var defs = svg.append("defs");
var group1 = svg.append("g").classed("group1", true);

group1.attr("transform", "translate(" + [357, 254] + ")")
.style({'fill':  "none", stroke: "#aeaeae"})

var fib_degree = (2*Math.PI) / 360;
var num_lines = 15;
var angle = -Math.PI;
var shift_left = -130;
var c_radius = 202; 

defs.append("clipPath")
    .attr("id", "radialClip")
    .append("circle")
    .attr({"r": c_radius})
	.attr("transform", "translate("+ [shift_left] + ")")

function fib(n){
    
  if (n === 0) return [0];
  if (n === 1) return [0,1];

  var fibn = [0, 1];
  for (var i = 2; i < n; i++) {
      fibn[ i ] = fibn[ i - 1 ] + fibn[ i - 2 ];
  }
  return fibn
}

var data = fib(num_lines);
console.log(data)
var line_group = defs.append("g").attr("id", "ep_2")

var lines = line_group.selectAll("path").data(data).enter()
.append("path")
.attr("d", function(d){
  var pos = get_points(angle, 392);
  angle -= (d/tributary.anim(798.728, 2.688) * fib_degree);
  var path = "M +" +  [0,0, pos.x, pos.y]
  return path
})

group1.append("circle")
    .attr({"r": c_radius})
	.attr("transform", "translate("+ [shift_left] + ")")
    .style({'fill':"#aeaeae",   stroke: "none"})

group1.append("use")
	.attr("xlink:href", "#ep_2")
	.style("clip-path", "url(#radialClip)")
	.style({"stroke": "#132323", "fill": "#BB7676"})




// helpers


// get_points(angle, cp, {}, amp)
function get_points(angle, amp){
    var pos = {}; 
	pos.x = Math.cos(angle) * amp
	pos.y = Math.sin(angle) * amp
	return pos
}


/* EOF */

style.css

.cm-s-lesser-dark.CodeMirror { background: #1e2426; color: #696969;  }
.cm-s-lesser-dark div.CodeMirror-selected {background: #064968 !important;} /* 33322B*/
.cm-s-lesser-dark span.cm-variable { color:#22EFFF; }
.cm-s-lesser-dark span.cm-variable-2 { color: #FFCCB4; }
.cm-s-lesser-dark span.cm-variable-3 { color: white; }
.cm-s-lesser-dark span.cm-string { color: Chartreuse; }
.cm-s-lesser-dark span.cm-string-2 {color: Chartreuse;}
.cm-s-lesser-dark span.cm-def {color: #FFCCB4; opacity: 1.0}
.cm-s-lesser-dark span.cm-bracket { color: #EBEFE7; }
.cm-s-lesser-dark pre { color:#FFF; }
.cm-s-lesser-dark span.cm-comment { color: #AFB4B4;}
.cm-s-lesser-dark span.cm-property {color: #FDA676;}
.cm-s-lesser-dark span.cm-number { color: #FF92EE;}
.cm-s-lesser-dark span.cm-keyword { color: #FFFF18; }
.cm-s-lesser-dark .CodeMirror-cursor { border-left: 1px solid white !important; }
.cm-s-lesser-dark .CodeMirror-gutters {background: #505050;}
.cm-s-lesser-dark .CodeMirror-linenumber {color: #D3D3D3;}