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

Hi,

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: http://gamedev.stackexchange.com/questions/6199/3d-illusion-of-a-2d-planet-texture/6250#6250

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?

Cheers

Tagged:

Comments

  • 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)

    strokeWidth(500)
        fill(0,0,0,0)
    

    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

    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))
        end
    
        self.mesh.vertices = verts
        self.mesh.texCoords = tex
    
        self.mesh:setColors( 255,255,255 )
    end
    
    function CircleMask:setDrawFunction(func, w, h)
        self.mesh.texture = image(w,h)
        self.drawFunction = func
    end
    
    function CircleMask:setTexture(tex)
        self.mesh.texture = tex
        self.drawFunction = nil
    end
    
    function CircleMask:draw()
        if self.drawFunction ~= nil then
            setContext( self.mesh.texture )
            pushMatrix()
            resetMatrix()
    
            self.drawFunction()
    
            popMatrix()
            setContext()
        end
    
        self.mesh:draw()
    end
    

    Main

    function drawRandomCircles(w,h)
        local minSize = w/10
        local maxSize = w/4
    
        pushStyle()
        noStroke()
        for i = 1,30 do
            local s = math.random(minSize,maxSize)
    
            fill( math.random(255),
                  math.random(255),
                  math.random(255), 255 )
    
            ellipse( math.random(w), math.random(h), s )
    
        end
        popStyle()
    end
    
    function setup()
        cm = CircleMask( 200, 30 )
    
        cm:setDrawFunction( function ()
                                drawRandomCircles(200,200)
                            end, 200, 200 )
    end
    
    function draw()
        background(40, 40, 50)
    
        -- Do your drawing here
        translate(WIDTH/2, HEIGHT/2)    
        cm:draw()
    end
    
  • 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.

    http://en.wikipedia.org/wiki/Lua_(programming_language)#History

    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.