Jaggedness in small images and rectangles

I have some png images (size 1920 x 1080 at start drawn to 100 x 56) and rectangles (ofRectangle - 100 x 56) being drawn in my application.

When I scale up the images, the graphics/text appears fine. However, at the initial point, when the images are small in size and are being rotated (around x and y axis together), the edges of the rectangle and images (and the text in png image) appear quite jagged.

I have tried to get sharp images and rectangles by setting ofEnableSmoothing inside the testapp’s setup method, and it doesn’t give that effect. I also tried to set the window.setGlutDisplayString(“rgba double samples>=4 depth”); in main method and this didn’t change anything as well.

I tried using Arturo’s http://forum.openframeworks.cc/index.php/topic,2483.msg28454.html#msg28454"">ofAppGLFWWindow, but looks like it was built 0061 (I changed some things to make it compile but it was still giving compile issues, so I left it for now)

The config of the machine I am currently on is:
Graphics card: nVidia 8600M GT, Operating system: Windows 7 32 bit, Codeblocks
Deployment machine with have Windows 7 and Intel HD4000

I have the same project setup on Linux and that still gives the same jaggedness in small images and rectangles (Ubuntu 12.04 with no UbuntuX graphics cards drivers installed) (haven’t tried on Mac though)

Any ideas on how I could correct this jaggedness and get sharp images even if they are small in size?

I think the problem is the down scaling. For your 100x56 thumbnails, instead of drawing the large image at a smaller scale, try resize a copy of the image.


ofImage big;  
ofImage small;  
// in setup  
small.resize(100, 56);  
// in draw  


I should have guessed downscaling was the problem. I changed the images and applied resize and the images now appear fine.
However, I still have a short follow-up point about this. I tested my installation on a 80" large display and the rectangles drawn with ofRect when rotated still appeared to have some jagged unsmooth edges, which only get corrected when the rectangle has no other transformations. I was expecting sharp (vector!) graphics on the display but there’s still some refinement I could do here?

Is there a method that I might have missed to apply here that could give sharper graphics?

If you want vector graphics you need to use an SVG renderer for example. Cairo (http://cairographics.org) is one such renderer, I think there’s an ofxCairo out there.

Otherwise you need multisampling as OF deals with bitmaps. You can force anti-aliasing through your graphics card if your OS supports this (windows, linux), or do it in software (see this post for example: http://forum.openframeworks.cc/t/anti-aliasing-not-working-on-windows/5968/0 )