Question

Im using the formula to calculate the distance between two points in order to determine how much to rotate an image when I move my mouse over it.

1. click, I capture the point where I clicked
2. mouse moves dragging, I record the location of the point where my mouse has moved to
3. I calculate the distance between origin and end
4. I rotate the image using this value which starts at 1.

So lets say I click on the center of the image, I start dragging my mouse to the right, my image rotates perfectly, then without letting go the click i drag back the mouse on my image, my image is now counter rotating, which is perfect. Now once the mouse reaches that center(where I clicked initially) it forces my image rotate in the oposite directions because the distance reached its limit(0) and the new values are all positive even though im moving to the left.

I understand that the distance between two points is supposed to be positive but I need something to make negative once it comes back to (0) so that I can rotate my image properly.

Answer 1

http://jsfiddle.net/wRexz/4/

var dragging = false, startpoint, endpoint, midpoint = $("#center").position();
midpoint = {x:midpoint.left - 2, y:midpoint.top-2};

$("#stage").mousedown(function(e){
    dragging = true;
    startpoint = {x:e.offsetX, y:e.offsetY};
});

$("#stage").mouseup(function(e){
    dragging = false;
});

$("#stage").mousemove(function(e){
    if (dragging){
        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};
    }
});​

This will find the relative angle of rotation between two points. It updates each time the mousemove event is fired, so it will never be more than 180 degrees in one go (except when dragging around the midpoint). Math.atan2 simplifies the logic compared to Math.atan as the latter isn’t meant for a coordinate system.