javascript:varstyle=document.createElement("style");document.body.appendChild(style);varcanvas=document.createElement("canvas");canvas.id="canvas";document.body.appendChild(canvas);varcontext=canvas.getContext("2d");functionoutlineBounds(){ context.clearRect(0,0,window.innerWidth,window.innerHeight); context.beginPath(); varbounds=Array.from(document.querySelectorAll("*")).map(function(e){ returne.getBoundingClientRect(); }); varwithinBounds=bounds.filter(function(e){ varviewVertical=window.scrollY<e.bottom||e.top<window.scrollY+window.innerHeight; varviewHorizontal=window.scrollX<e.right||e.left<window.scrollX+window.innerWidth; returnviewVertical&&viewHorizontal; }); withinBounds.forEach(function(e){ context.rect( e.left, e.top, e.right-e.left, e.bottom-e.top ); }); context.stroke();}functionfillBounds(){ context.clearRect(0,0,window.innerWidth,window.innerHeight); context.fillStyle="#00000011"; varbounds=Array.from(document.querySelectorAll("*")).map(function(e){ returne.getBoundingClientRect(); }); varwithinBounds=bounds.filter(function(e){ varviewVertical=window.scrollY<e.bottom||e.top<window.scrollY+window.innerHeight; varviewHorizontal=window.scrollX<e.right||e.left<window.scrollX+window.innerWidth; returnviewVertical&&viewHorizontal; }); withinBounds.forEach(function(e){ context.fillRect( e.left, e.top, e.right-e.left, e.bottom-e.top ); });}functionresizeCanvas(){ 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);varpixelSize=8;varhalfPixel=Math.floor(pixelSize/2);functiondrawPixel(x,y,r,g,b,a){ context.fillStyle="rgba("+[r,g,b,a].join(",")+")"; context.fillRect(x-halfPixel,y-halfPixel,pixelSize,pixelSize);}functiondistanceSquared(a,b){ vardx=b.x-a.x; vardy=b.y-a.y; returndx*dx+dy*dy;}functionmain(mouse){ fillBounds(); vardata=context.getImageData(0,0,context.canvas.width,context.canvas.height).data; context.clearRect(0,0,context.canvas.width,context.canvas.height); for(varx=0;x<context.canvas.width;x+=pixelSize){ for(vary=0;y<context.canvas.height;y+=pixelSize){ varpixel={"x":x,"y":y}; varintensityMouse=1/distanceSquared(pixel,mouse); varcolorMouse={"r":0,"g":255,"b":255}; varcopy={"x":window.innerWidth-mouse.x,"y":window.innerHeight-mouse.y}; varintensityCopy=1/distanceSquared(pixel,copy); varcolorCopy={"r":255,"g":0,"b":0}; varintensity=intensityMouse+intensityCopy; varcolor={ "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){ varha=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);
