How to render a circle with as few vertices as possible?

Question

I'm trying to figure out how to decide how many vertices I need to have to make my circle look as smooth as possible.

Here is an example of two circles, both having 24 vertices:

As you see, the bigger the circle becomes, the more vertices I need to hide the straight lines.

At first I thought that the minimum length of one line on the edge should be 6px, but that approach failed when I increased the circle size: I got way too many vertices. I also thought about calculating the angles, but I quickly realised that angles doesn't differ on different sized circles. I also checked this answer, but I don't have a clue how to convert it into code (and some weird stuff there: th uses itself for calculating itself), and I think it doesn't even work, since the author is using the angle from one slice to the middle of circle, which doesn't change if the circle gets larger.

Then I realised that maybe the solution is to check the angle between two vertices at the edges, in this way:

As you see, the fewer vertices, the bigger the lengths are for those triangles. So this has to be the answer, I just don't know how to calculate the number of vertices by using this information.

Answer 1

In case you want to draw the polygon triangles from the center of the circle, the formula for the required number of sides is:

sides = PI / arccos(1 - error / radius)

where error is the maximum deviation of polygon from the circle, in pixels and radius is also expressed in pixels.

Error 0.33 seems to produce results indistinguishable from an ideal circle. Circles drawn at error 0.5, on close inspection still show some subtly visible angles between sides, especially visible in small circles.

This function obviously breaks down when radius is much smaller than error, and may produce NaN values. You may want to use a special case (for example draw 3 sides) in this situation.

The graph below shows number of sides obtained from the function, with error set to 0.33: