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:
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;
}
}
Thanks!