Question

Im trying to get into some basic JavaFX game development and I’m getting confused with some circle maths.

I have a circle at (x:250, y:250) with a radius of 50.

My objective is to make a smaller circle to be placed on the circumference of the above circle based on the position of the mouse.

Where Im getting confused is with the coordinate space and the Trig behind it all.

My issues come from the fact that the X/Y space on the screen is not centered at 0,0. But the top left of the screen is 0,0 and the bottom right is 500,500.

My calculations are:

var xpos:Number = mouseEvent.getX(); var ypos:Number = mouseEvent.getY();  var center_pos_x:Number = 250; var center_pos_y:Number = 250;  var length = ypos - center_pos_y; var height = xpos - center_pos_x;  var angle_deg = Math.toDegrees(Math.atan(height / length)); var angle_rad = Math.toRadians(angle_deg);  var radius = 50;  moving_circ_xpos = (radius * Math.cos(angle_rad)) + center_pos_x; moving_circ_ypos = (radius * Math.sin(angle_rad)) + center_pos_y; 

I made the app print out the angle (angle_deg) that I have calculated when I move the mouse and my output is below:

When the mouse is (in degrees moving anti-clockwise):

• directly above the circle and horizontally inline with the center, the angle is -0
• to the left and vertically centered, the angle is -90
• directly below the circle and horizontally inline with the center, the angle is 0
• to the right and vertically centered, the angle is 90

So, what can I do to make it 0, 90, 180, 270??

I know it must be something small, but I just cant think of what it is…

Thanks for any help (and no, this is not an assignment)

Answer 1

atan(height/length) is not enough to get the angle. You need to compensate for each quadrant, as well as the possibility of ‘division-by-zero’. Most programming language libraries supply a method called atan2 which take two arguments; y and x. This method does this calculation for you.

More information on Wikipedia: atan2