1var style = document.createElement("style");
2document.body.appendChild(style);
3
4var canvas = document.createElement("canvas");
5canvas.id = "canvas";
6document.body.appendChild(canvas);
7
8var context = canvas.getContext("2d");
9
10
11function outlineBounds() {
12	context.clearRect(0, 0, window.innerWidth, window.innerHeight);
13	context.beginPath();
14	var bounds = Array.from(document.querySelectorAll("*")).map(function (e) {
15		return e.getBoundingClientRect();
16	});
17	var withinBounds = bounds.filter(function (e) {
18		var viewVertical = window.scrollY < e.bottom || e.top < window.scrollY + window.innerHeight;
19		var viewHorizontal = window.scrollX < e.right || e.left < window.scrollX + window.innerWidth;
20		return viewVertical && viewHorizontal;
21	});
22	withinBounds.forEach(function (e) {
23		context.rect(
24			e.left,
25			e.top,
26			e.right - e.left,
27			e.bottom - e.top
28		);
29	});
30	context.stroke();
31}
32function fillBounds() {
33	context.clearRect(0, 0, window.innerWidth, window.innerHeight);
34	context.fillStyle = "#00000011";
35	
36	var bounds = Array.from(document.querySelectorAll("*")).map(function (e) {
37		return e.getBoundingClientRect();
38	});
39	var withinBounds = bounds.filter(function (e) {
40		var viewVertical = window.scrollY < e.bottom || e.top < window.scrollY + window.innerHeight;
41		var viewHorizontal = window.scrollX < e.right || e.left < window.scrollX + window.innerWidth;
42		return viewVertical && viewHorizontal;
43	});
44	withinBounds.forEach(function (e) {
45		context.fillRect(
46			e.left,
47			e.top,
48			e.right - e.left,
49			e.bottom - e.top
50		);
51	});
52}
53
54function resizeCanvas() {
55	style.innerHTML = `#canvas {
56		position: fixed;
57		left: 0;
58		top: 0;
59		width: 100%;
60		height: 100%;
61		z-index: 9999;
62		pointer-events: none;
63	}`;
64	canvas.width = window.innerWidth;
65	canvas.height = window.innerHeight;
66	fillBounds();
67}
68
69resizeCanvas();
70
71window.addEventListener("scroll", fillBounds);
72window.addEventListener("resize", resizeCanvas);
73
74var pixelSize = 8;
75var halfPixel = Math.floor(pixelSize / 2);
76
77function drawPixel(x, y, r, g, b, a) {
78	context.fillStyle = "rgba(" + [r, g, b, a].join(", ") + ")";
79	context.fillRect(x - halfPixel, y - halfPixel, pixelSize, pixelSize);
80}
81
82function distanceSquared(a, b) {
83	var dx = b.x - a.x;
84	var dy = b.y - a.y;
85	return dx * dx + dy * dy;
86}
87
88function main(mouse) {
89	fillBounds();
90	var data = context.getImageData(0, 0, context.canvas.width, context.canvas.height).data;
91	context.clearRect(0, 0, context.canvas.width, context.canvas.height);
92	for (var x = 0; x < context.canvas.width; x += pixelSize) {
93		for (var y = 0; y < context.canvas.height; y += pixelSize) {
94			var pixel = {"x": x, "y": y};
95			var intensityMouse = 1 / distanceSquared(pixel, mouse);
96			var colorMouse = {"r": 0, "g": 255, "b": 255};
97			var copy = {"x": window.innerWidth - mouse.x, "y": window.innerHeight - mouse.y};
98			var intensityCopy = 1 / distanceSquared(pixel, copy);
99			var colorCopy = {"r": 255, "g": 0, "b": 0};
100			var intensity = intensityMouse + intensityCopy;
101			var color = {
102				"r": Math.floor((colorMouse.r * intensityMouse + colorCopy.r * intensityCopy) / intensity),
103				"g": Math.floor((colorMouse.g * intensityMouse + colorCopy.g * intensityCopy) / intensity),
104				"b": Math.floor((colorMouse.b * intensityMouse + colorCopy.b * intensityCopy) / intensity)
105			};
106			if (intensity > 0.000001) {
107				var ha = 256 * intensity * (256 - data[(x + y * window.innerWidth) * 4 + 3]);
108				drawPixel(x, y, Math.floor(color.r * ha), Math.floor(color.g * ha), Math.floor(color.b * ha), 1 - ha);
109			}
110		}
111	}
112}
113
114window.addEventListener("mousemove", main);
115