rectsnake

_.md

[ Launch: Tributary inlet ] 4653581 by enjalot
[ Launch: Tributary inlet ] 4653576 by enjalot
[ Launch: Tributary inlet ] 4649351 by tmcw

config.json

{"description":"rectsnake","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}},"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/3buDJKz.png"}

inlet.js

var pts = [];

var n = 20;
d3.range(0, n).forEach(function(x) {
  return d3.range(0, n).forEach(function(y) {
    pts.push([x, y]);
  });
});

var x = d3.scale.linear().range([10, 355]).domain([0, 10]);
var y = d3.scale.linear().range([10, 306]).domain([0, 10]);

tributary.loop_type = "period";//"off", "pingpong";
tributary.duration = 5000;

tributary.init = function(g) {
var rect = g.selectAll('rect')
   .data(pts)
   .enter()
   .append('rect')
   .attr({ width: 65, height: 40 })
   .attr('transform', function(d) {
     return 'translate(' + [x(d[0]), y(d[1])] + ')';
   });
};

tributary.run = function(g,tt,i) {
  //console.log(t);
  var t = tt * 12
  var rot = 14;
  g.selectAll("rect")
  .attr({
    "transform": function(d,i) { 
      return 'translate(' + [x(d[0]), y(d[1])] + ') rotate(' + (Math.sin(d[0] + d[1] + t) * rot) + ' 5 5)';}
    ,"fill": function(d,i) {
      return 'hsl(' + (Math.sin(d[0] + d[1] + t) * 30) + ', 90%, 50%)';
    },
    "fill-opacity": 0.10944,
    "stroke": "#ffffff",
    "stroke-opacity": 0.38
  })
}

/*

d3.timer(function() {
  var t = (+new Date() / 1000);
  rect.attr('transform', function(d) {
     return 'translate(' + [x(d[0]), y(d[1])] + ') rotate(' + (Math.sin(d[0] + d[1] + t) * 30) + ' 5 5)';
   })
  .attr('fill', function(d) {
    return 'hsl(' + (Math.sin(d[0] + d[1] + t) * 30) + ', 90%, 50%)';
  });
}, 100);*/