How to Draw Circle, incrementally, to create an animated fill effect (using Corona)

Question

I'm having trouble even figuring out where to start with this. ANY help would be highly appreciated!

Using the Corona SDK I want to draw a circle that will slowly fill as a percentage increases.

The fill effect will follow the path of the circle, going anti-clockwise until the entire circle/area is completely filled a different color.

Thanks!

Answer 1

This sample from caronalabs.com forums shows how you might draw an arc, which provides the discrete algorithm you would need to do what you're asking:

function display.newArc(group, x,y,w,h,s,e,rot) 
    local theArc = display.newGroup()

    local xc,yc,xt,yt,cos,sin = 0,0,0,0,math.cos,math.sin --w/2,h/2,0,0,math.cos,math.sin
    s,e = s or 0, e or 360
    s,e = math.rad(s),math.rad(e)
    w,h = w/2,h/2
    local l = display.newLine(0,0,0,0)
    l:setColor(54, 251, 9)
    l.width = 4

    theArc:insert( l )

    for t=s,e,0.02 do 
        local cx,cy = xc + w*cos(t), yc - h*sin(t)
        l:append(cx,cy) 
    end

    group:insert( theArc )

    -- Center, Rotate, then translate       
    theArc.x,theArc.y = 0,0
    theArc.rotation = rot
    theArc.x,theArc.y = x,y

    return theArc
end

function display.newEllipse(group, x, y, w, h, rot)
    return newArc(group, x, y, w, h, nil, nil, rot)
end

It would appear that all you need to do is continue allocating new lines from the center out to the circumference of the circle over time.

Disclaimer: I've not tested this code, you will likely need to modify it further, but at a glance the math looks correct.

HTH!