Rotating a moving image with jquery

Question

I'm having some problems causing in image to rotate properly after it follows the cursor. I think that it is rotating based on it's original location but I am not sure.

Any chance to make it rotate a full 360 degrees regardless of its final location?

Code:

$(document).mousemove(function(e) {
  /*duration determines the speed of the animation (in this case, the speed to which prgm follows)*/
  $("#image").stop().animate({
    left: e.pageX,
    top: e.pageY
  }, {
    duration: 5000
  });
});


let box = document.querySelector(".box");
let boxBoundingRect = box.getBoundingClientRect();
let boxCenter = {
  x: boxBoundingRect.left + boxBoundingRect.width / 2,
  y: boxBoundingRect.top + boxBoundingRect.height / 2
};

document.addEventListener("mousemove", e => {
      let angle = Math.atan2(e.pageX - boxCenter.x, -(e.pageY - boxCenter.y) )*(180 / Math.PI);
        box.style.transform = `rotate(${angle}deg)`;
      })

.box {
  background-color: black;
  width: 30px;
  height: 30px;
  position: absolute;
  left: 200px;
  top: 200px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body>
  <div class="box" id="image"> </div>
</body>

If my answer helped you, be sure to mark it as the selected answer! — ThatBirdThatLearnedToCode, Jan 31 '22 at 22:49

score 2 · Accepted Answer · edited Jan 29 '22 at 18:26

A must-know about coding:

When coding, declaring a variable like the following works differently than you think it does.

var var1 = 2;
var var2 = var1;

Instead of var2 always being the value of var1, it just sets var2 to whatever var1 is at the moment.

Which means setting var1 to 3 will still keep var2 at 2.

Confused? Check this post to see what I mean! (To be honest, this confused me more)

How does this relate?

In the following line, you do the following:

let boxBoundingRect = box.getBoundingClientRect();
let boxCenter = {
  x: boxBoundingRect.left + boxBoundingRect.width / 2,
  y: boxBoundingRect.top + boxBoundingRect.height / 2
};

But when the position changes, those values don't change. Rather, they stay the same.

What do you do?

In this function:

document.addEventListener("mousemove", e => {
  let angle = Math.atan2(e.pageX - boxCenter.x, -(e.pageY - boxCenter.y)) * (180 / Math.PI);
  box.style.transform = `rotate(${angle}deg)`;
})

Recalculate the bounding box so it looks like the following:

document.addEventListener("mousemove", e => {
  boxBoundingRect = box.getBoundingClientRect();
  boxCenter = {
    x: boxBoundingRect.left + boxBoundingRect.width / 2,
    y: boxBoundingRect.top + boxBoundingRect.height / 2
  };
  let angle = Math.atan2(e.pageX - boxCenter.x, -(e.pageY - boxCenter.y)) * (180 / Math.PI);
  box.style.transform = `rotate(${angle}deg)`;
})

Snippet

$(document).mousemove(function(e) {
  /*duration determines the speed of the animation (in this case, the speed to which prgm follows)*/
  $("#image").stop().animate({
    left: e.pageX,
    top: e.pageY
  }, {
    duration: 5000
  });
});


let box = document.querySelector(".box");
let boxBoundingRect = box.getBoundingClientRect();
let boxCenter = {
  x: boxBoundingRect.left + boxBoundingRect.width / 2,
  y: boxBoundingRect.top + boxBoundingRect.height / 2
};

document.addEventListener("mousemove", e => {
  boxBoundingRect = box.getBoundingClientRect();
  boxCenter = {
    x: boxBoundingRect.left + boxBoundingRect.width / 2,
    y: boxBoundingRect.top + boxBoundingRect.height / 2
  };
  let angle = Math.atan2(e.pageX - boxCenter.x, -(e.pageY - boxCenter.y)) * (180 / Math.PI);
  box.style.transform = `rotate(${angle}deg)`;
})

.box {
  background-color: black;
  width: 30px;
  height: 30px;
  position: absolute;
  left: 200px;
  top: 200px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

<body>
  <div class="box" id="image"> </div>
</body>