9

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 : enter image description here

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.

Simon Sarris
  • 62,212
  • 13
  • 141
  • 171
ParoX
  • 5,685
  • 23
  • 81
  • 152
  • 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. –  Jan 17 '12 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 Jan 17 '12 at 17:31

2 Answers2

13

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)
kennytm
  • 510,854
  • 105
  • 1,084
  • 1,005
  • 1
    Hm, ok. When I googled arctan for javascript it told me the functions were identical, I opted for atan because it didnt leave the read wondering what atan2 is... this solved the issue though. – ParoX Jan 17 '12 at 17:33
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);
Diode
  • 24,570
  • 8
  • 40
  • 51