How to Draw Anti-Aliased Circles (Xiaolin Wu’s Method)

In this post, we will briefly explore how Xiaolin Wu’s algorithm for drawing anti-aliased circles works. We’ll explain the underlying concept and show you how to implement it with simple code.

Introduction

Xiaolin Wu's algorithm was published in 1991, and it’s one of those clever tricks to get anti-aliased lines and circles. Compared to Bresenham, which is all integer math and sharp edges, Wu's approach uses floating point and controls pixel brightness to get smoother results. Here we’ll focus on the circle version, quick overview of the idea, and then straight to the code.

Eight-way symmetry

Thanks to the circle’s eight-way symmetry, we can reduce the amount of work by computing only one eighth of the arc. Once we have the points for that section, we just reflect and rotate them to get the full shape across all octants. This not only simplifies the code, but also helps keep the intensity distribution consistent all around.

Working around spatial sampling

To work around the limited spatial resolution of pixel displays, and since Wu's algorithm calculates the ideal circle border using continuous (float) values, it draws two adjacent pixels around the ideal point, either up/down or left/right depending on the quadrant. This helps reduce jagged artifacts and makes the shape look smoother.
Symmetry plays a role here too, since it ensures the pixel placement is consistent across the full circle.

Intensity trick

The last trick in Wu’s algorithm is about making the curve look smooth, and that comes down to how much each pixel lights up. Since the ideal arc doesn’t usually land perfectly on a pixel, the algorithm picks the two nearest pixels and gives them different brightness levels. The closer a pixel is to the actual curve, the more intense it gets; the farther it is, the dimmer.

This intensity calculation helps blend the curve into the background and gives that nice anti-aliased effect. And again, symmetry helps here too: it ensures that intensity transitions stay balanced around the circle.

Wrapping up

That’s pretty much the idea behind Wu’s anti-aliased circle: a bit of floating point math (which I totally fake understanding of), some clever pixel blending, and good old symmetry.
If you’ve made it this far, you probably don’t mind a few pixels more, so stick around, code’s coming soon™ 😅.
Meanwhile, feel free to drop questions, feedback, or curse words in the comments.