LÖVE

Posted: **Thu Feb 10, 2011 9:41 am**

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?

Posted: **Thu Feb 10, 2011 10:22 am**

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.

Posted: **Thu Feb 10, 2011 10:34 am**

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?

Posted: **Thu Feb 10, 2011 11:44 am**

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

Posted: **Thu Feb 10, 2011 12:10 pm**

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

Posted: **Thu Feb 10, 2011 12:20 pm**

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!

Posted: **Thu Feb 10, 2011 12:51 pm**

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)

Posted: **Thu Feb 10, 2011 1:12 pm**

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

Posted: **Thu Feb 10, 2011 1:42 pm**

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.

Posted: **Thu Feb 10, 2011 1:55 pm**

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

LÖVE

Any ideas how to make a pixelated circle?

Any ideas how to make a pixelated circle?

Re: Any ideas how to make a pixelated circle?

Re: Any ideas how to make a pixelated circle?

Re: Any ideas how to make a pixelated circle?

Re: Any ideas how to make a pixelated circle?

Re: Any ideas how to make a pixelated circle?

Re: Any ideas how to make a pixelated circle?

Re: Any ideas how to make a pixelated circle?

Re: Any ideas how to make a pixelated circle?

Re: Any ideas how to make a pixelated circle?