Any ideas how to make a pixelated circle?

[dandruff]

I need to draw a circle that is pixelated. So that the circle doesn't have any FSAA and looks zoomed 200% (1 pixel = 2x2 pixels)
The problem I got is that it needs to be able to change dynamicly... Does anyone have any idea how to get that result in any way?

[Buddy4point0]

Are you trying to figure out how to draw a circle on the screen in a color or are you trying to pixelate a section of an image in the shape of a circle?
and if so are you trying to add the effect over the entire screen and not on a single image?

I'll try to help you, I made a "screen effects engine" a while back that did dynamic blurs and effects like spinning the screen.

[dandruff]

I'm trying to figure out a way to draw a circle on screen that is able to resize and use any color.
Think of it like the love.graphics.circle() command, but downgraded in resolution.
I would do it by just drawing a sprite if it wasn't for the fact that it needs to be able to expand and contract without loosing the "pixel resolution".
Any ideas?

[Buddy4point0]

Lemme give this one some thought, anyone else is free to jump in if he/she can do it before me.

edit: Here's what I have so far. You can't change the resolution of the circle yet, but this will draw you a circle using cos and sin.

Code: Select all

function drawCircle(xSet, ySet, r)
	love.graphics.setLine(2,"rough")
	love.graphics.setColor(255,255,0,255)

	for a = 1,360 do
		x = math.cos(a) * r
		y = math.sin(a) * r
		love.graphics.line(xSet, ySet, xSet + x, ySet + y)
	end
end

[leiradel]

A faster way to draw a circle is to use the midpoint algorithm.

If you need a filled circle, draw an horizontal line connecting pixels mirrored on the y axe. To make a pixelized circle pretend the resolution is lower than it actually is and use rectangles to draw the points.

Cheers,

Andre

[Buddy4point0]

A faster way to draw a circle is to use the midpoint algorithm.

If you need a filled circle, draw an horizontal line connecting pixels mirrored on the y axe. To make a pixelized circle pretend the resolution is lower than it actually is and use rectangles to draw the points.

Cheers,

Andre

I see, this is definitely the way to do it. I don't think I have the math skills for figureing that one out though.
Good luck!

[dandruff]

Ah yes, midpoint algorithm seems like the best solution. Thanks!
Oh, and if I would need a filled circle, I belive I could just hide a "normal" filled
circle behind a pixelated line-circle? (As long as I dont use any alpha)

[leiradel]

Oh, and if I would need a filled circle, I belive I could just hide a "normal" filled
circle behind a pixelated line-circle? (As long as I dont use any alpha)

You mean a circle filled with one color and with the border drawn with another color? Hum, I think this could work but maybe you'll find that the regular circle will be too large or too small for the pixelated border.

You can write the drawing function so that it does both things at the same time: plot the border points with one color and connect points mirrored in the y axis with another color.

Cheers,

Andre

[Taehl]

Hm... Couldn't you just draw a circle at half the size you want to a framebuffer, set the framebuffer to use nearest-neighbor upscale interpolation, and then draw the framebuffer at double size? If so, you could generalize this into drawing a circle at size/x radius, and drawing the framebuffer at x scale.

[dandruff]

Hm... Couldn't you just draw a circle at half the size you want to a framebuffer, set the framebuffer to use nearest-neighbor upscale interpolation, and then draw the framebuffer at double size? If so, you could generalize this into drawing a circle at size/x radius, and drawing the framebuffer at x scale.

Eh... thats maybe possible, but I think that I'm close to solving this matter with the algorithm now. The only thing I don't understand is why The circle is drawn blurry for me... Here's the code:

Code: Select all

function rasterCircle(thisX, thisY, radius) --Draws a pixelated circle
	-- Initalize circle
	b = 2
	f = 1-radius
	ddFx = 1
	ddFy = -2*radius
	x = 0
	y = radius
	
	-- Set the top, down, left and right points
	superPoint(thisX, thisY+radius)
	superPoint(thisX, thisY-radius)
	superPoint(thisX+radius, thisY)
	superPoint(thisX-radius, thisY)
	
	-- Fill in the blanks
	while x < y do
		-- Do the math...
		ddFx=2*x+1
		ddFy=-2*y
		f=x*x+y*y-radius*radius+(b*2)*x-y+1
		if f >= 0 then
			y=y-b
			ddFy=ddFy+2
			f=ddFy
		end
		x=x+b
		ddFx=ddFx+2
		f=ddFx
		-- ...and plot it out!
		superPoint(thisX+x, thisY+y)
		superPoint(thisX-x, thisY+y)
		superPoint(thisX+x, thisY-y)
		superPoint(thisX-x, thisY-y)
		superPoint(thisX+y, thisY+x)
		superPoint(thisX-y, thisY+x)
		superPoint(thisX+y, thisY-x)
		superPoint(thisX-y, thisY-x)
	end
end

function superPoint(x, y) --Pixels should be 2x2!
	x=math.ceil(x)-0.5
	y=math.ceil(y)-0.5
	love.graphics.point(x, y)
	love.graphics.point(x+1, y)
	love.graphics.point(x, y+1)
	love.graphics.point(x+1, y+1)
end