Page 1 of 2
Drawing the 'Negative' of a circle.
Posted: Tue Nov 15, 2022 2:59 pm
by artificialallium
Hi, I've just been thinking about how you could go about drawing everything in black apart from a circular area, preferably with a radius adjustable in runtime. Similar to the transition effect when you die or finish a level in CELESTE.It just seems like something so simple and yet i'm drawing a blank.
Thanks In advance
Re: Drawing the 'Negative' of a circle.
Posted: Tue Nov 15, 2022 3:08 pm
by BrotSagtMist
You set the color mode to "replace"
https://love2d.org/wiki/BlendMode and then draw with transparent on a black canvas first.
Then if the mode is set back to "alpha" and you draw it it behaves like cloth with holes.
Re: Drawing the 'Negative' of a circle.
Posted: Tue Nov 15, 2022 4:14 pm
by darkfrei
Code: Select all
local function updateCurtainCanvas (x, y, radius)
love.graphics.setCanvas (CurtainCanvas)
-- black curtain
love.graphics.setBlendMode( "alpha")
love.graphics.setColor (0,0,0,1) -- black
love.graphics.rectangle ('fill', 0,0, CurtainCanvas:getWidth( ), CurtainCanvas:getHeight( ))
-- circle hole
love.graphics.setBlendMode( "replace")
love.graphics.setColor (1,1,1,0)
love.graphics.circle ('fill', x, y, radius)
love.graphics.setCanvas ()
end
function love.load()
-- set background
love.graphics.setBackgroundColor(132/255, 193/255, 238/255)
-- create canvas
CurtainCanvas = love.graphics.newCanvas ()
-- update canvas
updateCurtainCanvas (100, 100, 100)
end
function love.update(dt)
end
function love.draw()
-- restoring color settings
love.graphics.setColor (1,1,1)
love.graphics.setBlendMode("alpha")
-- example graphics
love.graphics.rectangle('fill', 100, 150, 350, 250)
-- and than drawing curtain
love.graphics.draw(CurtainCanvas)
end
function love.mousemoved( x, y, dx, dy, istouch )
-- update canvas
updateCurtainCanvas (x, y, math.min (x, y))
end
- round-hole-01.png (9.22 KiB) Viewed 1426 times
Also it's possible to set semitransparent:
Code: Select all
local function updateCurtainCanvas (x, y, radius)
love.graphics.setCanvas (CurtainCanvas)
-- black curtain
love.graphics.setBlendMode( "alpha")
love.graphics.setColor (0,0,0,1) -- black
love.graphics.rectangle ('fill', 0,0, CurtainCanvas:getWidth( ), CurtainCanvas:getHeight( ))
-- circle hole
love.graphics.setBlendMode( "replace")
love.graphics.setColor (0,0,0,0.25)
love.graphics.circle ('fill', x, y, radius)
love.graphics.setColor (0,0,0,0)
love.graphics.circle ('fill', x, y, radius/2)
love.graphics.setCanvas ()
end
- 2022-11-15T17_17_47-Untitled.png (10.43 KiB) Viewed 1426 times
Re: Drawing the 'Negative' of a circle.
Posted: Tue Nov 15, 2022 4:40 pm
by darkfrei
Also it's possible to make the fading with mesh:
Code: Select all
local meshVertices = {} -- for fan mesh
local meshRadius = 1
table.insert (meshVertices, {0,0, 0,0, 1,1,1, 0}) -- white dot int the middle
for angle = 0, 360, 10 do
local x = 0+meshRadius*math.cos (math.rad(angle))
local y = 0+meshRadius*math.sin (math.rad(angle))
table.insert (meshVertices, {x,y, 0,0, 0,0,0, 1}) -- black dots on perimeter
end
Mesh = love.graphics.newMesh( meshVertices, "fan")
local function updateCurtainCanvas (x, y, radius)
love.graphics.setCanvas (CurtainCanvas)
-- black curtain
love.graphics.setBlendMode( "alpha")
love.graphics.setColor (0,0,0,1) -- black
love.graphics.rectangle ('fill', 0,0, CurtainCanvas:getWidth( ), CurtainCanvas:getHeight( ))
-- circle hole
love.graphics.setBlendMode( "replace")
love.graphics.setColor (0,0,0,0.97)
love.graphics.draw(Mesh,x, y, 0, radius)
love.graphics.setCanvas ()
end
- 2022-11-15T17_36_24-Untitled.png (59.29 KiB) Viewed 1417 times
or with color:
Code: Select all
-- circle hole
love.graphics.setBlendMode( "replace")
love.graphics.setColor (1,0,0,1)
love.graphics.draw(Mesh,x, y, 0, radius)
- 2022-11-15T17_39_02-Untitled.png (78.89 KiB) Viewed 1417 times
Re: Drawing the 'Negative' of a circle.
Posted: Thu Nov 17, 2022 9:18 am
by artificialallium
Thanks!!
Re: Drawing the 'Negative' of a circle.
Posted: Fri Nov 18, 2022 9:47 am
by darkfrei
Also see the polygon & shadows thread:
viewtopic.php?p=244845#p244845
Re: Drawing the 'Negative' of a circle.
Posted: Fri Nov 18, 2022 3:54 pm
by pgimeno
Re: Drawing the 'Negative' of a circle.
Posted: Fri Nov 18, 2022 4:44 pm
by darkfrei
Can you update it or add screenshot?
Re: Drawing the 'Negative' of a circle.
Posted: Fri Nov 18, 2022 4:53 pm
by pgimeno
I forgot it was for an older version, sorry.
Re: Drawing the 'Negative' of a circle.
Posted: Fri Nov 18, 2022 9:44 pm
by darkfrei
pgimeno wrote: ↑Fri Nov 18, 2022 4:53 pm
I forgot it was for an older version, sorry.
It looks very nice! I cannot right now look how it works, can you please in short explain that?
- Screenshot_20221118-224212.jpg (427.33 KiB) Viewed 1240 times