Cartesian to polar coordinates

Question

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.

Answer 1

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)

Answer 2

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);