Stop rotating images if mouse pointer is too close

Question

I have a image which rotates depending on where mouse pointer moves. What I'm trying to accomplish is this. If the pointer is too close, the images should stop moving all together.

Here is a image to make it a bit clearer: enter image description here

Here is the code for rotating:

$(window).on('mousemove', function (e) {

      //Current position
      var p1 = {
        x: player.offset().left,
        y: player.offset().top
      };     
      //Future position
      var p2 = {
        x: e.offsetX,
        y: e.offsetY
      };

      //Angle between them in degrees
      var angleDeg = Math.atan2(p2.y - p1.y, p2.x - p1.x) * 180 / Math.PI;
      angleDeg -= 90;
        //Animate the whole thing
         player.css('-webkit-transform', 'rotate(' + angleDeg + 'deg)');
    });

Heres is what I've tried so far, but didn't work out:

function tooClose(object1, object2){
    if (object1.x < object2.x && object1.x + object1.width  > object2.x &&
    object1.y < object2.y && object1.y + object1.height > object2.y) {
        return true;
    }
}

Full fiddle here

Thanks!

score 5 · Accepted Answer · answered Nov 26 '13 at 15:14

Here's the fixed jsFiddle

The main issue was that your second point was using e.offsetX and e.offsetY - these gave unexpected results when you were "close" to the image, or in other words you were ON the image, and you got the e.offsetX relative to the image not the screen. What you wanted is getting the absolute screen values each time.

Changing the lines:

var p2 = {
    x: e.offsetX,
    y: e.offsetY
  };

to this:

var p2 = {
    x: e.clientX,
    y: e.clientY
  };

Fixed that issue.

I also took the liberty to fix the offset rotation pivot. First of all the image is positioned dynamically - thus it's position changes, you are also using it's top left corner as the center. To fix those I put it in a container, and use the container's center as the pivot. (see jsFiddle).

And if you remove `-webkit-` this works in Chrome and Firefox ;) — core1024, Nov 26 '13 at 15:28
@core1024 -webkit- IS for chrome and safari. -moz- is for firefox :) — Nilzone-, Nov 26 '13 at 19:47

score 0 · Answer 2 · answered Nov 26 '13 at 15:14

You can use the Euclidean distance between the mouse position and the center of the image: http://en.wikipedia.org/wiki/Euclidean_distance

Once you get the distance, when that is less than a given threshold, do the function you need (I think 'stop' in your case).

score 0 · Answer 3 · edited May 23 '17 at 12:05

0

You could check if the image is being hovered.

// Declare the hover checking function...
function idIsHovered(id){
    return $("#" + id + ":hover").length > 0;
}

// Check if the picture is being hovered
if(!idIsHovered('player')){
    // If not: do your thing.
}

Here's a DEMO.

Note: the "check for hover" function comes from this answer

edited May 23 '17 at 12:05

Community

1
1

answered Nov 26 '13 at 15:22

Lave Loos

1,252
1
11
15

score 0 · Answer 4 · answered Nov 26 '13 at 15:30

Use this function:

function Distance( p1, p2 ){
    var x,y = 0;
    x = p2.x - p1.x;
    x = x * x;
    y = p2.y - p1.y;
    y = y * y;
    return Math.sqrt( x + y );
}

Fiddle

Still a bit wiggly when you are right over the car. Don't drink and drive and code!

Ahh, @MeLight fixed that allready. Designated driver!

Stop rotating images if mouse pointer is too close

4 Answers4