How to draw a smooth filled circle?

[xpol]

I find that when I draw a line circle it is smoothed.

Code: Select all

love.graphics.circle('line', 300, 300, 100, 64)

But when draw a filled circle, it was not:

Code: Select all

love.graphics.circle('fill', 300, 300, 100, 64)

I fond the follow solution to workaround:

Solution #1: Draw a filled and a lined circle with the same params:

Code: Select all

love.graphics.circle('fill', 300, 300, 100, 64)
love.graphics.circle('line', 300, 300, 100, 64)

Solution #2: Setup fsaa in config

Code: Select all

--conf.lua
function love.conf(t)
    t.window.fsaa = 8
end

My question is:

Which solution is better? (#1 i guess)
Is there other better solutions?

[Azhukar]

Code: Select all

love.graphics.setPointSize(100)
love.graphics.setPointStyle("smooth")
love.graphics.point(200,200)

[Positive07]

Code: Select all

love.graphics.setPointSize(100)
love.graphics.setPointStyle("smooth")
love.graphics.point(200,200)

Nope! This has some issues

[slime]

Code: Select all

love.graphics.setPointSize(100)
love.graphics.setPointStyle("smooth")
love.graphics.point(200,200)

Nope! This has some issues

The maximum point size is also rather small (~64) on many systems.

Setting the FSAA value is good if you don't mind the performance hit and you do want FSAA on other things aside from the circles. Otherwise drawing the fill and line circles would work fine although the edge of the circle would have more opacity than the inside.

Another option would be to create a circle-image using an image editing program, and draw that.

[ivan]

Another option would be to create a circle-image using an image editing program, and draw that.

This is the most sensible solution.

If you want to get really crazy, you can try something like (highly untested and buggy, but I hope you get the idea):

Code: Select all

    -- smooth, filled circle
    -- x, y = position
    -- d = radius
    -- s = segments
    -- l = smoothing steps
    -- r, g, b = color
    -- a = alpha
    function sf_circle(x, y, d, s, l, r, g, b, a)
      -- todo: increase the iteration step for large "smoothing steps"
      for i = l, 1, -1 do
        local t = (i - 1)/l
        --t = math.sqrt(t)
        --t = 1 - math.cos(t*(math.pi/2))
        love.graphics.setColor(r, g, b, (1 - t) * a/i)
        love.graphics.circle('fill', x, y, d + i, s)
      end
    end

The basic idea is to draw a few larger but transparent circles which should blur the edges of your circle.

[Positive07]

-snip-

If I do

Code: Select all

sf_circle(0,0,5,100,400,255,255,255,255)

I would end up with a circle with a diameter of 205 or am I missing something?

[kikito]

Another option would be to create a circle-image using an image editing program, and draw that.

This is the most sensible solution.

Why is that more sensible than drawing a circle with fill and then with line? Honest question.

[micha]

The basic idea is to draw a few larger but transparent circles which should blur the edges of your circle.

I haven't tested this, but to me this sounds like a bad idea. Anti-aliasing is not the same as blurring, even though these two are somehow related. Have you tried this approach and checked the result visually?

Why is that more sensible than drawing a circle with fill and then with line? Honest question.

Drawing a circle with fill and then with line does not work as expected, when you try to draw semi-transparent with alpha. In that case, the boundary will be drawn twice and you see it darker. That could be solved by either drawing on a canvas first (or on imageData) or by drawing the circle externally.

[ivan]

I would end up with a circle with a diameter of 205 or am I missing something?

Yep, good point. The function is not very well tested I'm afraid.

I haven't tested this, but to me this sounds like a bad idea. Anti-aliasing is not the same as blurring, even though these two are somehow related. Have you tried this approach and checked the result visually?

True. The approach that I mentioned should work well with diagonal lines (horizontal and vertical lines are generally not affected by aliasing). With circles it's a little more complicated. I believe it could be modified for some 'decent' visual results, but again, it's probably not the best solution.