i wish this was a mustache emporium

_.md

[ Launch: i wish this was a mustache emporium ] 6690695 by gelicia

config.json

{"description":"i wish this was a mustache emporium","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":false,"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/0He58Ph.gif","inline-console":false}

inlet.js

//for Jen, I'm sorry I don't know how to draw mustaches with math.
//http://beesandbombs.tumblr.com/post/62169316636/tropical-squares

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

tributary.duration = 10000;

var numHeight = 11;
var numWidth = 12;
var rectSize = [44, 60];
var margin = {t: 0, l: 0};

//piScale is used with sin to not do a linear animation
var piScale = d3.scale.linear()
    .domain([0, 1])
    .range([0, Math.PI]);

var sizeScale = d3.scale.linear()
    .domain([0, 1])
    .range([rectSize[1],rectSize[0]]);

var rotScale = d3.scale.linear()
    .domain([0, 1])
    .range([0, 360]);

//want to go from color 1 to color 2 to color 1
var colorScale = d3.scale.linear()
	.interpolate(d3.interpolateHsl)
    .domain([0, 0.5])
    .range(["#F70FBF", "#6A3BE4"]);

var svg = d3.selectAll('svg');

svg.selectAll('rect').data(d3.range(numHeight*numWidth)).enter().append('rect')
.attr({
  x: function(d,i){return ((i % numWidth) * rectSize[1]) + margin.l},
  y: function(d,i){return (Math.floor(i/numWidth) * rectSize[1]) + margin.t;},
  height: rectSize[0],
  width: rectSize[0],
  fill: colorScale(0)
}).classed('one', true);

tributary.run = function(unused, t){
  var sinVal = Math.abs(Math.sin(4 * piScale(t)));

  svg.selectAll('rect').attr({
   height: sizeScale(sinVal),
   width: sizeScale(sinVal),
   fill: colorScale(Math.abs(0.5-t)),
    "transform" : function(d, i){
      var rotDir = ((numWidth%2===0 && Math.floor(i/numWidth)%2===0)?(i%2===0?1:-1):(i%2===0?-1:1));
      return "rotate(" + (rotDir * rotScale(t)) + "," + (this.x.baseVal.value + (this.height.baseVal.value/2)) + "," +  (this.y.baseVal.value + (this.height.baseVal.value/2)) + ")" ;}
  });
  
  if (t > 1){
    this.t=0;
  }
}