square illusion

_.md

[ Launch: An inlet to Tributary ] 488e4b54c4e8e5af9c82cc58f14938cd by ptvans

config.json

{"description":"square illusion","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"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},"styles.css":{"default":true,"vim":false,"emacs":false,"fontSize":12},"style.css":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"tab":"edit","display_percent":0.6167818588730908,"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,"hidepanel":false,"fullscreen":false,"thumbnail":"http://i.imgur.com/SmDGkma.png","ajax-caching":true}

inlet.js

var txt;
var n = 3;

var colors = ["#dfe0e1", "#111111"];
var size = 0.5;
var percent = 0.5;
var corners = 2;
var data = _.map(d3.range(n), function(d,i) {
  size *= percent;
  return size;
});
tributary.loop = "pingpong";
    
tributary.init = function(g) {
  
  g.append("rect")
    .attr("width", "100%")
    .attr("height", "100%");
  var squares = g.selectAll("g.square")
    .data(data)
    .enter().append("svg:g")
    .classed("square", true)
    .attr("transform", "translate(" + [0,0] + ")");

  squares.append("svg:rect")
    .attr("rx", corners)
    .attr("ry", corners)
    .attr("x", -12.5)
    .attr("y", -12.5)
    .attr("width", 25)
    .attr("height", 25)
    .attr("transform", function(d, i) { return "scale(" + (d) * 20 + ")"; })
    .style("fill", function(d,i) {
        return colors[i%2];
    });

	squares.datum(function(d) {
        return {center: [tributary.sw/2,tributary.sh/2], angle: 0};
	});
};
tributary.run = function(g,t) {
  var squares = g.selectAll("g.square")
  squares.attr("transform", function(d, i) {
      d.angle = d3.interpolateNumber(0, -90*i)(t);
    return "translate(" + d.center + ")rotate(" + d.angle + ")";
  });
};