I'm using the following functions to track mouse movement and rotate an object:

function getAngle(dx, dy) {
    var angle
    if (dx != 0) {
        var radians = Math.atan(dy / dx) + (dx < 0 ? Math.PI : 0)
        angle = radiansToDegrees(radians);
        if (angle < 0) angle += 360;
    } else {
        angle = dy > 0 ? 90 : 270;
    }
    return angle;
}

function getAngleBetweenPoints(p1, p2) {
    var dx = p1.x - p2.x
    var dy = p1.y - p2.y
    return getAngle(dx, dy)
}

$(document).mousemove(function (e) {
    if (selectionBounds) {
        var midpoint = new pe.Classes.Point(selectionBounds.Left + (selectionBounds.Width / 2), selectionBounds.Top + (selectionBounds.Height / 2));
        var mousepoint = new pe.Classes.Point(e.pageX, e.pageY);
        var angle = getAngleBetweenPoints(midpoint, mousepoint);
        if (lastAngle) {
            var diff = angle - lastAngle;
            rotate(degreesToRadians(diff));
        }
        lastAngle = angle;
    }
});

This works well, as long as I move the mouse slowly, and as long as the mouse doesn't get too close to the origin (midpoint). Moving too quickly causes additional spin rotations, and ing close to the origin causes unexpected changes of direction.

How can I fix this code? I really just need to know which direction the mouse is moving in (clockwise or anti-clockwise), as I can get an idea of the speed just from the change in mousepoint and then update the rotation based on that.

There are literally dozens of SO threads on topics related to this (How to get the direction (angle) of rectangle after rotating it from a pivot point, How to get cardinal mouse direction from mouse coordinates, Moving a rotated element in the direction of the rotation in JavaScript) - but I haven't been able to find anything that can answer this question, except one ment referring to this requiring the cross product, which I didn't fully understand.

I'm using the following functions to track mouse movement and rotate an object:

function getAngle(dx, dy) {
    var angle
    if (dx != 0) {
        var radians = Math.atan(dy / dx) + (dx < 0 ? Math.PI : 0)
        angle = radiansToDegrees(radians);
        if (angle < 0) angle += 360;
    } else {
        angle = dy > 0 ? 90 : 270;
    }
    return angle;
}

function getAngleBetweenPoints(p1, p2) {
    var dx = p1.x - p2.x
    var dy = p1.y - p2.y
    return getAngle(dx, dy)
}

$(document).mousemove(function (e) {
    if (selectionBounds) {
        var midpoint = new pe.Classes.Point(selectionBounds.Left + (selectionBounds.Width / 2), selectionBounds.Top + (selectionBounds.Height / 2));
        var mousepoint = new pe.Classes.Point(e.pageX, e.pageY);
        var angle = getAngleBetweenPoints(midpoint, mousepoint);
        if (lastAngle) {
            var diff = angle - lastAngle;
            rotate(degreesToRadians(diff));
        }
        lastAngle = angle;
    }
});

This works well, as long as I move the mouse slowly, and as long as the mouse doesn't get too close to the origin (midpoint). Moving too quickly causes additional spin rotations, and ing close to the origin causes unexpected changes of direction.

How can I fix this code? I really just need to know which direction the mouse is moving in (clockwise or anti-clockwise), as I can get an idea of the speed just from the change in mousepoint and then update the rotation based on that.

There are literally dozens of SO threads on topics related to this (How to get the direction (angle) of rectangle after rotating it from a pivot point, How to get cardinal mouse direction from mouse coordinates, Moving a rotated element in the direction of the rotation in JavaScript) - but I haven't been able to find anything that can answer this question, except one ment referring to this requiring the cross product, which I didn't fully understand.

• javascript
• rotation
• trigonometry

• You can use Math.atan2(dy, dx) to get the angle for dy / dx directly mapped into the right quadrant. – Alnitak Commented Sep 27, 2012 at 18:09
• Can you explain that a bit more? How should it be different from what I've got already: var radians = Math.atan(dy / dx) + (dx < 0 ? Math.PI : 0) – Jude Fisher Commented Sep 27, 2012 at 18:11
• I haven't checked yours for accuracy, it's simply that Math.atan2 is designed specifically for that purpose. – Alnitak Commented Sep 27, 2012 at 18:15
• Actually I think your implementation is incorrect. See developer.mozilla/en-US/docs/JavaScript/Reference/… – Alnitak Commented Sep 27, 2012 at 18:19
• Why are you rotating by the difference instead of setting the rotation angle? – Shmiddty Commented Sep 27, 2012 at 19:33

1 Answer 1

http://jsfiddle/wRexz/3/ (click and drag to rotate the rectangle)

    var angle = 0, sp = startpoint, mp = midpoint;
    var p = {x:e.offsetX, y:e.offsetY};
    var sAngle = Math.atan2((sp.y-mp.y),(sp.x - mp.x));
    var pAngle = Math.atan2((p.y-mp.y),(p.x - mp.x));        

    angle = (pAngle - sAngle) * 180/Math.PI;

    $("#display").text(angle);
    $('#rotateme').css({ rotate: '+=' + angle });

    startpoint = {x:p.x, y:p.y};

The concept here is basic trig. You find the angle from 0 of the "start point" and do the same for the "end point" or "current point". Subtract the first from the second, and that is your "delta angle".

You will still get erratic behavior around the midpoint, due to the nature of how rapidly the angles can change. One solution to this is stopping rotation when within a certain distance of the midpoint.