Search code examples
algorithmdrawbitdithering

Drawing pixel circle of given area


I have some area X by Y pixels and I need to fill it up pixel by pixel. The problem is that at any given moment the drawn shape should be as round as possible.

I think that this algorithm is subset of Ordered Dithering, when converting grayscale images to one-bit, but I could not find any references nor could I figure it out myself.

I am aware of Bresenham's Circle, but it is used to draw circle of certain radius not area.

I created animation of all filling percents for 10 by 10 pixel grid. As full area is 10x10=100px, then each frame is exactly 1% inc.

pixel animation


Solution

  • A filled disk has the equation

    (X - Xc)² + (Y - Yc)² ≤ C.
    

    When you increase C, the number of points that satisfies the equation increases, but because of symmetry it increases in bursts.

    To obtain the desired filling effect, you can compute (X - Xc)² + (Y - Yc)² for every pixel, sort on this value, and let the pixels appear one by one (or in a single go if you know the desired number of pixels).

    You can break ties in different ways:

    • keep the original order as when you computed the pixels, by using a stable sort;

    • shuffle the runs of equal values;

    • slightly alter the center coordinates so that there are no ties.


    Filling with the de-centering trick.

    Values:

    enter image description here

    Order:

    enter image description here