Drawing the 'Negative' of a circle.

Questions about the LÖVE API, installing LÖVE and other support related questions go here.
Forum rules
Before you make a thread asking for help, read this.
artificialallium
Prole
Posts: 9
Joined: Sun Feb 06, 2022 7:10 pm

Drawing the 'Negative' of a circle.

Post 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
User avatar
BrotSagtMist
Party member
Posts: 607
Joined: Fri Aug 06, 2021 10:30 pm

Re: Drawing the 'Negative' of a circle.

Post 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.
obey
User avatar
darkfrei
Party member
Posts: 1169
Joined: Sat Feb 08, 2020 11:09 pm

Re: Drawing the 'Negative' of a circle.

Post 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
round-hole-01.png (9.22 KiB) Viewed 1326 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
2022-11-15T17_17_47-Untitled.png (10.43 KiB) Viewed 1326 times
Attachments
round-hole-01.love
CC0
(797 Bytes) Downloaded 40 times
:awesome: in Lua we Löve
:awesome: Platformer Guide
:awesome: freebies
User avatar
darkfrei
Party member
Posts: 1169
Joined: Sat Feb 08, 2020 11:09 pm

Re: Drawing the 'Negative' of a circle.

Post 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
2022-11-15T17_36_24-Untitled.png (59.29 KiB) Viewed 1317 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
2022-11-15T17_39_02-Untitled.png (78.89 KiB) Viewed 1317 times
:awesome: in Lua we Löve
:awesome: Platformer Guide
:awesome: freebies
artificialallium
Prole
Posts: 9
Joined: Sun Feb 06, 2022 7:10 pm

Re: Drawing the 'Negative' of a circle.

Post by artificialallium »

Thanks!!
User avatar
darkfrei
Party member
Posts: 1169
Joined: Sat Feb 08, 2020 11:09 pm

Re: Drawing the 'Negative' of a circle.

Post by darkfrei »

Also see the polygon & shadows thread:
viewtopic.php?p=244845#p244845
:awesome: in Lua we Löve
:awesome: Platformer Guide
:awesome: freebies
User avatar
pgimeno
Party member
Posts: 3544
Joined: Sun Oct 18, 2015 2:58 pm

Re: Drawing the 'Negative' of a circle.

Post by pgimeno »

I did something similar with a canvas: https://www.love2d.org/forums/viewtopic ... 99#p204899
User avatar
darkfrei
Party member
Posts: 1169
Joined: Sat Feb 08, 2020 11:09 pm

Re: Drawing the 'Negative' of a circle.

Post by darkfrei »

pgimeno wrote: Fri Nov 18, 2022 3:54 pm I did something similar with a canvas: https://www.love2d.org/forums/viewtopic ... 99#p204899
Can you update it or add screenshot?
:awesome: in Lua we Löve
:awesome: Platformer Guide
:awesome: freebies
User avatar
pgimeno
Party member
Posts: 3544
Joined: Sun Oct 18, 2015 2:58 pm

Re: Drawing the 'Negative' of a circle.

Post by pgimeno »

I forgot it was for an older version, sorry.
Attachments
flashlight-POC-11.love
(142.75 KiB) Downloaded 43 times
User avatar
darkfrei
Party member
Posts: 1169
Joined: Sat Feb 08, 2020 11:09 pm

Re: Drawing the 'Negative' of a circle.

Post 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
Screenshot_20221118-224212.jpg (427.33 KiB) Viewed 1140 times
:awesome: in Lua we Löve
:awesome: Platformer Guide
:awesome: freebies
Post Reply

Who is online

Users browsing this forum: Bing [Bot] and 49 guests