## Any ideas how to make a pixelated circle?

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

### Any ideas how to make a pixelated circle?

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

### Re: Any ideas how to make a pixelated circle?

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 ■
dandruff
Prole
Posts: 38
Joined: Fri Jan 15, 2010 1:39 pm

### Re: Any ideas how to make a pixelated circle?

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

### Re: Any ideas how to make a pixelated circle?

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 ■
Party member
Posts: 184
Joined: Thu Mar 11, 2010 3:40 am
Location: Lisbon, Portugal

### Re: Any ideas how to make a pixelated circle?

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

### Re: Any ideas how to make a pixelated circle?

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 ■
dandruff
Prole
Posts: 38
Joined: Fri Jan 15, 2010 1:39 pm

### Re: Any ideas how to make a pixelated circle?

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

### Re: Any ideas how to make a pixelated circle?

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
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?

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+.
dandruff
Prole
Posts: 38
Joined: Fri Jan 15, 2010 1:39 pm

### Re: Any ideas how to make a pixelated circle?

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
ddFx = 1
x = 0

-- Set the top, down, left and right points

-- Fill in the blanks
while x < y do
-- Do the math...
ddFx=2*x+1
ddFy=-2*y
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

### Who is online

Users browsing this forum: No registered users and 8 guests