var canvas = document.querySelector("canvas");
var ctx = canvas.getContext("2d");
var w = canvas.width = canvas.clientWidth;
var h = canvas.height = canvas.clientHeight;
var pz = 10;
var alpha = Math.random();
var beta = Math.random();
var gamma = Math.random();
var delta = Math.random();
var scale = Math.floor(Math.random() * 50) + 50;

canvas.addEventListener("click", function(e) {
	alpha = Math.random();
	beta = Math.random();
	gamma = Math.random();
	delta = Math.random();
	scale = Math.floor(Math.random() * 30) + 50;
}, true);

function draw() {
	var time = (new Date()).getTime() * 0.1;
	var softColor = document.querySelector("#s").checked;

	for(var x = 0; x < w; x += pz) {
		for(var y = 0; y < h; y += pz) {
			color = 
				Math.sin(dist(x * alpha + time , y, w , h) / scale) +
				Math.sin(dist(x, y * beta, h * gamma, w * delta) / scale) +
				Math.sin(dist(gamma * x, delta * y + time, w + h * alpha, h * beta) / scale) +
				Math.sin(dist(x, y, 2 * h, w) / scale);
			if (softColor) {
				color = (color + 4) * 32;	
			} else {
				color = (color + 4) << 5;	
			}
			ctx.fillStyle = getColor(color);
			ctx.fillRect(x, y, pz, pz);
			if (color > 81 && color < 89) {
				ctx.lineWidth = 1;
				ctx.fillStyle = "rgba(255,255,255,0.3)";
				ctx.fillRect(x , y , pz , pz );
			}
		}
	}
}

setInterval(draw, 30);

function dist(a, b, c, d) {
	return Math.sqrt((a-c)*(a-c) + (b-d)*(b-d));
}
  
function getColor(color) {
	return "rgb(" +  
		Math.floor(color * 2) + "," + Math.floor(color * 1) + "," + Math.floor(255 - color) + 
		")";
}