Any ideas how to make a pixelated circle?

General discussion about LÖVE, Lua, game development, puns, and unicorns.
User avatar
dandruff
Prole
Posts: 38
Joined: Fri Jan 15, 2010 1:39 pm

Any ideas how to make a pixelated circle?

Post by 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?
User avatar
Buddy4point0
Prole
Posts: 35
Joined: Wed Jan 12, 2011 9:29 pm
Location: Virginia

Re: Any ideas how to make a pixelated circle?

Post by 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.
╚»ßuddy4point0 ■
User avatar
dandruff
Prole
Posts: 38
Joined: Fri Jan 15, 2010 1:39 pm

Re: Any ideas how to make a pixelated circle?

Post by 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?
User avatar
Buddy4point0
Prole
Posts: 35
Joined: Wed Jan 12, 2011 9:29 pm
Location: Virginia

Re: Any ideas how to make a pixelated circle?

Post by 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
Last edited by Buddy4point0 on Thu Feb 10, 2011 12:10 pm, edited 2 times in total.
╚»ßuddy4point0 ■
User avatar
leiradel
Party member
Posts: 184
Joined: Thu Mar 11, 2010 3:40 am
Location: Lisbon, Portugal

Re: Any ideas how to make a pixelated circle?

Post by 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
User avatar
Buddy4point0
Prole
Posts: 35
Joined: Wed Jan 12, 2011 9:29 pm
Location: Virginia

Re: Any ideas how to make a pixelated circle?

Post by Buddy4point0 »

leiradel wrote: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!
╚»ßuddy4point0 ■
User avatar
dandruff
Prole
Posts: 38
Joined: Fri Jan 15, 2010 1:39 pm

Re: Any ideas how to make a pixelated circle?

Post by 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)
User avatar
leiradel
Party member
Posts: 184
Joined: Thu Mar 11, 2010 3:40 am
Location: Lisbon, Portugal

Re: Any ideas how to make a pixelated circle?

Post by leiradel »

dandruff wrote: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
User avatar
Taehl
Dreaming in associative arrays
Posts: 1024
Joined: Mon Jan 11, 2010 5:07 am
Location: CA, USA
Contact:

Re: Any ideas how to make a pixelated circle?

Post by 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.
Earliest Love2D supporter who can't Love anymore. Let me disable pixel shaders if I don't use them, dammit!
Lenovo Thinkpad X60 Tablet, built like a tank. But not fancy enough for Love2D 0.10.0+.
User avatar
dandruff
Prole
Posts: 38
Joined: Fri Jan 15, 2010 1:39 pm

Re: Any ideas how to make a pixelated circle?

Post by dandruff »

Taehl wrote: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
Post Reply

Who is online

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