Finding the radius of an ellipse based on its angle from major or minor axis

4
votes

I'm doing work with UE3 and am making my HUD. I've done it in canvas, and have a round button - The issue is that on screens that are not square, the button is an ellipse. Hence this leads to issues detecting if the mouse is "over" the button or not.

This is because the radius is not the same around the whole ellipse, as is the case with a circle.

My underline question this:

How can I work out the radius of an ellipse relative to a point (the mouse location), given I know:

  • Radius of both Major and Minor Axis
  • Angle from axis (both major and minor) of the point (mouse location)
2
algorithmgraphicsgeometry
You don't need to muck with angles. Just write down the ellipse formula x^2/a^2+y^2/b^2=1 and think a bit. – n. 1.8e9-where's-my-share m.
I don't have the ellipse formula - the point is if I can do it using the angles, I can do it dynamically, no matter the formula of the eclipse, which could change depending on the buttons size and screen size (among other things) – Gareth Jones
What do you mean "I don't have the ellipse formula"? You look it up in Wikipedia, and I have written it down for you just in case. – n. 1.8e9-where's-my-share m.
Ah sorry, that was me missing reading and thinking of the graph formula for the specific ellipse – Gareth Jones

2 Answers

5
votes

In the simple case where the ellipse is centered at the origin, and the major and minor axes are parallel to the x and y axis respectively, then the ellipse can be parameterized by the equations x = a cos(t) and y = b sin(t), where a and b are the major and minor axes, and t is the angle which varies from 0 to 2pi. So in this case, to answer your question, the radius at angle t is

r = sqrt( x^2 + y^2 ) = sqrt( a^2 cos^2(t) + b^2 sin^2(t) )

Now, this can be made more complicated in the following ways

(i) The ellipse is not centered at (0,0)

(ii) The major and minor axes are not parallel to the x and y axes, say because the major axis forms an angle t0 from the positive x axis.

(iii) a combination of (i) and (ii).

However, the solution above can also be applied to these cases with the right modifications. For (i), subtract the center from x and y in the equation above to obtain the radius from the center point. For (ii), the equation above will hold for variables x',y', where (x',y')^T = R(t0) (x,y)^T where R(t0) is the rotation matrix which orients the ellipse properly. So form the equation above for x' and y', then substitute the expressions for x and y by solving the matrix equation above.

4
votes

The axis-aligned ellipse equation (I'm pretty sure your ellipse is axis-aligned, that is, your display matrix is not tilted):

((x-x0)/a)2 + ((y-y0)/b)2 = 1

where the ellipse is centered at (x0, y0) and its semi-axes are a and b.

If the equation holds, then the point (x,y) is on the ellipse. Replace =1 with <1 and you will get a condition of (x,y) being inside the ellipse.