323 Tendril (brain dead version) anim

_.md

[ Launch: #323 Tendril (brain dead version) ] 6494605 by zeffii
[ Launch: #323 Tendril (brain dead version) ] 6482788 by zeffii
[ Launch: zeffii default ] 5652440 by zeffii
[ Launch: zeffii default ] 5033869 by zeffii

config.json

{"description":"323 Tendril (brain dead version) 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},"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/WFDCrQi.gif"}

inlet.js

// #323 Tendril –
// http://geometrydaily.tumblr.com/post/35987620088/

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

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

group1.attr("transform", "translate(" + [451, 495] + ")")
.style("stroke", "#aeaeae")
.style("stroke-width", 3)

/*
each subsequent line attaches to the center of the previous line
and tilts at apx 30 degrees from it. and decreases in size by apx .9 

*/ 
tributary.duration = 8000;
var nm = tributary.anim;
   
var data = d3.range(nm(0,35));

var current_angle = 0;

var init_line = nm(60,240);
var temp_line = {x1:-init_line, y1:0, x2:0, y2:0};
var tpoint = {x:0, y:0};
var epoint = get_points(0, init_line, tpoint);
  
var lines = group1.selectAll("path").data(data);

lines.enter()
.append("path")
.attr("d", function(d,i){ 
	
    var line_path = "M" + [epoint.x, epoint.y, tpoint.x,tpoint.y]
    
    init_line *= 0.9;
    tpoint = lerp(tpoint, epoint, nm(1,0.5))
    current_angle -= nm(0,Math.PI/3.1)
    epoint = get_points(current_angle, init_line, tpoint)
    
    return line_path
})




// helpers


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


function lerp(pos0, pos1, t) {
    return {x: pos0.x+(pos1.x-pos0.x)*t, y: pos0.y+(pos1.y-pos0.y)*t}
}

/* 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;}