How to approximate OCTANT of a circle using QUADRATIC Bezier curve?

Question

In a vector graphics program I am writing using Java, ideally any shape would be represented by a modified form of the Path2D class, which uses quadratic Bezier curves. Ideally ellipses would be represented as Path2D objects as well. There is heavy documentation on the internet for approximating quadrants of a circle using cubic Bezier curves, but using the Path2D class, cubic Bezier curves are not possible. I have been using Desmos to try to find an approximation of the octant of a circle, and the middle point (between the two control points) for a circle of radius 1 centered at (0, 0) is approximately (0.993, 0.412). Surely there is some irrational number that can more precisely be expressed as a formula using square roots or trigonometric functions.

I have attempted using the formula 4*tan(pi/(2*n))/3. Either that formula does not apply to octants or it was poorly explained where I found it.

Answer 1

t would help if you said where you found it - the formulae for arbitrary angles (which obviously includes octants, just plug in PI/4 as your angle) are rather different from what you show. Find the real formulae, and explanation, over on https://pomax.github.io/bezierinfo/#circles.

Quadratic curves are dead simple in the sense that the control point is a linear intersection of the end point tangents. So, given start point (1,0) with vertical tangent (because it's a circle, that's how circles work) and end point (cos(phi), sin(phi)) for some angle phi, with tangent (sin(phi), -cos(phi)), we can determine the control point for this curve as:

Cx = cos(phi) - b * sin(phi)
Cy = sin(phi) + b * cos(phi)

where:

    cos(phi) - 1
b = ------------
      sin(phi)

(The actual maths here is explained in the link above).

Plugging in PI/4 to compute the first octant means we get:

Cx = 1 (obviously; it's a vertical tangent, so the x coordinate is fixed)
Cy = sqrt(2) - 1

And you're done: you don't need to derive any other values, because all the other octants are just reflections of these values that you literally just write out on some paper by drawing a circle, draw lines to show octants, mark the first octant with its coordinate values, and then go "oh, obviously the other coordinates are: ..." -- also the above formulae are for circles with radius 1, but you know how to multiply so you know how to scale the values so that they match your desired circle.

I would be curious why you want quadratic curves, though, because they're objectively pretty terrible compared to cubics. For example: you need 16 points to model a circle with quadratic octants, whereas you only need 12 points for cubic quarters, which have higher precision.

Also, even if you're dead set only ever using quadratics, users of your software might move to other software. They expect cubics to be available to the point where they will petition you for them if the rest of your software is worth using. Plan for that, or ideally just support quadratic and cubic from the start. After all, SVG etc. already do.