Drawing the 'Negative' of a circle.

[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

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

[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 2035 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 2035 times

[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 2026 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 2026 times

[artificialallium]

Thanks!!

[darkfrei]

Also see the polygon & shadows thread:
viewtopic.php?p=244845#p244845

[pgimeno]

I did something similar with a canvas: https://www.love2d.org/forums/viewtopic ... 99#p204899

[darkfrei]

I did something similar with a canvas: https://www.love2d.org/forums/viewtopic ... 99#p204899

Can you update it or add screenshot?

[pgimeno]

I forgot it was for an older version, sorry.

[darkfrei]

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 1849 times