Draw thick, feathered line with variable thickness in plane C#

Question

I'm creating a heightmap painting tool which uses a spline to paint the heightmap with a value from 0 to 1. The spline consists of several points each of which has different thickness (size/width) and this gets interpolated. The tool paints a projection of the path on the heightmap with a thickness specified by the user, multiplied by each point's size and a feather specified by the user. So far I've managed to implement everything and my implementation works like that:

Takes two points (i and i+1) (http://i.imgur.com/PToj9ws.jpg)
Finds the perpendicular line to (points[i+1].position-points[i].position) (http://i.imgur.com/9imeDNU.jpg)
Fills the rectangle defined by the start and end points of the perpendicular lines (http://i.imgur.com/QFfcR89.jpg) using a feather.

To fill these rectangles I draw multiple lines using a variation of Bresenham's line algorithm:

public void drawLine(Point fromPoint, Point toPoint, float fromValue, float toValue, ref float[,] grid)
{
    int x0 = fromPoint.x, y0 = fromPoint.y, x1 = toPoint.x, y1 = toPoint.y;
    int dx = Mathf.Abs(x1 - x0), sx = x0 < x1 ? 1 : -1;
    int dy = -Mathf.Abs(y1 - y0), sy = y0 < y1 ? 1 : -1;
    int err = dx + dy, e2;
    int x = x0, y = y0;
    Vector2 target = new Vector2(x1 - x0, y1 - y0);
    while(true)
    {
        Vector2 current = new Vector2(x - x0, y - y0);
        float addValue = Mathf.Lerp(fromValue, toValue, current.magnitude / target.magnitude);

        plot(x, y, addValue, 1f, ref grid);
        if (sample) grid[x, y] = supersample(x, y, ref grid);

        if (x == x1 && y == y1) break;
        e2 = 2 * err;
        if (e2 > dy)
        {
            err += dy;
            x += sx;
        } else if (e2 < dx)
        {
            err += dx;
            y += sy;
        }
    }
}

So far so good! The problem however comes when one of the points on the spline has a different size than the other points. Since this algorithm does not draw an anti-aliased line, the drawn shape starts to look jaggy. This happens because I draw a line for each pixel of the bigger point's perpendicular line and map their endpoints to the smaller point's perpendicular line. So basically lines start to overlap each other around the more narrow point. I tried to draw a graphic to visualize the problem:

So my final result looks like that:

You can see how the feathered part is very jagged.

I tried to use Xiaolin Wu's line algorithm to draw the lines but that causes gaps to appear between the pixels and the fill becomes inconsistent. So far only applying Gausian blur makes things look better but it doesn't fix the problem completely and it's heavy so I dropped that option too.

I really need to implement this without using any libraries so any suggestions on how to go about tackling this issues are very welcome. Thanks!

Draw thick, feathered line with variable thickness in plane C#

2 Answers