**0**

# Best way to draw a circle

Started by Oct 01 2012 09:38 AM

,
1 reply to this topic

###
#2
Crossbones+ - Reputation: **3133**

Posted 01 October 2012 - 10:06 AM

This greatly depends on context. Are you drawing it pixel by pixel? Is it 2D? Is it 3D? Filled? And so forth.

That being said, the general equation for a circle in 2D is:

Where r is the radius of the circle, and (h,k) is the center. A simple (and highly inefficient) way of drawing a circle pixel by pixel is to iterate all pixels in a block sized 2*r x 2*r and calculating (x-h)^2 + (y-k)^2. If this value is equal to r^2, the point lies on the edge of the circle. If it is less than r^2 it lies inside the circle, if it is greater than r^2 it lies outside the circle.

There are ways, such as Bresenham's circle, that can speed up drawing just the rim of the circle if that is all you need.

Putting individual pixels on modern hardware, of course, is an extremely slow way to do this. If you want to draw the circle as geometry that can be handled quickly by the GPU, you can use the parametric form of a circle:

In this usage, you have a parameter, t, that lies in the range 0 to 2*pi (radians). For each value of t, you can generate a point that lies on the edge of the circle, p, using the above equation. The circle is centered at (h,k).

To construct a line list that represents the rim of the circle, you can simply iterate on t across the range, generating points and inserting them into the line list. The "resolution" of the circle depends upon the value by which you increment t between points. If this value is relatively large, the circle will be less circular and more polygonal. As the increment gets smaller, the result more closely approximates a true circle. For example, if you use for the increment the value of (2*pi)/4 then the resulting line list will be a square rather than a true circle. Similarly, (2*pi)/6 generates a hexagon, (2*pi)/8 generates an octagon, and so forth. Efficiency dictates that you use an increment that is sufficiently small to generate a circle that is "good enough", a condition that is highly dependent upon the radius of your circle compared to the size of the screen space it occupies.

In order to draw the circle as filled, you can construct a triangle fan rather than a line list, with the center (h,k) of the circle as the root of the triangle fan, generating rim points as in the line list above.

That being said, the general equation for a circle in 2D is:

r^2 = (x-h)^2 + (y-k)^2

Where r is the radius of the circle, and (h,k) is the center. A simple (and highly inefficient) way of drawing a circle pixel by pixel is to iterate all pixels in a block sized 2*r x 2*r and calculating (x-h)^2 + (y-k)^2. If this value is equal to r^2, the point lies on the edge of the circle. If it is less than r^2 it lies inside the circle, if it is greater than r^2 it lies outside the circle.

There are ways, such as Bresenham's circle, that can speed up drawing just the rim of the circle if that is all you need.

Putting individual pixels on modern hardware, of course, is an extremely slow way to do this. If you want to draw the circle as geometry that can be handled quickly by the GPU, you can use the parametric form of a circle:

p=(cos(t)*r+h, sin(t)*r+k) where 0<=t<2*pi

In this usage, you have a parameter, t, that lies in the range 0 to 2*pi (radians). For each value of t, you can generate a point that lies on the edge of the circle, p, using the above equation. The circle is centered at (h,k).

To construct a line list that represents the rim of the circle, you can simply iterate on t across the range, generating points and inserting them into the line list. The "resolution" of the circle depends upon the value by which you increment t between points. If this value is relatively large, the circle will be less circular and more polygonal. As the increment gets smaller, the result more closely approximates a true circle. For example, if you use for the increment the value of (2*pi)/4 then the resulting line list will be a square rather than a true circle. Similarly, (2*pi)/6 generates a hexagon, (2*pi)/8 generates an octagon, and so forth. Efficiency dictates that you use an increment that is sufficiently small to generate a circle that is "good enough", a condition that is highly dependent upon the radius of your circle compared to the size of the screen space it occupies.

In order to draw the circle as filled, you can construct a triangle fan rather than a line list, with the center (h,k) of the circle as the root of the triangle fan, generating rim points as in the line list above.