xor squares

_.md

[ Launch: xor squares ] 6389274 by gelicia
[ 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/R05hZWb.gif"}

inlet.js

//@slembcke did the rotation part :) 

//http://beesandbombs.tumblr.com/post/58350869100/more-b-w-squares
d3.select("body").style("background-color", d3.rgb(0, 0, 0));

var context = tributary.ctx;

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

var spacing = 50;
var numRowsH = tributary.sh / (spacing-25);
var numRowsW = tributary.sw / (spacing-25);
var colorScale = d3.scale.linear()
	.interpolate(d3.interpolateHsl)
    .domain([0, 1])
    .range(["#531717", "#2D2D80"]);
 
function square(x, y, a, fillstyle){
  var r = ((Math.pow(((a%2) - 1), 2)) * 10) + 18;
  var um = Math.pow(((a%2)  - 1), 2);
  var c = Math.cos(um), s = Math.sin(um);
  context.setTransform(c,s,-s,c,x,y);
  
  //I need to adjust the timing of this b/c its parabolic but rotation isnt
  context.beginPath();
  context.rect(-r, -r, 2*r, 2*r);
  context.fillStyle = '#fff'//fillstyle;
  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 < numRowsW; i++) {
    for (var j = 0; j < numRowsH; j++) {
      square(
        (spacing * i), 
        (spacing * j),
        t//,
       //colorScale(t%1).toString() //this doesn't work as well
      );
     }
   }
};