i wish this was a mustache emporium

_.md

[ Launch: i wish this was a mustache emporium ] 6701937 by ptvans
[ 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/19DYs0y.png","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

//this needs to be fixed so t is 0-1 and not 0-0.5

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

tributary.duration = 5000;

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, 180]);

var colorScale = d3.scale.linear()
	.interpolate(d3.interpolateHsl)
    .domain([0, 1])
    .range(["#870FF7", "#2C44C2"]);

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){
//the sin wave happens twice in a rotation
  var sinVal = Math.sin(2 * piScale(t));

  svg.selectAll('rect').attr({
   height: sizeScale(sinVal),
   width: sizeScale(sinVal),
   fill: colorScale(sinVal),
    "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 > 0.5){
    this.t=0;
  }
}