xor circles

_.md

[ Launch: xor circles ] 6385454 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":false,"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/PTxYq0X.png"}

inlet.js

//http://24.media.tumblr.com/67e37e4f6c59e3e8ed12783afbeb4f42/tumblr_mrqks79TxD1r2geqjo1_500.gif
var context = tributary.ctx;
tributary.loop_type = "pingpong";
tributary.duration = 1500
console.log(tributary)

context.fillStyle = "black";
context.globalCompositeOperation = "xor";

var size = 300;
var offset = 75;
var radius = 15;
var radiusAdd = 34;
var numRows = 7;
var spacing = 50;
var max = size + offset + radius;

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


tributary.run = function(unused, t){
  var radiusOffset = Math.abs(t%2 - 1);
  var r = (radiusAdd * radiusOffset) + radius;
  console.log(radiusOffset)
   context.clearRect(0, 0, tributary.sw, tributary.sh);
   
    for (var i = 0; i < numRows; i++) {
       for (var j = 0; j < numRows; j++) {
         circle((spacing * i) + offset, (spacing * j) + (i % 2 === 0 ? spacing/2 : 0) + offset, r);
        }
    }

};