Howdy, Stranger!

It looks like you're new here. If you want to get involved, click one of these buttons!

Circular Clipping Region?

edited February 2012 in Questions Posts: 65


Is it possible to have a circular clipping region? The reason I ask is that I'd like to give the sun in my game the illusion of rotating by simply moving a flat texture behind a 'hole' as in the answer given here:

The only thing I can't figure out how to do is to achieve a circular/elliptical clipping region. Is it possible at all to do this or something like it?




  • Posts: 2,161

    As far as I know, the only clipping is by rectangles. However, you can render your image to a circular mesh and draw that, this has the effect of clipping it to the circle.

  • edited February 2012 Posts: 622

    Here's the genius of what Alex did to get a circular clip type effect (this was pre mesh)


    You'd make stroke() the background() color. The star would have to be draw right after background() or with a deep z order to keep the rectangular bits around the circle hidden.

  • Genius indeed :) however my background isn't a solid colour, so it won't work for me unfortunately. I'm going to try using a mesh, though I'm new to meshes so this could be interesting!

  • Good luck, if it doesn't work out, you could draw pieces of the background on your rectangle and hide the hack with an aurora (technically a corona but peeps think beer when I use that term)

  • SimeonSimeon Admin Mod
    edited February 2012 Posts: 5,121

    I wrote a little class that takes a drawing function and renders it into a circular mesh, creating a masked circle.

    Here's how it looks drawing random circles every frame into the masked area:

    Circle Mask

    Edit: You can lower the number of sides to get a regular polygon mask, e.g:

    Circle Mask

    Here's the code:


    CircleMask = class()
    function CircleMask:init(rad, sides)
        -- you can accept and set parameters here
        self.mesh = mesh()
        local verts = {}
        local tex = {}
        for i=1,sides do
            local r1 = (i-1)/sides * math.pi * 2
            local r2 = i/sides * math.pi * 2
            local p1 = vec2( math.cos(r1), math.sin(r1) )
            local p2 = vec2( math.cos(r2), math.sin(r2) )
            -- Verts
            table.insert(verts, p1 * rad)
            table.insert(verts, p2 * rad)
            table.insert(verts, vec2(0,0)) -- center
            -- Tex Coords
            table.insert(tex, (p1 + vec2(1,1)) * 0.5)
            table.insert(tex, (p2 + vec2(1,1)) * 0.5)
            table.insert(tex, vec2(0.5,0.5))
        self.mesh.vertices = verts
        self.mesh.texCoords = tex
        self.mesh:setColors( 255,255,255 )
    function CircleMask:setDrawFunction(func, w, h)
        self.mesh.texture = image(w,h)
        self.drawFunction = func
    function CircleMask:setTexture(tex)
        self.mesh.texture = tex
        self.drawFunction = nil
    function CircleMask:draw()
        if self.drawFunction ~= nil then
            setContext( self.mesh.texture )


    function drawRandomCircles(w,h)
        local minSize = w/10
        local maxSize = w/4
        for i = 1,30 do
            local s = math.random(minSize,maxSize)
            fill( math.random(255),
                  math.random(255), 255 )
            ellipse( math.random(w), math.random(h), s )
    function setup()
        cm = CircleMask( 200, 30 )
        cm:setDrawFunction( function ()
                            end, 200, 200 )
    function draw()
        background(40, 40, 50)
        -- Do your drawing here
        translate(WIDTH/2, HEIGHT/2)    
  • This is awesome, looks just like what I need. I'll give it a shot tomorrow morning on the train. Thanks for sharing :)

  • Posts: 176

    Hmm. Shades of gray, tweak the size and number of circles, shade them properly for shadows, and it would look like the moon.

  • edited February 2012 Posts: 273

    You mean Lua!

  • Posts: 2,820

    Get it right... LUNA (it is a lame coding app though). Let's not get too pun-ful here...

  • SimeonSimeon Admin Mod
    Posts: 5,121

    Lua means "Moon" in Portuguese. That's why the Lua language has a moon for its logo. It was developed at the University of Rio in Brazil.

  • Posts: 2,820

    Oh... I get it now... About the actual discussion, this is really helpful. Thanks.

  • Posts: 176

    Thanks for the insight. I had no idea what LUA meant. I assumed it was something like Language Usage Awesome, or Least Used Acronym or something like that. Kool!

  • edited February 2012 Posts: 273
    Thanks for the insight.

    @jlslate I thought you seeing a moon in Simeon's example was quite the insight!

    BTW: The reason for the development of Lua makes for quite an interesting story.

    Let's not get too pun-ful here...

    @Zoyt There is no need for any contortions when the pun is already in place!

    Quote: "Lua 1.0 was designed in such a way that its object constructors, being then slightly different from the current light and flexible style, incorporated the data-description syntax of SOL. (Hence the name Lua – sol is Portuguese for sun; lua is moon.)"

    (SOL was the acronym and Lua the pun)

Sign In or Register to comment.