var style = document.createElement("style");
document.body.appendChild(style);

var canvas = document.createElement("canvas");
canvas.id = "canvas";
document.body.appendChild(canvas);

var context = canvas.getContext("2d");


function outlineBounds() {
	context.clearRect(0, 0, window.innerWidth, window.innerHeight);
	context.beginPath();
	var bounds = Array.from(document.querySelectorAll("*")).map(function (e) {
		return e.getBoundingClientRect();
	});
	var withinBounds = bounds.filter(function (e) {
		var viewVertical = window.scrollY < e.bottom || e.top < window.scrollY + window.innerHeight;
		var viewHorizontal = window.scrollX < e.right || e.left < window.scrollX + window.innerWidth;
		return viewVertical && viewHorizontal;
	});
	withinBounds.forEach(function (e) {
		context.rect(
			e.left,
			e.top,
			e.right - e.left,
			e.bottom - e.top
		);
	});
	context.stroke();
}
function fillBounds() {
	context.clearRect(0, 0, window.innerWidth, window.innerHeight);
	context.fillStyle = "#00000011";
	
	var bounds = Array.from(document.querySelectorAll("*")).map(function (e) {
		return e.getBoundingClientRect();
	});
	var withinBounds = bounds.filter(function (e) {
		var viewVertical = window.scrollY < e.bottom || e.top < window.scrollY + window.innerHeight;
		var viewHorizontal = window.scrollX < e.right || e.left < window.scrollX + window.innerWidth;
		return viewVertical && viewHorizontal;
	});
	withinBounds.forEach(function (e) {
		context.fillRect(
			e.left,
			e.top,
			e.right - e.left,
			e.bottom - e.top
		);
	});
}

function resizeCanvas() {
	style.innerHTML = `#canvas {
		position: fixed;
		left: 0;
		top: 0;
		width: 100%;
		height: 100%;
		z-index: 9999;
		pointer-events: none;
	}`;
	canvas.width = window.innerWidth;
	canvas.height = window.innerHeight;
	fillBounds();
}

resizeCanvas();

window.addEventListener("scroll", fillBounds);
window.addEventListener("resize", resizeCanvas);

var pixelSize = 8;
var halfPixel = Math.floor(pixelSize / 2);

function drawPixel(x, y, r, g, b, a) {
	context.fillStyle = "rgba(" + [r, g, b, a].join(", ") + ")";
	context.fillRect(x - halfPixel, y - halfPixel, pixelSize, pixelSize);
}

function distanceSquared(a, b) {
	var dx = b.x - a.x;
	var dy = b.y - a.y;
	return dx * dx + dy * dy;
}

function main(mouse) {
	fillBounds();
	var data = context.getImageData(0, 0, context.canvas.width, context.canvas.height).data;
	context.clearRect(0, 0, context.canvas.width, context.canvas.height);
	for (var x = 0; x < context.canvas.width; x += pixelSize) {
		for (var y = 0; y < context.canvas.height; y += pixelSize) {
			var pixel = {"x": x, "y": y};
			var intensityMouse = 1 / distanceSquared(pixel, mouse);
			var colorMouse = {"r": 0, "g": 255, "b": 255};
			var copy = {"x": window.innerWidth - mouse.x, "y": window.innerHeight - mouse.y};
			var intensityCopy = 1 / distanceSquared(pixel, copy);
			var colorCopy = {"r": 255, "g": 0, "b": 0};
			var intensity = intensityMouse + intensityCopy;
			var color = {
				"r": Math.floor((colorMouse.r * intensityMouse + colorCopy.r * intensityCopy) / intensity),
				"g": Math.floor((colorMouse.g * intensityMouse + colorCopy.g * intensityCopy) / intensity),
				"b": Math.floor((colorMouse.b * intensityMouse + colorCopy.b * intensityCopy) / intensity)
			};
			if (intensity > 0.000001) {
				var ha = 256 * intensity * (256 - data[(x + y * window.innerWidth) * 4 + 3]);
				drawPixel(x, y, Math.floor(color.r * ha), Math.floor(color.g * ha), Math.floor(color.b * ha), 1 - ha);
			}
		}
	}
}

window.addEventListener("mousemove", main);