# Circular Clipping Region?

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

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.

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)

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:

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

Here’s the code:

``````CircleMask = class()

-- 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, 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

self.mesh.texture = image(w,h)
self.drawFunction = func
end

self.mesh.texture = tex
self.drawFunction = nil
end

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)

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

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

You mean Lua!

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

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.

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

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!

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