Blending antialiased circles

Question

I've implemented Xiaolin Wu algorithm to draw an antialiased circle. And it works. However, in my app, I can draw on the screen many circles and they don't have full opacity. So, I want to blend them. Before implementing antialiasing Xiaolin Wu algorithm my blending method worked. I use very simple blending:

int blendColors(int a, int b, float t) {
    double s = sqrt((1 - t) * a * a + t * b * b);
    return s;
}

void setPixel(int index, int r, int g, int b, int a, unsigned char* data) {

    int oldR = data[index];
    int oldG = data[index + 1];
    int oldB = data[index + 2];
    int oldA = data[index + 3];

    int newA = min((int) (oldA + a * 0.25f), 255);
    int newR = blendColors(oldR, r, 0.5f);
    int newG = blendColors(oldG, g, 0.5f);
    int newB = blendColors(oldB, b, 0.5f);

    data[index] = newR;
    data[index + 1] = newG;
    data[index + 2] = newB;
    data[index + 3] = newA;

}

Alpha blending works like darkening.

Now, if I start from transparent background it looks like this:

But, when I start from opaque background is looks like this:

As you can see antialiasing is missing. That's because opaque background already have 255 opacity. So there's an issue in blending algorithm. I have to find another way to blend colours when there's an opaque background. How can I do this?

Circle algorithm is here:

void drawFilledCircle(int x, int y, int startRadius, int endRadius, int r, int g, int b, int a, unsigned char* data, unsigned char* areasData, int startAngle, int endAngle, bool blendColor) {
    assert(startAngle <= endAngle);
    assert(startRadius <= endRadius);

    dfBufferCounter = 0;

    for(int i = 0; i < DRAW_FILLED_CIRCLE_BUFFER_SIZE; i++) {
        drawFilledCircleBuffer[i] = -1;
    }

    for(int cradius = endRadius; cradius >= startRadius; cradius--) {
        bool last = cradius == endRadius;
        bool first = cradius == startRadius && cradius != 0;

        float radiusX = cradius;
        float radiusY = cradius;
        float radiusX2 = radiusX * radiusX;
        float radiusY2 = radiusY * radiusY;

        float maxTransparency = 127;

        float quarter = roundf(radiusX2 / sqrtf(radiusX2 + radiusY2));
        for(float _x = 0; _x <= quarter; _x++) {
            float _y = radiusY * sqrtf(1 - _x * _x / radiusX2);
            float error = _y - floorf(_y);

            float transparency = roundf(error * maxTransparency);
            int alpha = last ? transparency : maxTransparency;
            int alpha2 = first ? maxTransparency - transparency : maxTransparency;

            setPixel4(x, y, _x, floorf(_y), r, g, b, alpha, cradius, endRadius, data, areasData, blendColor);
            setPixel4(x, y, _x, floorf(_y) - 1, r, g, b, alpha2, cradius, endRadius, data, areasData, blendColor);
        }

        quarter = roundf(radiusY2 / sqrtf(radiusX2 + radiusY2));
        for(float _y = 0; _y <= quarter; _y++) {
            float _x = radiusX * sqrtf(1 - _y * _y / radiusY2);
            float error = _x - floorf(_x);

            float transparency = roundf(error * maxTransparency);
            int alpha = last ? transparency : maxTransparency;
            int alpha2 = first ? maxTransparency - transparency : maxTransparency;

            setPixel4(x, y, floorf(_x), _y, r, g, b, alpha, cradius, endRadius, data, areasData, blendColor);
            setPixel4(x, y, floorf(_x) - 1, _y, r, g, b, alpha2, cradius, endRadius, data, areasData, blendColor);
        }
    }
}

void setPixel4(int x, int y, int deltaX, int deltaY, int r, int g, int b, int a, int radius, int maxRadius, unsigned char* data, unsigned char* areasData, bool blendColor) {

    for(int j = 0; j < 4; j++) {

        int px, py;
        if(j == 0) {
            px = x + deltaX;
            py = y + deltaY;
        } else if(j == 1) {
            px = x - deltaX;
            py = y + deltaY;
        } else if(j == 2) {
            px = x + deltaX;
            py = y - deltaY;
        } else if(j == 3) {
            px = x - deltaX;
            py = y - deltaY;
        }

        int index = (px + (img->getHeight() - py - 1) * img->getWidth()) * 4;

        bool alreadyInBuffer = false;
        for(int i = 0; i < dfBufferCounter; i++) {
            if(i >= DRAW_FILLED_CIRCLE_BUFFER_SIZE) break;
            if(drawFilledCircleBuffer[i] == index) {
                alreadyInBuffer = true;
                break;
            }
        }

        if(!alreadyInBuffer) {
            if(dfBufferCounter < DRAW_FILLED_CIRCLE_BUFFER_SIZE) {
                drawFilledCircleBuffer[dfBufferCounter++] = index;
            }

            setPixelWithCheckingArea(px, py, r, g, b, a, data, areasData, blendColor);
        }
    }

}

Answer 1

Firstly, alpha blending is linear, so blendColors is incorrect.

When blending a pixel you must also take into account the alpha channel of the overlay colour.

Assume that the (RGB, A) value for the following are:

• Current pixel - (b, 255) (i.e. opaque)
• Overlay colour - (c, a)
• Output pixel - (d, 255)

The blending equation is d = [ c * a + b * (255 - a) ] / 255.

Code:

int blendColorAlpha(int c, int b, int a) {
    return (c * a + b * (255 - a)) / 255;
}

int newA = 255; // always set the new alpha to 100%
int newR = blendColors(r, oldR, a);
int newG = blendColors(g, oldG, a);
int newB = blendColors(b, oldB, a);

---

In the case of non-opaque backgrounds, the blending equation is somewhat more complex; in particular, simply using the minimum alpha when blending is incorrect.

(See my answer here for a derivation.)

Code:

struct rgba { unsigned char r, g, b, a; };

rgba blendRGBA(rgba x, rgba y)
{
    int s = (int)(x.a), t = (int)(y.a);
    int u = 255*255 - (255-s)*(255-t);
    rgba z;
    z.a = u / 255;
    z.r = (255*t*y.r + (255-t)*s*x.r) / u;
    z.g = (255*t*y.g + (255-t)*s*x.g) / u;
    z.b = (255*t*y.b + (255-t)*s*x.b) / u;
    return z;
}

...

rgba inpC = { r, g, b, a };

rgba* pixel = (rgba*)(&data[index]);
*pixel = blendRGBA(*pixel, inpC);