xor squares

_.md

[ Launch: xor squares ] 6386076 by slembcke
[ Launch: Lissajous ] 6384402 by gelicia
[ Launch: Lissajous ] 6378631 by slembcke

config.json

{"description":"xor squares","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/WocjB0N.png"}

inlet.js

//for @zeffii
//http://beesandbombs.tumblr.com/post/58615106167
//d3.select("body").style("background-color", d3.rgb(255, 255, 255));

var context = tributary.ctx;

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

var size = 300;
var offset = 0;
var radius = 15;
var radiusAdd = 34;
var numRows = 20;
var spacing = 50;
var max = size + offset + radius;

function square(x, y, a){
  var c = Math.cos(a), s = Math.sin(a);
  context.setTransform(c,s,-s,c,x,y);
  
  var r = 25;
  context.beginPath();
  context.rect(-r, -r, 2*r, 2*r);
  context.fill();
}


tributary.run = function(unused, t){
  context.setTransform(1,0,0,1,0,0);
  context.clearRect(0, 0, tributary.sw, tributary.sh);
  for (var i = 0; i < numRows; i++) {
    for (var j = 0; j < numRows; j++) {
      square(
        (spacing * i) + offset, 
        (spacing * j) + offset, 
        t
      );
     }
   }
};