mouselight

javascript: 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%22;var%20bounds%20=%20Array.from(document.querySelectorAll(%22*%22)).map(function%20(e)%20{return%20e.getBoundingClientRect();});var%20withinBounds%20=%20bounds.filter(function%20(e)%20{var%20viewVertical%20=%20window.scrollY%20%3C%20e.bottom%20||%20e.top%20%3C%20window.scrollY%20+%20window.innerHeight;var%20viewHorizontal%20=%20window.scrollX%20%3C%20e.right%20||%20e.left%20%3C%20window.scrollX%20+%20window.innerWidth;return%20viewVertical%20&&%20viewHorizontal;});withinBounds.forEach(function%20(e)%20{context.fillRect(e.left,e.top,e.right%20-%20e.left,e.bottom%20-%20e.top);});}function%20resizeCanvas()%20{style.innerHTML%20=%20%60#canvas%20{position:%20fixed;left:%200;top:%200;width:%20100%;height:%20100%;z-index:%209999;pointer-events:%20none;}%60;canvas.width%20=%20window.innerWidth;canvas.height%20=%20window.innerHeight;fillBounds();}resizeCanvas();window.addEventListener(%22scroll%22,%20fillBounds);window.addEventListener(%22resize%22,%20resizeCanvas);var%20pixelSize%20=%208;var%20halfPixel%20=%20Math.floor(pixelSize%20/%202);function%20drawPixel(x,%20y,%20r,%20g,%20b,%20a)%20{context.fillStyle%20=%20%22rgba(%22%20+%20[r,%20g,%20b,%20a].join(%22,%20%22)%20+%20%22)%22;context.fillRect(x%20-%20halfPixel,%20y%20-%20halfPixel,%20pixelSize,%20pixelSize);}function%20distanceSquared(a,%20b)%20{var%20dx%20=%20b.x%20-%20a.x;var%20dy%20=%20b.y%20-%20a.y;return%20dx%20*%20dx%20+%20dy%20*%20dy;}function%20main(mouse)%20{fillBounds();var%20data%20=%20context.getImageData(0,%200,%20context.canvas.width,%20context.canvas.height).data;context.clearRect(0,%200,%20context.canvas.width,%20context.canvas.height);for%20(var%20x%20=%200;%20x%20%3C%20context.canvas.width;%20x%20+=%20pixelSize)%20{for%20(var%20y%20=%200;%20y%20%3C%20context.canvas.height;%20y%20+=%20pixelSize)%20{var%20pixel%20=%20{%22x%22:%20x,%20%22y%22:%20y};var%20intensityMouse%20=%201%20/%20distanceSquared(pixel,%20mouse);var%20colorMouse%20=%20{%22r%22:%200,%20%22g%22:%20255,%20%22b%22:%20255};var%20copy%20=%20{%22x%22:%20window.innerWidth%20-%20mouse.x,%20%22y%22:%20window.innerHeight%20-%20mouse.y};var%20intensityCopy%20=%201%20/%20distanceSquared(pixel,%20copy);var%20colorCopy%20=%20{%22r%22:%20255,%20%22g%22:%200,%20%22b%22:%200};var%20intensity%20=%20intensityMouse%20+%20intensityCopy;var%20color%20=%20{%22r%22:%20Math.floor((colorMouse.r%20*%20intensityMouse%20+%20colorCopy.r%20*%20intensityCopy)%20/%20intensity),%22g%22:%20Math.floor((colorMouse.g%20*%20intensityMouse%20+%20colorCopy.g%20*%20intensityCopy)%20/%20intensity),%22b%22:%20Math.floor((colorMouse.b%20*%20intensityMouse%20+%20colorCopy.b%20*%20intensityCopy)%20/%20intensity)};if%20(intensity%20%3E%200.000001)%20{var%20ha%20=%20256%20*%20intensity%20*%20(256%20-%20data[(x%20+%20y%20*%20window.innerWidth)%20*%204%20+%203]);drawPixel(x,%20y,%20Math.floor(color.r%20*%20ha),%20Math.floor(color.g%20*%20ha),%20Math.floor(color.b%20*%20ha),%201%20-%20ha);}}}}window.addEventListener(%22mousemove%22,%20main);