Is it possible to create a mouse-following effect with lighting using Javascript

Question

Is it possible to create a mouse-following effect with lighting using Javascript

Recently, I've been honing my Javascript skills and decided to create a follow-mouse function. After successfully implementing it, I started brainstorming a new concept that I'm unsure is achievable.

Is there a way to develop an "orb of vision" that tracks the mouse's movement, illuminating everything within its radius? Imagine using a torch to illuminate a specific area where your cursor hovers.

https://i.stack.imgur.com/qpzXk.png

NOTE: I'm not seeking someone to write the code for me. Instead, I'm looking for insights to guide my learning process. I'm eager to tackle this project on my own but could use some pointers!

function trackMouseMovement(e) {
    var x = document.getElementById('x_show');
    var y = document.getElementById('y_show');

    x.innerHTML = e.clientX;
    y.innerHTML = e.clientY;

    document.getElementById("followDiv").style.left = event.clientX - 15 + "px";
    document.getElementById("followDiv").style.top = event.clientY - 15 + "px";
}

document.onmousemove = trackMouseMovement;

#followDiv {
    background-color: lightblue;
    height: 30px;
    width: 30px;
    position: absolute;
}

<p id="x_show">0</p>
<p id="y_show">0</p>
<div id="followDiv"></div>

javascript html css

Answer 1

Answer №1

One alternative method without using canvas is:

Change the page background color to black
Apply 'border-radius: 50%;' to round the borders of #followDiv
Set an image as the background of this div
Adjust the background position to move in the opposite direction of the mouse

Edit:

Add a finishing touch by softening the edges with box-shadow

function trackMouse(e) {
  var x = document.getElementById('x_show');
  var y = document.getElementById('y_show');

  x.innerHTML = e.clientX;
  y.innerHTML = e.clientY;

  var followDiv = document.getElementById("followDiv");
  followDiv.style.left = event.clientX - 60 + "px";
  followDiv.style.top = event.clientY - 60 + "px";
  followDiv.style.backgroundPositionX = (-event.clientX) + 'px';
  followDiv.style.backgroundPositionY = (-event.clientY) + 'px';
}

document.onmousemove = trackMouse;

body {
  background: black;
}

#followDiv {
  background-color: lightblue;
  height: 120px;
  width: 120px;
  position: absolute;
  border-radius: 50%;
  box-shadow: 0 0 12px 12px black inset, 
               /* workaround for a soft edge issue */ 
               0 0 2px 2px black inset, 0 0 2px 2px black inset, 0 0 2px 2px black inset;
  background: url(https://dl.dropboxusercontent.com/u/139992952/multple/annotateMe.jpg) no-repeat;
}

<p id="x_show">0</p>
<p id="y_show">0</p>
<div id="followDiv"></div>

Answer 2

One alternative method without using canvas is:

Change the page background color to black
Apply 'border-radius: 50%;' to round the borders of #followDiv
Set an image as the background of this div
Adjust the background position to move in the opposite direction of the mouse

Edit:

Add a finishing touch by softening the edges with box-shadow

function trackMouse(e) {
  var x = document.getElementById('x_show');
  var y = document.getElementById('y_show');

  x.innerHTML = e.clientX;
  y.innerHTML = e.clientY;

  var followDiv = document.getElementById("followDiv");
  followDiv.style.left = event.clientX - 60 + "px";
  followDiv.style.top = event.clientY - 60 + "px";
  followDiv.style.backgroundPositionX = (-event.clientX) + 'px';
  followDiv.style.backgroundPositionY = (-event.clientY) + 'px';
}

document.onmousemove = trackMouse;

body {
  background: black;
}

#followDiv {
  background-color: lightblue;
  height: 120px;
  width: 120px;
  position: absolute;
  border-radius: 50%;
  box-shadow: 0 0 12px 12px black inset, 
               /* workaround for a soft edge issue */ 
               0 0 2px 2px black inset, 0 0 2px 2px black inset, 0 0 2px 2px black inset;
  background: url(https://dl.dropboxusercontent.com/u/139992952/multple/annotateMe.jpg) no-repeat;
}

<p id="x_show">0</p>
<p id="y_show">0</p>
<div id="followDiv"></div>

Answer 3

Answer №2

Hey @Bulent Vural, I came up with a solution for this issue. It seems like resizing the circle to fit the screen is causing it to appear larger than intended.

One workaround I found was to add additional instances of "black" within the code, but this resulted in a less visually appealing outcome.

    function trackMouseMovement(e)
    {
        var x = document.getElementById('x_show');
        var y = document.getElementById('y_show');

        x.innerHTML = e.clientX;
        y.innerHTML = e.clientY;

        document.getElementById("followDiv").style.left = event.clientX-2000+"px";
        document.getElementById("followDiv").style.top = event.clientY-2000+"px";

    }
    document.onmousemove = trackMouseMovement;
</script>

 html, body {margin: 0; height: 100%; overflow: hidden}
        #followDiv {
            /* background-color: lightblue; */
            height: 4000px;
            width: 4000px;
            position: absolute;

            background: -webkit-radial-gradient(circle, rgba(248, 255, 252, 0),black);
            background: -o-radial-gradient(circle, rgba(248, 255, 252, 0),black);
            background: -moz-radial-gradient(circle, rgba(248, 255, 252, 0),black);
            background: radial-gradient(circle, rgba(248, 255, 252, 0),black);
        }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8>
    <title></title>
  
</head>
<body>
  <p id="x_show">0</p>
  <p id="y_show">0</p>
  <div id="followDiv"></div>
</body>

Answer 4

Hey @Bulent Vural, I came up with a solution for this issue. It seems like resizing the circle to fit the screen is causing it to appear larger than intended.

One workaround I found was to add additional instances of "black" within the code, but this resulted in a less visually appealing outcome.

    function trackMouseMovement(e)
    {
        var x = document.getElementById('x_show');
        var y = document.getElementById('y_show');

        x.innerHTML = e.clientX;
        y.innerHTML = e.clientY;

        document.getElementById("followDiv").style.left = event.clientX-2000+"px";
        document.getElementById("followDiv").style.top = event.clientY-2000+"px";

    }
    document.onmousemove = trackMouseMovement;
</script>

 html, body {margin: 0; height: 100%; overflow: hidden}
        #followDiv {
            /* background-color: lightblue; */
            height: 4000px;
            width: 4000px;
            position: absolute;

            background: -webkit-radial-gradient(circle, rgba(248, 255, 252, 0),black);
            background: -o-radial-gradient(circle, rgba(248, 255, 252, 0),black);
            background: -moz-radial-gradient(circle, rgba(248, 255, 252, 0),black);
            background: radial-gradient(circle, rgba(248, 255, 252, 0),black);
        }

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8>
    <title></title>
  
</head>
<body>
  <p id="x_show">0</p>
  <p id="y_show">0</p>
  <div id="followDiv"></div>
</body>

Answer 5

Answer №3

Here is a solution that may assist you in achieving your desired outcome.

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;
function reOffset(){
  var BB=canvas.getBoundingClientRect();
  offsetX=BB.left;
  offsetY=BB.top;        
}
var offsetX,offsetY;
reOffset();
window.onscroll=function(e){ reOffset(); }
window.onresize=function(e){ reOffset(); }

$("#canvas").mousemove(function(e){handleMouseMove(e);});

var radius=30;

var img=new Image();
img.onload=function(){
  draw(150,150,30);
}
img.src='https://dl.dropboxusercontent.com/u/139992952/multple/annotateMe.jpg'


function draw(cx,cy,radius){
  ctx.save();
  ctx.clearRect(0,0,cw,ch);
  var radialGradient = ctx.createRadialGradient(cx, cy, 1, cx, cy, radius);
  radialGradient.addColorStop(0, 'rgba(0,0,0,1)');
  radialGradient.addColorStop(.65, 'rgba(0,0,0,1)');
  radialGradient.addColorStop(1, 'rgba(0,0,0,0)');
  ctx.beginPath();
  ctx.arc(cx,cy,radius,0,Math.PI*2);
  ctx.fillStyle=radialGradient;
  ctx.fill();
  ctx.globalCompositeOperation='source-atop';
  ctx.drawImage(img,0,0);
  ctx.globalCompositeOperation='destination-over';
  ctx.fillStyle='black';
  ctx.fillRect(0,0,cw,ch);
  ctx.restore();
}


function handleMouseMove(e){

  // tell the browser we're handling this event
  e.preventDefault();
  e.stopPropagation();

  mouseX=parseInt(e.clientX-offsetX);
  mouseY=parseInt(e.clientY-offsetY);

  draw(mouseX,mouseY,30);

}

body{ background-color: ivory; }
#canvas{border:1px solid red; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h4>Move mouse to reveal image with "flashlight"</h4>
<canvas id="canvas" width=300 height=300></canvas>

Answer 6

Here is a solution that may assist you in achieving your desired outcome.

var canvas=document.getElementById("canvas");
var ctx=canvas.getContext("2d");
var cw=canvas.width;
var ch=canvas.height;
function reOffset(){
  var BB=canvas.getBoundingClientRect();
  offsetX=BB.left;
  offsetY=BB.top;        
}
var offsetX,offsetY;
reOffset();
window.onscroll=function(e){ reOffset(); }
window.onresize=function(e){ reOffset(); }

$("#canvas").mousemove(function(e){handleMouseMove(e);});

var radius=30;

var img=new Image();
img.onload=function(){
  draw(150,150,30);
}
img.src='https://dl.dropboxusercontent.com/u/139992952/multple/annotateMe.jpg'


function draw(cx,cy,radius){
  ctx.save();
  ctx.clearRect(0,0,cw,ch);
  var radialGradient = ctx.createRadialGradient(cx, cy, 1, cx, cy, radius);
  radialGradient.addColorStop(0, 'rgba(0,0,0,1)');
  radialGradient.addColorStop(.65, 'rgba(0,0,0,1)');
  radialGradient.addColorStop(1, 'rgba(0,0,0,0)');
  ctx.beginPath();
  ctx.arc(cx,cy,radius,0,Math.PI*2);
  ctx.fillStyle=radialGradient;
  ctx.fill();
  ctx.globalCompositeOperation='source-atop';
  ctx.drawImage(img,0,0);
  ctx.globalCompositeOperation='destination-over';
  ctx.fillStyle='black';
  ctx.fillRect(0,0,cw,ch);
  ctx.restore();
}


function handleMouseMove(e){

  // tell the browser we're handling this event
  e.preventDefault();
  e.stopPropagation();

  mouseX=parseInt(e.clientX-offsetX);
  mouseY=parseInt(e.clientY-offsetY);

  draw(mouseX,mouseY,30);

}

body{ background-color: ivory; }
#canvas{border:1px solid red; }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<h4>Move mouse to reveal image with "flashlight"</h4>
<canvas id="canvas" width=300 height=300></canvas>

Is it possible to create a mouse-following effect with lighting using Javascript

Answer №1

Answer №2

Answer №3

Similar questions

Firefox throwing XML parsing error when SVG is encoded as data URI

Choose from a range of knockout fetching options for the select feature and choose one

updateStatusCallback function is not defined in the Facebook example using jQuery

aligning adaptable grid on the screen

What is the best way to pass a parameter with a slash in a GET request using jQuery's .ajax() function?

Tips for updating the color scheme in your CSS file by making hue adjustments to all colors

Submitting a JSPX form to interact with PHP backend

Creating a table from a PHP associative array

Blending ThreeJS graphics with typical HTML/CSS pages

Guide on transferring PHP database information to JQuery and then adding it to a Table

Safari browser not supporting CSS @property --rotate functionality

What is the proper way to reference a property's value within another property of the same JavaScript Object?

Incorrect display of French characters in emails

Typescript: Shifting an image to the left and then returning it to the right

You need a function property for the child component to be updated

Border becomes dashed when dragging and dropping

Searching for values in an array using the $elemMatch operator in MongoDB 2.6 without the need for the $eq operator

Can you guide me on how to establish a cookie within a selenium webdriver javascript script?

unable to obtain desired font in the final result

Steps for refreshing Google reCAPTCHA on an AJAX-enabled webpage