gif experiment xor circles

_.md

[ Launch: gif experiment xor circles ] 6418811 by bollig
[ Launch: gif experiment xor circles ] 6418604 by enjalot

config.json

{"description":"gif experiment xor circles","endpoint":"","display":"canvas","public":true,"require":[{"name":"gif.js","url":"http://jnordberg.github.io/gif.js/gif.js"}],"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},"ui.js":{"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/D9r9RQV.png"}

inlet.js

/*
experiment with making gifs
http://jnordberg.github.io/gif.js
*/

//for @zeffii by @gelicia: http://tributary.io/inlet/6384402
//http://beesandbombs.tumblr.com/post/58615106167
d3.select("body").style("background-color", d3.rgb(25, 25, 25));

var context = tributary.ctx;
tributary.loop_type = "pingpong";
tributary.duration = 1000

context.globalCompositeOperation = "xor";

var offset = 0;
var radius = 15;
var radiusAdd = 34;
var spacing = 50;
var numRowsH = tributary.sh / (spacing-radius);
var numRowsW = tributary.sw / (spacing-radius);
var colorScale = d3.scale.linear()
	.interpolate(d3.interpolateHsl)
    .domain([0, 1])
    .range(["#531717", "#2D2D80"]);

function circle(x, y, r, fillstyle){
  context.beginPath();
  context.arc(x, y, r, 0, 2.0*Math.PI, false);
  context.fillStyle = fillstyle;
  context.fill();
}

tributary.run = function(unused, t){
  //thanks @slembcke :D  
  var easedT = t*t*(3 - 2*t);

   context.clearRect(0, 0, tributary.sw, tributary.sh);
   for (var i = 0; i < numRowsW; i++) {
       for (var j = 0; j < numRowsH; j++) {
         circle(
           ((spacing-7) * i) + offset, 
           (spacing * j) + (i % 2 === 0 ? spacing/2 : 0) + offset, 
           (radiusAdd * easedT) + radius,
		   colorScale(easedT).toString()
         );
        }
   }
};

ui.js

//experimental ui for recording the gif and showing it

var controls = d3.select(".time_controls")
var gifbutton = controls.selectAll("#gif")
gifbutton
.data([0]).enter()
.append("button").attr("id", "gif").text("gif")

gifbutton.on("click", function() {
  tributary.pause = true;
  var gif = new GIF({
    workers: 2,
    quality: 20,
    width: 500,
    height: 500,
    workerScript: "/static/lib/gif.worker.js"
  });
  //record button
  var n = 10;
  var delay = tributary.duration / n;
  //make n frames
  d3.range(2*n).forEach(function(i) {
    var j = i;
    if(i >= n) i = 2*n-i;
    if(tributary.init)
      tributary.init(tributary.ctx, j);
    //tributary.run(i/tributary.nclones, frame, i);
    var t = tributary.ease(i/(n-1));
    console.log("T", i,t, delay)
    setTimeout(function() {
      tributary.run(tributary.ctx, t, i);
      console.log("adding")
      gif.addFrame(tributary.canvas, {delay:delay, copy:true});
      if(j == 2*n-1) {
        console.log("render")
        gif.render();
      }
    }, 100 * j)
  });

  gif.on('finished', function(blob) {
    console.log("done");
    window.open(URL.createObjectURL(blob));
  });
});