#### 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 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:

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

• Posts: 622
• 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.

• Posts: 65

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!

• Posts: 622

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)

• 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: 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
``````
• Posts: 65

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

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