Allegro.cc - Online Community

Allegro.cc Forums » Programming Questions » Smooth lines using Primitives addon

This thread is locked; no one can reply to it. rss feed Print
Smooth lines using Primitives addon
simast
Member #12,668
March 2011

I need to draw some rounded rectangles and the primitives addon can do that using al_draw_rounded_rectangle. However, the rounded lines are all jagged and not anti-aliased. I have found out that one solution is to enable full-screen anti-aliasing aka multisampling, but that is just not an option for me (other parts of the application need jagged things like for font glyphs and I never draw primitives directly to backbuffer).

What else can be done? Note, that I can actually do primitive line drawing and anti-aliasing using software/CPU if required, thus using something like Cairo lib is an option, but that would give me quite a large lib just for anti-aliased line support..

Mark Oates
Member #1,146
March 2001
avatar

One option is to offset the coordinates of your rounded rectangle by (+0.5, +0.5), assuming that the coordinates are presumed to be whole numbers.

--
Visit CLUBCATT.com for cat shirts, cat mugs, puzzles, art and more <-- coupon code ALLEGRO4LIFE at checkout and get $3 off any order of 3 or more items!

AllegroFlareAllegroFlare DocsAllegroFlare GitHub

james_lohr
Member #1,947
February 2002

If its using OpenGL to render the rounded rectangle, it should be possible to enable anti-aliasing. Otherwise if its old-style allegro, and just rendering to a bitmap, then you could do your own supersampling on the rounded rectangle only (i.e. render to a larger bitmap, then downscale this in software using a high quality scaling algorithm - though you won't want to be doing this every frame).

Elias
Member #358
May 2000

One option is to offset the coordinates of your rounded rectangle by (+0.5, +0.5), assuming that the coordinates are presumed to be whole numbers.

If he disables multi-sampling that wouldn't help.

[edit:]

But what should work is enable multisampling, then draw the things you want to have sharp edges on integer positions only.

--
"Either help out or stop whining" - Evert

Mark Oates
Member #1,146
March 2001
avatar

Elias said:

If he disables multi-sampling that wouldn't help.

Assuming multi-sampling is off, here's what I'm looking at:

al_draw_rounded_rectangle(100, 100, 220, 180, 7, 7, al_color_name("black"), 1.0);
{"name":"605440","src":"\/\/djungxnpq2nug.cloudfront.net\/image\/cache\/1\/a\/1ad0bc37de2f717543cb37771e0eb1ec.png","w":266,"h":207,"tn":"\/\/djungxnpq2nug.cloudfront.net\/image\/cache\/1\/a\/1ad0bc37de2f717543cb37771e0eb1ec"}605440

al_draw_rounded_rectangle(100+0.5, 100+0.5, 220+0.5, 180+0.5, 7, 7, al_color_name("black"), 1.0);

{"name":"605441","src":"\/\/djungxnpq2nug.cloudfront.net\/image\/cache\/b\/3\/b36ae9349539be0a8762b5b7cee73dc2.png","w":266,"h":199,"tn":"\/\/djungxnpq2nug.cloudfront.net\/image\/cache\/b\/3\/b36ae9349539be0a8762b5b7cee73dc2"}605441

I interpreted "the rounded lines are all jagged" to mean the jagged roundness of the first one.

--
Visit CLUBCATT.com for cat shirts, cat mugs, puzzles, art and more <-- coupon code ALLEGRO4LIFE at checkout and get $3 off any order of 3 or more items!

AllegroFlareAllegroFlare DocsAllegroFlare GitHub

weapon_S
Member #7,859
October 2006
avatar

simast said:

like for font glyphs

I think you can explicitly turn off loading ttf fonts with anti-aliasing. (Bitmap fonts shouldn't be a problem.) Draw on 'integer positions[1]' only, and it should be 'hard edge'.

References

  1. Whole numbers with an offset of 0.5 to draw in the center of the pixels.
Johan Halmén
Member #1,550
September 2001

I think the latter one of Mark's rectangles looks very good. If you want something smoother, try to draw such rectangle with any graphic editor and show us how you like it to be.

I've drawn smooth circles and arcs like this:
605447
The routine goes through all pixels in the bounding square of a circle (or an arc) and measures the distance to the center. The blackness or opacity of the contour is determined by how much it's off the radius.

~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
Years of thorough research have revealed that the red "x" that closes a window, really isn't red, but white on red background.

Years of thorough research have revealed that what people find beautiful about the Mandelbrot set is not the set itself, but all the rest.

simast
Member #12,668
March 2011

Thanks for the feedback guys,

Mark Oates suggestion of 0.5 offsets does help with making the rectangle a bit more rounded (as illustrated). As for line anti-aliasing, I am kind of postponing the idea until I really need this done and, instead of Cairo, I was thinking maybe it's worth going for platform specific code - like Win32 GDI+ line drawing.

SiegeLord
Member #7,827
October 2006
avatar

I do want to reiterate this, if this works for you:

If its using OpenGL to render the rounded rectangle, it should be possible to enable anti-aliasing.

You'd do:

glEnable(GL_LINE_SMOOTH);
glEnable(GL_POLYGON_SMOOTH);

//Draw primitives

glDisable(GL_LINE_SMOOTH);
glDisable(GL_POLYGON_SMOOTH);

"For in much wisdom is much grief: and he that increases knowledge increases sorrow."-Ecclesiastes 1:18
[SiegeLord's Abode][Codes]:[DAllegro5]:[RustAllegro]

Go to: