how to check if mouse pointer is moving clockwise or anticlockwise in javascript

Question

I want to check if mouse is moving clockwise or counterclockwise on html5 canvas with javascript but not getting how to proceed.

UPDATE
What I did is I took 3 XY coordinates and calculated angle between 1st and last point as suggested on this and this post.

var resultX = p2x - p1x;
var resultY = p2y - p1y;
var angle = Math.atan2(resultY, resultX) * 180 / Math.PI;

but what happens is that when I move mouse clockwise result comes positive till mouse moves south-east but when mouse goes south-west while going clockwise the angle becomes negative which should not happen as mouse is still moving clockwise.

Any suggestion please.

I'd convert the position of the pointer into polar coordinates and just check if the angle is constantly increasing or decreasing. — Blender, Jan 25 '13 at 10:28
@Blender, to do that you need to find the center of the rotation, if your base point for converting to polar is outside the circle, it will not work. — istepaniuk, Jan 25 '13 at 12:12
This would only work if upper half of the circle is y > 0 and lower half of the circle is y < 0 — sumit kang, Oct 09 '15 at 05:05

score 4 · Answer 1 · answered Jan 25 '13 at 10:31

I'm assuming you're aware of the mousemove event, and getting the X/Y position of the mouse within the browser window?

The approach I would take would be to store the last 5-6 coordinates of the mouse in an array, then perform a circle fit algorithm to find the point which is being rotated around.

From this, the angle from the first point, to the centre of the circle, to the last point can be found and the direction of rotation is based on whether it is positive or negative.

score 4 · Answer 2 · edited Apr 13 '17 at 12:18

First, you'll probably want a function that gives you the angle between two vectors. Here's how to write it:

The magnitude of the cross product of two vectors is equal to the product of the magnitudes of the vectors times the sine of the angle between them.

Let A = vector from P1 --> P2; Let B = vector from P2 --> P3; Let θ be the angle

|A × B| = |A| |B| sin(θ) and therefore sin(θ) = ( |A × B| ) / (|A| |B| )

the magnitude of the cross product of two 2D vectors is calculated like this: |A × B| = Ax By - Bx Ay

And the magnitude of the dot product of two vectors is equal to the product of the magnitudes of the vectors times the cosine of the angle between them. A·B = |A| |B| cos(θ) and therefore cos(θ) = (A·B) / ( |A| |B| )

the dot product is calculated like this: A·B = Ax Bx + Ay By

|A| = sqrt( Ax Ax + Ay Ay ) |B| = sqrt( Bx Bx + By By )

that gives you sin(θ) and cos(θ).

You can call atan2 to get θ from sin(θ) and cos(θ). θ = atan2( sin(θ), cos(θ) )

In code now:

/// <summary>
/// Calculates the angle between two 2-D vectors.
/// </summary>
/// <returns>angle in radians</returns>
static double AngleBetweenVectors( double Ax, double Ay, double Bx, double By )
{
    double magA = Math.Sqrt( Ax * Ax + Ay * Ay );
    double magB = Math.Sqrt( Bx * Bx + By * By );
    double magAmagB = magA * magB;
    if( magA * magB == 0 ) throw new Exception( "Vectors must be non-zero length" );
    double sinTheta = (Ax * By - Bx * Ay) / magAmagB;
    double cosTheta = (Ax * Bx + Ay * By) / magAmagB;
    double theta = Math.Atan2( sinTheta, cosTheta );
    return theta;
}

Result is in radians. Multiply by 180/Math.PI to get degrees. If you find that clockwise and counterclockwise are reversed because of your coordinate system, just take the negative of your result.

The arc drawing function uses the x-axis as its reference point, so you need to find the angle between your vector and the x axis (1,0). You have to provide start and end angles. A little bit of conditional checking to verify that the arc is going in the direction you want will likely be necessary, and you can adjust the angles such that thetaStart > thetaEnd or thetaStart < thetaEnd as necessary.

You also gonna wanna check this link

how to check if mouse pointer is moving clockwise or anticlockwise in javascript

2 Answers2