XOR Triangles

_.md

[ Launch: XOR Triangles ] 6402424 by slembcke

config.json

{"description":"XOR Triangles","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/F0E6oQS.png"}

inlet.js

//http://24.media.tumblr.com/67e37e4f6c59e3e8ed12783afbeb4f42/tumblr_mrqks79TxD1r2geqjo1_500.gif
var context = tributary.ctx;

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

var size = 300;
var offset = 75;
var radius = 30;
var radiusAdd = 34;
var numRows = 10;
var spacing = 50;
var max = size + offset + radius;

var sqrt3 = Math.sqrt(3);
var sqrt3_2 = sqrt3/2;
var rowHeight = 1.5;

function triangle(x, y, r, a){
  var c = r*Math.cos(a), s = r*Math.sin(a);
  context.setTransform(c,s,-s,c,x,y);
  
  context.beginPath();
  context.moveTo(0, 1);
  context.lineTo( sqrt3_2,    -0.5);
  context.lineTo(-sqrt3_2,    -0.5);
  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++) {
    var i_even = (i%2 === 0);
    var col_offset = (i_even ? 0 : 0.5);
    var x = radius*(sqrt3_2*i);
	if(x > tributary.sw + 2*radius) break;
    
    for (var j = 0;; j++) {
      var j_even = (j%2 === 0);
      var row_offset = radius*(j_even ? 0 : -sqrt3_2);
      var y = radius*(rowHeight*j + col_offset);
      if(y > tributary.sh + radius) break;
      
      var a = t*2/3*Math.PI + (i_even ? 0 : Math.PI);
      triangle(x + row_offset, y, radius, a);
    }
  }
};