Circular Clipping Region?

Questions
1

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

2

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.

3

Like this?

http://twolivesleft.com/Codea/Talk/discussion/comment/2343

4

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.

5

Genius indeed :slight_smile: 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!

6

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)

7

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
8

This is awesome, looks just like what I need. I’ll give it a shot tomorrow morning on the train. Thanks for sharing :slight_smile:

9

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

10

You mean Lua!

11

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

12

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.

13

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

14

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!

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