Canvas Kaleidoscope Toy

by Admiral Potato

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.6.2/dat.gui.min.js"></script>
<canvas id="kaleidoscope" width="512" height="512"></canvas>
<canvas id="buffer" width="1024" height="1024"></canvas>

CSS

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

JavaScript

var settings = {
	image: "http://68.media.tumblr.com/a363c2cecfd910c5ab9d3aeb2fdafdf0/tumblr_ok89pjlViQ1qapjdzo1_1280.jpg",
	scale: 1,
	x: 0,
	y: 0,
	rotate: 0
};

var bufferCanvas = document.getElementById('buffer');
var bufferContext = bufferCanvas.getContext('2d');
var halfBufferWidth = bufferCanvas.width / 2;
var halfBufferHeight = bufferCanvas.height / 2;


var triangleSize = halfBufferWidth;
bufferContext.translate(halfBufferWidth, halfBufferHeight);
bufferContext.beginPath();
bufferContext.moveTo(-triangleSize, -triangleSize);
bufferContext.lineTo(-triangleSize,  triangleSize);
bufferContext.lineTo( triangleSize,  triangleSize);
bufferContext.closePath();
bufferContext.fill();

var image = new Image();
var drawTheImageOnToTheTriangleMask = function(){
	var imageToTriangleRatio = halfBufferWidth * 2 / image.width;
	var scale = settings.scale;
	bufferContext.save();
	bufferContext.globalCompositeOperation = 'source-atop';
	bufferContext.translate(-triangleSize, -triangleSize);
	bufferContext.rotate(settings.rotate);
	bufferContext.scale(scale, scale);
	bufferContext.imageSmoothingQuality = 'high';
	bufferContext.drawImage(image, settings.x, settings.y);
	nowDoTheKaleDance();
	bufferContext.restore();
};

var setImageAddress = function(){
	image.src = settings.image;
};

var gui = new dat.GUI();
gui.add(settings, 'image').onChange(setImageAddress);
gui.add(settings, 'scale', -2, 2).onChange(drawTheImageOnToTheTriangleMask);
gui.add(settings, 'x', -halfBufferWidth, halfBufferWidth).onChange(drawTheImageOnToTheTriangleMask);
gui.add(settings, 'y', -halfBufferHeight, halfBufferHeight).onChange(drawTheImageOnToTheTriangleMask);
gui.add(settings, 'rotate', -Math.PI, Math.PI).onChange(drawTheImageOnToTheTriangleMask);

var imageLoadHandler = function(){
	drawTheImageOnToTheTriangleMask();
};
image.addEventListener('load', imageLoadHandler);
setImageAddress();




var kaleCanvas = document.getElementById('kaleidoscope');
var kaleContext =...