16
\$\begingroup\$

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?

\$\endgroup\$
5
  • \$\begingroup\$ Are you looking for the formula to get an angle between to points? \$\endgroup\$
    – William
    Commented Aug 6, 2012 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
    Commented Aug 6, 2012 at 15:26
  • \$\begingroup\$ I posted an answer showing how to do it. \$\endgroup\$
    – William
    Commented Aug 6, 2012 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\$
    – House
    Commented Aug 6, 2012 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
    Commented Aug 7, 2012 at 2:08

3 Answers 3

26
\$\begingroup\$

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

\$\endgroup\$
5
  • \$\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
    Commented Aug 6, 2012 at 15:47
  • \$\begingroup\$ Just translate by subtracting. See the edit. \$\endgroup\$
    – jcora
    Commented Aug 6, 2012 at 16:03
  • 3
    \$\begingroup\$ -1: The first parameter for atan2 is y \$\endgroup\$ Commented Aug 7, 2012 at 14:44
  • 2
    \$\begingroup\$ Thanks @LuisEstrada, I just corrected it. (Hopefully you'll make it a +1. :)) \$\endgroup\$
    – jcora
    Commented Aug 7, 2012 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\$ Commented Aug 16, 2016 at 13:15
8
\$\begingroup\$

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)
\$\endgroup\$
5
\$\begingroup\$
Point clickPoint;
float angle = Math.atan2(clickPoint.Y - CenterY, clickPoint.X - CenterX);

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

\$\endgroup\$

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .