Take a look at the example here: .html

Take a look at console.log where I am using these two main functions:

    function distanceBetween2pts(x1, y1, x2, y2) {
        console.log("Particle: ("+x1+","+y1+") Mouse: ("+x2+","+y2+")");
        //  Pythagoras Theorem
        // PQ = sqrt( (x2-x1)^2 + (y2-y1)^2 )
        var x = (x2-x1);
        var y = (y2-y1);

        this.radius = Math.sqrt(x*x + y*y);
        this.x = x;
        this.y = y;
    }

    function polar2cartesian(R, theta) {
        this.x = R * Math.cos(theta);
        this.y= R * Math.sin(theta);
    }

Where when the mouse is above and to the right of the particle (center circle) such as :

The console log displays:

Particle: (300,250) Mouse: (326,223)
artan(-27 / 26) = angle: -46.08092418666069 - theta -0.8042638494191191

where it should be arctan(27/26) = angle : 46 : theta = 0.8. because even thouse the mouse is "above" the center, it's reading the y2-y1 as -27 because the coord system is based about 0,0 being top left.

The issue then is when both X and Y are negative making theta positive, when it should be pointing the opposite direction (outward from the center point). I know I could just do a 180 degree trick here but I want to understand what im doing wrong.

Take a look at the example here: http://www.brianhare.com/physics/so.html

Take a look at console.log where I am using these two main functions:

    function distanceBetween2pts(x1, y1, x2, y2) {
        console.log("Particle: ("+x1+","+y1+") Mouse: ("+x2+","+y2+")");
        //  Pythagoras Theorem
        // PQ = sqrt( (x2-x1)^2 + (y2-y1)^2 )
        var x = (x2-x1);
        var y = (y2-y1);

        this.radius = Math.sqrt(x*x + y*y);
        this.x = x;
        this.y = y;
    }

    function polar2cartesian(R, theta) {
        this.x = R * Math.cos(theta);
        this.y= R * Math.sin(theta);
    }

Where when the mouse is above and to the right of the particle (center circle) such as :

The console log displays:

Particle: (300,250) Mouse: (326,223)
artan(-27 / 26) = angle: -46.08092418666069 - theta -0.8042638494191191

where it should be arctan(27/26) = angle : 46 : theta = 0.8. because even thouse the mouse is "above" the center, it's reading the y2-y1 as -27 because the coord system is based about 0,0 being top left.

The issue then is when both X and Y are negative making theta positive, when it should be pointing the opposite direction (outward from the center point). I know I could just do a 180 degree trick here but I want to understand what im doing wrong.

• javascript
• math
• geometry
• cartesian
• polar-coordinates

• 4 Cause when both y and x are negative, dividing them results in a positive number (which is the tagent of the corresponding angle, and when an angles tangent is positive, the angle itself is positive. – user529758 Commented Jan 17, 2012 at 17:13
• There are many values you can pass to trig functions (sin, cos, tan) that will give the same value. Obvious ones for sin are 0,Pi,2*pi,3*pi, etc. They only give unique values in a certain range (eg for sin its -Pi/2 to +pi/2). This means that when doing inverse trig functions to get back to the original knowing the result of the trig function is no use unless you also know roughly what range it is in. The way you determine that is using the sign of the x and y to work out what quadrant it is first and thus whether you need to add, subtract or whatever to get the right angle. – Chris Commented Jan 17, 2012 at 17:31

2 Answers 2

In Javascript and many languages there is an atan2 function to tackle this problem. It is a function which takes 2 arguments (the x and y coordinates), so the system can add or subtract π to the result to produce the correct angle. Instead of calling

Math.atan(y/x)

you just call instead

Math.atan2(y, x)

Don't know how do you want to draw the line, but either of these will solve your problem.

 theta = Math.atan2(distance.y , distance.x);
 theta = Math.PI + Math.atan2(distance.y , distance.x);