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

Pixilated circle

Post by darkfrei »

Hi!

How I can make a circle that is one pixel wide and than scaled up?

I've tried with and without canvas, but pixel edges are not sharp.
:awesome: in Lua we Löve
:awesome: Platformer Guide
:awesome: freebies
User avatar
Felix_Maxwell
Prole
Posts: 24
Joined: Wed Dec 04, 2019 3:15 pm

Re: Pixilated circle

Post by Felix_Maxwell »

I am curious: why do you want it to be one pixel and then scaled up? Normally you would just provide different arguments to love.graphics.circle:

Code: Select all

-- from docs
love.graphics.circle( mode, x, y, radius )

--example
love.graphics.circle("fill", 100, 100, [change this value])
But you probably already knew that. Why are you scaling a single pixel and also wanting it smooth?
User avatar
GVovkiv
Party member
Posts: 668
Joined: Fri Jan 15, 2021 7:29 am

Re: Pixilated circle

Post by GVovkiv »

Felix_Maxwell wrote: Wed Apr 28, 2021 6:04 pm I am curious: why do you want it to be one pixel and then scaled up? Normally you would just provide different arguments to love.graphics.circle:

Code: Select all

-- from docs
love.graphics.circle( mode, x, y, radius )

--example
love.graphics.circle("fill", 100, 100, [change this value])
But you probably already knew that. Why are you scaling a single pixel and also wanting it smooth?
I guess it's same reason why chicken cross the road...
User avatar
pgimeno
Party member
Posts: 3541
Joined: Sun Oct 18, 2015 2:58 pm

Re: Pixilated circle

Post by pgimeno »

A pixel is a pixel. There isn't enough resolution in one pixel to represent a circle [edit: or any figure other than a square] with any accuracy. The question doesn't make sense to me.
User avatar
darkfrei
Party member
Posts: 1168
Joined: Sat Feb 08, 2020 11:09 pm

Re: Pixilated circle

Post by darkfrei »

I want something like that
Image

And I think that's possible to do it just with love.graphics.circle and than scale this picture up, where one pixel of original circle will be shown as 2x2 pixels square or 3x3 pixels square.
:awesome: in Lua we Löve
:awesome: Platformer Guide
:awesome: freebies
RNavega
Party member
Posts: 235
Joined: Sun Aug 16, 2020 1:28 pm

Re: Pixilated circle

Post by RNavega »

Make sure you use nearest-neighbor / point filtering so you get those nice sharp pixels. This is done by calling :setFilter() on your canvas once after it's created, setting the 'mag' parameter (the filtering used when the canvas texture is drawn larger than it is) to "nearest".

- https://love2d.org/wiki/FilterMode

PS: Canvas is a subclass of Texture, that's why it inherits that :setFilter() function.
User avatar
pgimeno
Party member
Posts: 3541
Joined: Sun Oct 18, 2015 2:58 pm

Re: Pixilated circle

Post by pgimeno »

Ahh ok, I think in this case you need love.graphics.setLineStyle.

Unfortunately it's not likely to produce the results you expect.

Code: Select all

function love.draw()
  love.graphics.setLineStyle("smooth")
  love.graphics.circle("line", 100, 100, 12)
  love.graphics.setLineStyle("rough")
  love.graphics.circle("line", 200, 100, 12)
end
Maybe you can try Bresenham's algorithm.
User avatar
darkfrei
Party member
Posts: 1168
Joined: Sat Feb 08, 2020 11:09 pm

Re: Pixilated circle

Post by darkfrei »

I've made "nearest" and "rough", but this result is totally not what I've expected.

Code: Select all

function love.load()
	width, height = love.graphics.getDimensions( )
	scale = 32
	circle = {x=0.5, y=0.5, d=2}
	buffer = 0.5
	buffer_limit = buffer
	canvas = love.graphics.newCanvas(width/scale, height/scale)
end

function love.update(dt)
	buffer = buffer + dt
	if buffer > buffer_limit then
		circle.d = circle.d + 1
		love.graphics.setCanvas(canvas)
			love.graphics.clear()
			love.graphics.setLineStyle("rough")
			love.graphics.setDefaultFilter("nearest", "nearest")
			love.graphics.circle('line', circle.x, circle.y, circle.d/2)
		love.graphics.setCanvas()
		buffer = buffer - buffer_limit
	end
end

function love.draw()
	love.graphics.setDefaultFilter("nearest", "nearest")
	love.graphics.draw(canvas, 0, 0,0,scale, scale)
end
Attachments
2021-04-29-pixel-circle.01.png
2021-04-29-pixel-circle.01.png (15.83 KiB) Viewed 8308 times
pixel-circle-01.love
(525 Bytes) Downloaded 221 times
:awesome: in Lua we Löve
:awesome: Platformer Guide
:awesome: freebies
grump
Party member
Posts: 947
Joined: Sat Jul 22, 2017 7:43 pm

Re: Pixilated circle

Post by grump »

Setting the default filter to nearest does not affect already created textures even if you do it in every frame. The correct solution was posted already, you just need to read more carefully.
User avatar
darkfrei
Party member
Posts: 1168
Joined: Sat Feb 08, 2020 11:09 pm

Re: Pixilated circle

Post by darkfrei »

grump wrote: Thu Apr 29, 2021 8:22 am Setting the default filter to nearest does not affect already created textures even if you do it in every frame. The correct solution was posted already, you just need to read more carefully.
You are right, thanks!

Code: Select all

function love.load()
	scale = 32
	width, height = love.graphics.getDimensions( )
	canvas = love.graphics.newCanvas(width/scale, height/scale)
	canvas:setFilter("nearest", "nearest") -- doesn't notice that texture needs own filter
end
Attachments
2021-04-29-02.png
2021-04-29-02.png (5.74 KiB) Viewed 8286 times
:awesome: in Lua we Löve
:awesome: Platformer Guide
:awesome: freebies
Post Reply

Who is online

Users browsing this forum: No registered users and 9 guests