gif experiment xor circles

_.md

[ Launch: gif experiment xor circles ] 6418413 by enjalot
[ Launch: Lissajous ] 6384402 by gelicia
[ Launch: Lissajous ] 6378631 by slembcke

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/iQYREX3.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() {
  var gif = new GIF({
    workers: 2,
    quality: 10,
    workerScript: "/static/lib/gif.worker.js"
  });
  //record button
  var n = tributary.nclones;
  var delay = tributary.duration / n;
  //make n frames
  d3.range(n).forEach(function(i) {
    if(tributary.init)
      tributary.init(tributary.ctx, j);
    //tributary.run(i/tributary.nclones, frame, i);
    var t = tributary.ease(i/(tributary.n-1));
    tributary.run(tributary.ctx, t, i);
    gif.addFrame(tributary.canvas, {delay:delay});
  });

  gif.on('finished', function(blob) {
    window.open(URL.createObjectURL(blob));
  });
  gif.render();
  
})