Wtf Cat Image Stroke Masking

by Admiral Potato

HTML

<canvas id="strokeCanvas" width="512" height="512"></canvas>
	<canvas id="compositeCanvas" width="512" height="512"></canvas>

CSS

canvas{
  border: 1px solid #000;
  background-image: url(http://root.nuclearpixel.com/misc/photoshop_transparency_tile.gif);
}

JavaScript

var tau = Math.PI * 2;
var imageUrls = [
	'https://live.staticflickr.com/2698/4064148118_41665daa3d_b.jpg',
	'https://c1.staticflickr.com/5/4107/5024267854_16648005a8_b.jpg',
	'https://c1.staticflickr.com/7/6082/6117272430_5b539f14fc_b.jpg',
];
var images = imageUrls.map(function(url){
	var image = new Image();
	image.src = url;
	return image;
});
var strokeCanvas = document.getElementById('strokeCanvas');
var context = strokeCanvas.getContext('2d');
var canvasWidth = strokeCanvas.width;
var canvasHeight = strokeCanvas.height;
var halfWidth = canvasWidth / 2;
var halfHeight = canvasHeight / 2;


var compositeCanvas = document.getElementById('compositeCanvas');
var compositeContext = compositeCanvas.getContext('2d');
var cWidth = compositeCanvas.width;
var cHeight = compositeCanvas.height;
var cHalfWidth = cWidth / 2;
var cHalfHeight = cHeight / 2;


var draw = function(time){
	var seconds = time / 1000;
	context.save();
	context.fillStyle = 'hsl(10, 36%, 35%)';
	context.fillRect(0, 0, canvasWidth, canvasHeight);
	context.translate(halfWidth, halfHeight);
	drawGrid(4, 4, seconds);
	context.restore();
};

var drawGrid = function(rows, columns, seconds){
	var distanceFromCenter = halfWidth;
	var scale = distanceFromCenter * 2;
	context.save();

	for (var rowIndex = 0; rowIndex < rows; rowIndex++) {
		for (var columnIndex = 0; columnIndex < columns; columnIndex++) {
			var xFrac = (columnIndex + 0.5) / columns;
			var yFrac = (rowIndex + 0.5) / rows;
			var x = xFrac * scale - distanceFromCenter;
			var y = yFrac * scale - distanceFromCenter;
			drawCircles(x, y, xFrac + yFrac, seconds + xFrac + yFrac);
		}
	}

	context.restore();
};

var drawCircles = function(x, y, rotation, seconds){
	var radius1 = halfWidth / 15;
	var radius2 = radius1 * 2;
	var radius3 = radius1 * 3;
	var phase1 = (seconds / 4) * tau;
	var phase2 = ((seconds + 1) / 4) * tau;
	var phase3 = ((seconds + 2) / 4) * tau;
	var sine1 = (Math.sin(phase1) + 1) * 0.5;
	var sine2 = (Math.sin(phase2) + 1) *...