Convert hyperbola to Bézier curve for graphing orbital paths

Question

I am writing a 2D simulator and game using the HTML canvas which involves orbital mechanics. One feature of the program is to take the position and velocity vector of a satellite at one point and return the semi-major axis, eccentricity, argument of periapsis, etc of a 2D orbit around one planet. When the eccentricity is less than one, I can easily graph the orbit as an ellipse using ctx.ellipse(). However, for eccentricities greater than one, the correct shape of the orbit is a hyperbola. At the moment, my program just draws nothing if the eccentricity is greater than one, but I would like it to graph the correct hyperbolic orbit. Since there is no built in "hyperbola" function, I need to convert my orbit into a Bézier curve. I am at a bit of a loss as to how to do this. The inputs would be the location of one focus, semi-major axis, eccentricity, and argument of periapsis (basically how far the orbit is rotated) and it should return the correct control points to graph a Bézier curve approximation of a hyperbola. It does not have to be exactly perfect, as long as it is a close enough fit. How can I approach this problem?

Answer 1

I'm doing almost the exact same thing except I'm using SVG instead of the canvas. From what I recall they are similar enough that this is applicable. Actually this is regarding Bezier curves in general so application shouldn't matter other than paying attention to the sign of a and y (inverted for graphical applications vs pure math).

Note that this is with the hyperbola centered at the origin not the focus. I would recommend coding it this way then using a transform to position and rotate it as needed. I did a lot of playing around in Desmos, the exact graph is here but I won't bet on that working.

I did this two different ways. One using a quadratic curve and one using a cubic curve. Both use b, which is sqrt(c^2-a^2) instead of e, but easy enough to calculate.

Cubic Curve

I set the cubic curve to fit the hyperbola from 2a to a, which should be enough to cover the part that the curvature is noticeable. Since the apex was at the halfway point this made it easy to set the x values of the control points. The Y values were a bit tricky but came out rather elegant.

cubic curve

The control points are

P1 = (2 * a, b * sqrt(3) )
P2 = (2/3 * a, b * (48-26 * sqrt(3) ) / 18
P3 = (2/3 * a, -b * (48-26 * sqrt(3) )/ 18
P4 = (2 *a, -b * sqrt(3) )

To me this is the better option. If you only need half the hyperbola such as going from parking orbit to ejection orbit then you can clip it.

Quadradic Curve

quadradic curve img

To use a quadratic curve for an ejection orbit, notice that the tangent at departure is vertical and at true anomaly of 90 the y value is the parameter and the flight path angle, which is the tangent, reduces to tan(phi) = e. The control point is then the intersection of the tangents, so:

P1 = (a, 0)
P2 = (a,-e(a + c) + p
P3 = (c, p)

To me this curve is a little too short. I was trying to add additional points to extend it, but had trouble getting it right

Other Options

Another option is creating a curve and using transforms to change the size and shape. Apparently any curve can be created from any another by affine transforms. It's also possible to split a curve into two curves and to change the order of the curve.