fly boxes

_.md

[ Launch: click boxes ] 6064642 by georules
[ Launch: click boxes ] 5991954 by georules

config.json

{"description":"fly boxes","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":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/wRhC47c.gif"}

inlet.js

tributary.loop= "linear";
tributary.duration = 10000;
bottom = {
  x :tributary.sw, y :tributary.sh
};
target = {
  x:0,y:0
};
var boxdata = [
  {x:bottom.x,y:bottom.y,boxsize:50,id:200,color:"#00cc00",start:bottom,target:target},
  {x:bottom.x,y:bottom.y,boxsize:50,id:201,color:"#00CC00",start:bottom,target:{x:50,y:0}}
];

boxsize = 50;
var id=0;
var xspot = 0;
var yspot = 0;
svg = d3.select("svg");
svg.on("click", function(d,i) {
  m = d3.mouse(this);
  x = m[0], y = m[1];
  numbox = boxdata.length;
  randcolor = function() {return "hsl(" + Math.random() * 360 + ",100%,50%)"};

  var b = {x:x,y:y,boxsize:boxsize,id:id++,color:randcolor(),start:bottom,
           target:{x:xspot*50,y:yspot*50}};
  boxdata.push(b);
   if (((numbox-1) % 10) === 0) {
    yspot +=1;
    xspot = -1;
  }
  xspot +=1;
  update();
  refresh();
});

tributary.init = function(g,i)	{
  for (var box in boxdata)	{
    box = boxdata[box];
    box.x = bottom.x;
    box.y = bottom.y;
  }
}

tributary.run = function(g,t,i)	{
  for (var box in boxdata)	{
    box = boxdata[box];
    box.x = box.start.x -(box.start.x - box.target.x)*t
    box.y = box.start.y - (box.start.y - box.target.y)*t
  }
  //update();
  refresh();
}

function refresh() {
  svg.selectAll("rect").
  attr("width",function(d) {return d.boxsize})
  .attr("height",function(d) {return d.boxsize})
  .attr("x",function (d){ return d.x-(d.boxsize/2)})
  .attr("y",function (d) { return d.y-(d.boxsize/2)})
  .style("fill",function(d) {return d.color;})
  
  texts = svg.selectAll("text")
  .text(function(d){return ("hi"+d.id)})
  .attr("x", function(d) { return d.x; })
  .attr("y", function(d) { return d.y; })
  .attr("font-family", "sans-serif")
  .attr("font-size", "20px")
  .attr("fill", "black");
}

function update() {
  svg.selectAll("rect")
  .data(boxdata)
  .enter()
  .append("rect");
  
 svg.selectAll("text")
  .data(boxdata)
  .enter().append("text")
 
}
update()