How to get angle for 360 degrees for a line

Author

354

October 30, 2015 07:33 AM

I have a sprite that goes around a circle which is transformed on the Y axis by 30%.

The problem i have then is trying to work out the angle from a point from the center of the circle. For some reason, it always gives me a negative value between -73 and -116 degrees.. I can't work out why this is, whether its a maths error or infact as it is meant to be due to the way the circle is shaped.

This is my function which calculates the angle:



    for (var i = 0; i < obj.length; i++) {
        var delta = Date.now() - obj[i].start;
        var angle = obj[i].rotSpeed * delta;


        obj[i].x = obj[i].radius * Math.cos(angle);
        obj[i].y = obj[i].radius * scaleFactor * Math.sin(angle);


          // get the angle from center in degrees
        var vectorX = obj[i].x - obj[i].originX;
        var vectorY = obj[i].y - obj[i].originY;
        var angle = Math.atan2(vectorY, vectorX) * 180 / Math.PI;

    }

I have also got the animation running here where it will display the degrees during it's rotation: http://jsfiddle.net/odx7rtou/

I am wondering if some one can explain why the degrees do not return in a full 360 amount such as from -180 to +180. And how can i correct for this?

My main goal here is to get which of the four quadrants of the circle the object is currently in as this will effect the order in which I draw things for when I want it go behind or in front of other objects.

Hope you can help.

alvaro

21,610

October 30, 2015 08:48 AM

You have two `var angle' in the same scope. I'm not sure if that's allowed in whatever language this is but, more worrisomely, the first one is in radians and the second one is in degrees.

Friends don't let friends use degrees. You are only giving yourself opportunities to mess up.

EDIT: Oh, and this:

        obj[i].x = obj[i].radius * Math.cos(angle);
        obj[i].y = obj[i].radius * scaleFactor * Math.sin(angle);

Should probably be this:


        obj[i].x = obj[i].originX + obj[i].radius * Math.cos(angle);
        obj[i].y = obj[i].originY + obj[i].radius * scaleFactor * Math.sin(angle);

CelticSir

Author

354

October 30, 2015 08:56 AM

I reuse the variable as it's not needed at the end of the loop. So it's fine in javascript to reassign.

How would I convert to use radians, also why is radians preferred?

alvaro

21,610

October 30, 2015 09:17 AM

I reuse the variable as it's not needed at the end of the loop. So it's fine in javascript to reassign.

I still wouldn't do it. Your code will be better (easier to read, fewer bugs) if you initialize variables where they are defined and if the meaning of the variable never changes.

How would I convert to use radians, also why is radians preferred?

All trigonometric functions in most languages use radians naturally, so as long as you never do something like `* 180 / Math.PI', you'll be using radians.

CelticSir

Author

354

October 30, 2015 09:34 AM

Ah ok, why do they favor radians?

alvaro

21,610

October 30, 2015 09:57 AM

Ah ok, why do they favor radians?

Radians are the natural unit to measure angles. If you insist of using some other units (say, degrees), many formulas will have to be adjusted with conversion factors.

For instance, the derivative of sin(x) is cos(x) if you are using radians, but it's cos(x)*pi/180 if you are using degrees. Another example: For very small angles, sin(x) is approximately x if you are using radians, but it's approximately x*pi/180 if you are using degrees.

MarkS_

3,509

October 30, 2015 04:41 PM

This will work:

        var vectorX = obj[i].x;
        var vectorY = obj[i].y;
        var angle = Math.atan2(vectorY, vectorX) * 180 / Math.PI;
        if(angle < 0.0)
            angle = angle + 360.0;

Since originX and originY are not used in the calculation of the object's position, including them in the calculation of the angle is throwing off the calculation. With the above change, the object will start at 0 degrees and reach 180 degrees at the opposite side and continue to 360 degrees at the start.

Friends don't let friends use degrees. You are only giving yourself opportunities to mess up.

I would agree, but degrees are still a lot easier for people to grasp than radians. I blame this on degrees being taught in school over radians until late in the student's school career, but I digress...

ferrous

6,164

October 30, 2015 04:56 PM

Personally, if I ever have variables that contain degrees, and others that contain radians, then I name the variable something like 'angleRadians' or 'angleDegrees'. And I do the same things with functions too. ( Object.Rotate(Vector3.axis, float angleRadians).

MarkS_

3,509

October 30, 2015 05:07 PM

It looks like he is only using degrees for display purposes. He uses radians for everything else.

alvaro

21,610

October 30, 2015 05:25 PM

Friends don't let friends use degrees. You are only giving yourself opportunities to mess up.

I would agree, but degrees are still a lot easier for people to grasp than radians. I blame this on degrees being taught in school over radians until late in the student's school career, but I digress...

This is true. I am just encouraging the unlearning of bad habits from school, like using degrees, using percentages and counting from 1.

It looks like he is only using degrees for display purposes. He uses radians for everything else.

Oh, right. That's fine, then. It's OK to convert to whatever format the user is going to understand better just for the purpose of displaying the value.

How to get angle for 360 degrees for a line

This topic is closed to new replies.

Popular Topics

Recommended Tutorials

How to get angle for 360 degrees for a line

This topic is closed to new replies.

Popular Topics

Recommended Tutorials

Reticulating splines