xor circles

_.md

[ Launch: Lissajous ] 6384402 by gelicia
[ Launch: Lissajous ] 6378631 by slembcke

config.json

{"description":"xor circles","endpoint":"","display":"canvas","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/8OrYqx1.gif"}

inlet.js

//for @zeffii
//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()
         );
        }
   }
};