291 Flipping triangles

_.md

[ Launch: #291 Flipping triangles ] 6484537 by zeffii
[ Launch: zeffii default inlet ] 5017202 by zeffii
[ Launch Inlet ]
Gist #4485126 [ Launch Inlet ]
Gist #4470504 [ Launch Inlet ]
Gist #4469595 [ Launch Inlet ]
Gist #4466941 [ Launch Inlet ]
Gist #4461697 [ Launch Inlet ]
Gist #4461508 [ Launch Inlet ]
Gist #4458395 [ Launch Inlet ]
Gist #4452401 [ Launch Inlet ]
Gist #4452384
Gist #4452367
Gist #4450163 An inlet to tributary

config.json

{"description":"291 Flipping triangles","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},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"periodictabledump3.csv":{"default":true,"vim":false,"emacs":false,"fontSize":12},"helpers.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,"tab":"edit","display_percent":0.43346738058538115,"hidepanel":false,"thumbnail":"http://i.imgur.com/C2L7e6c.png"}

helpers.js

function translate(x, y){
  return "translate(" + [x, y] + ")"
}  
function rotate(amount){
  return "rotate(" + amount + ")"
}  
function scale(){
  var args = arguments;
  var injection = (args.length === 1) ? args[0] : [args[0], args[1]];
  return "scale(" + injection + ")"
}

// web font lookup
var font_array = ['Roboto:400,100:latin'];
WebFontConfig = {
  google: { families: font_array }
};

(function() {
    var wf = document.createElement('script');
    var dlp = document.location.protocol;
    wf.src = ('https:' == dlp ? 'https' : 'http') +
      '://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
    wf.type = 'text/javascript';
    wf.async = 'true';
    var s = document.getElementsByTagName('script')[0];
    s.parentNode.insertBefore(wf, s);
})(); 
  
// alias console.log as log()
  
function log(text) { return console.log(text); }  

inlet.js

// original at http://geometrydaily.tumblr.com/post/33772005836

var nm = tributary.anim

// styles
var tri_style = { 
  "fill": "none",
  "stroke": "#2A6C81",
  "stroke-width": 1.3824 + "px"
};

var svg = d3.select("svg");
var mgroup = svg.append("g")
    .attr("transform", "translate("+ [115, 162] + ")")
	.style(tri_style)

var r_side = 100,
	t_side = r_side * 1.1547, // (magic ratio, calculate at runtime instead)
	t_path = tri_path(),
    y_offset = r_side/13.2;

var data = d3.range(nm(1,97));

mgroup.selectAll("path")
	.data(data)
	.enter()
	.append("path")
	.attr("d", t_path)
	.attr({"transform": function(d,i){
      	return "translate(" + [i*y_offset, 0] + ")" + "rotate(" + [i*5] + ")"
    }})

// helpers
function tri_path(){
    var a = position(90, t_side),
        b = position(210, t_side),
  		c = position(330, t_side);
    return "M" + [a.x,a.y,b.x,b.y,c.x,c.y].join(" ") + "z"
}

function rad(deg){ 
  	return ((2 * Math.PI) / 360) * deg 
}

function position(rot, radius){ 
	var	rads = rad(rot-30),
    	x = Math.sin(rads) * radius,
    	y = Math.cos(rads) * radius;
  
  	return {x:x, y:y}
}

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