Basic animation

_.md

[ Launch: Basic animation ] 6433268 by enjalot

config.json

{"description":"Basic animation","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}},"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,"tab":"edit","display_percent":0.7,"hidepanel":false,"thumbnail":"http://i.imgur.com/rh4hVmL.gif","inline-console":true}

inlet.js

//hiii
var rw = [51, 200]
var rh = [51, 200]
var x = [24, 410];
var y = [59, 351];
var color = ["#ff0000", "#0000ff"]
var corners = 24;

var nr = 6;
var nc = 6;

tributary.duration = 3500;
tributary.ease = d3.ease("linear")
//tributary.ease = d3.ease("bounce")
//tributary.ease = d3.ease("cubic")
tributary.clone_opacity = 0.34145
tributary.nclones = 15;
tributary.loop_type = "pingpong" //can also choose "period" or "off"


var sw = tributary.sw;
var sh = tributary.sh;
var xoffset = sw / nr;
var yoffset = sh / nc;

console.log(xoffset, yoffset);

tributary.init = function(g) {
   
   var rect = g.append("rect")
        .attr("width", rw[0])
        .attr("height", rh[0])
        .attr("fill", "#ff0000")
        .attr("rx", corners)
        .attr("ry", corners)   
}

tributary.run = function(g,t) {
  console.log("t", t);
  var rect = g.select("rect")
  .attr("width", function(d,i) {
    var w = d3.interpolate(rw[0], rw[1])(t);
    console.log("width", w);
    return w
  })
  .attr("height", function(d,i) {
    var h = d3.interpolate(rh[0], rh[1])(t);
    console.log("height", h);
    return h;
  })
  .attr("fill", function(d,i) {
    var c = d3.interpolateHsl(color[0], color[1])(t);
    console.log("color", c);
    return c;
  })
  .attr("transform", function(d,i) {
    var xx = d3.interpolate(x[0], x[1])(t);
    var yy = d3.interpolate(y[0], y[1])(t);
    console.log("x,y", xx,yy);
    return "translate(" + [
      xx,
      yy
      ] + ")"
  })
}