I'm working on a dial that rotates around a circle.

before click

This dial should lets you mousemove anywhere in a circle to adjust the position of the dial to a point on the circle with the same angle as the click. For example, from the dial above if you clicked the spot shown in pink below I'd move the dial above that point but on the circle.

after click (pink)

I know how to get the position of a point on a circle given a radius and an angle (in radians). That's this formula:

x = Cos(angle) * radius + CenterX;
y = Sin(angle) * radius + CenterY;

However, I am looking to do somewhat of the opposite -- I've got a click point, which I want to turn into a point on a circle (where the control knob goes). I'm trying to use this point (and a given radius) to figure out the angle in radians for it, so that I can place the control knob on the circle at the same angle.

Is there a handy formula I can use to accomplish this?

  • \$\begingroup\$ Are you looking for the formula to get an angle between to points? \$\endgroup\$ – William Mariager Aug 6 '12 at 15:24
  • \$\begingroup\$ Can you get an angle between two points? I can calculate slope but my guess was that I need a third point to create a triangle and use an inverse trigonomic function to solve this. \$\endgroup\$ – editor Aug 6 '12 at 15:26
  • \$\begingroup\$ I posted an answer showing how to do it. \$\endgroup\$ – William Mariager Aug 6 '12 at 15:34
  • 3
    \$\begingroup\$ What you really have here is the angle between two vectors. They both originate from the center of the circle and have the same magnitude (radius of the circle). \$\endgroup\$ – MichaelHouse Aug 6 '12 at 15:51
  • \$\begingroup\$ Here's the mathematics behind it: inverse trig functions. atan is short for arctan, and atan2 is just a function that accepts individual arguments, and does the division for you. \$\endgroup\$ – voithos Aug 7 '12 at 2:08

Check out the atan2 function.

It gives you the angle between (0, 0) and (x, y), x and y being the function arguments.

Edit: if the center of the circle isn't (0, 0), no matter, just do this: atan2(y - cy, x - cx).

  • \$\begingroup\$ Does it matter if the center of my circle is not at (0,0)? I'm guessing I just offset the arguments to atan2 as shown by @Luis below? \$\endgroup\$ – editor Aug 6 '12 at 15:47
  • \$\begingroup\$ Just translate by subtracting. See the edit. \$\endgroup\$ – jcora Aug 6 '12 at 16:03
  • 3
    \$\begingroup\$ -1: The first parameter for atan2 is y \$\endgroup\$ – Luis Estrada Aug 7 '12 at 14:44
  • 2
    \$\begingroup\$ Thanks @LuisEstrada, I just corrected it. (Hopefully you'll make it a +1. :)) \$\endgroup\$ – jcora Aug 7 '12 at 14:46
  • \$\begingroup\$ +Luis Estrada Sorry to nnecro-bump this, but I had to thank you. I've been trying to debug my program for a day and a half now. It turns out, the arguments to atan2 were backward! \$\endgroup\$ – Carcigenicate Aug 16 '16 at 13:15

You need the center of the knob and the point of the cursor along with the atan2 function. You then use it like this:

 angle = atan2(mouseY - knobCenterY, mouseX - knobCenterX)
Point clickPoint;
float angle = Math.atan2(clickPoint.Y - CenterY, clickPoint.X - CenterX);

An ok reference: http://www.mathsisfun.com/polar-cartesian-coordinates.html


Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.