Smoother image edges on tween

Perhaps I’m just being very picky but I’m wondering if there is a way to get around what I am experiencing.

Basically I have images that zoom in/out and also are displayed moving across the screen.

I am using ofxTween to handle the movement of these images across the screen over time.

Basically the problem I am experiencing is that the edges of the image, especially when the size of image is being zoomed from small to large kind of stutter, that is the edge of the image doesn’t grow smoothly, it is a little jumpy.

I am being pretty picky here, we are talking maybe 1 pixel it jumps up and then appears to jump back.

This can be seen by downloading the example from…-est.tar.gz note you will need to have the ofxTween addon.

If you watch the top edge of the image that is zooming in, you will note that its not smooth. Hopefully this makes sense?

Anyone have any ideas about what I can do to make the edge of that image smoother/softer while it is growing and not jumpy?

I have tried the following, but nothing seems to improve it:

  • Using glfw with samples=8 or even 12 (wasn’t really sure if this would help me or not, doesn’t seem to but it could be my setup?)
  • Rather than using a multiplier (see the code) using a larger value so that there can be more floating point accuracy through the tween. I don’t think this will help by itself…
  • Note that I am enlarging an image that is 1920x1080, but I have tried with smaller images and I get the same effect.
  • Increasing the frame rate

Note I am using Ubuntu Karmic 9.10 on a Dell Inspiron 9400 with ATI Technologies Radeon Mobility X1400 graphics.

try adding a transparent border around your images, this should solve the bumbiness. This is just a wild guess, I didn’t download your test-case.

Thanks, that works quite well. Obviously the bigger the image gets the better it works.

Was wondering if anyone has already created a subclass of ofImage which adds the borders on load and re-calculates coordinates accordingly for draw?

Generally for this stuff I’ve found the best solution is to turn on VSync and set anti-aliasing on.

I just ran your example, I have an Nvidia 9600M GT card, and by turning VSync and anti-aliasing to max. for my card I got pretty smooth results. Occasionally there’s a almost unnoticeable hiccup in the tween which I’m guessing is from process switch or something, but it’s very hard to detect and otherwise looks pretty good.

I’m forcing anti-aliasing on the card, maybe you could try this instead of glfw if you are not sure the anti-alising is working.

I’m forcing anti-aliasing on the card, maybe you could try this instead of glfw if you are not sure the anti-alising is working.

When you say forcing anti-aliasing on the card, are you talking about doing the following?

ofAppGlutWindow window;  
window.setGlutDisplayString("rgba double samples>=4");  
ofSetupOpenGL(&window, 1920, 1080, OF_GAME_MODE);  

When I do this it complains as follows:

freeglut (openframeworks): WARNING - Display string token not recognized:  samples>=4  

I’m guessing that my graphics card is not up to the task…

Is this what you mean or is there another way to force anti-alias?

No I do it through the Nvidia Control Panel. With Nvidia cards under Linux you can also do it via environment variables. For ATI cards to install the ATI control panel I think you need to do something like:

sudo apt-get install fglrx-amdcccle

Do a search for your distribution and version and you should find the right package.
Not exactly sure though, I’ve never had an ATI card on any of my Linux machines.

Looking at the specs for the X1400, looks like it supports 2x/4x/6x Anti-Aliasing modes:…-specs.aspx

Thanks this did the trick on my development box (looks fantastic now) but unfortunately on the computer that is in the exhibition the graphics card is no longer supported by ati :frowning:

I was able to get around some other issues tho by increasing the framerate. I was getting a strange tear when sliding some images across the screen, say every couple of seconds I would get a tear, increasing the frame rate from 30 to 120 fps fixed the issue however or at least appeared to.

Thanks for your help!

If you enable VSync then you should not need to set the framerate as it will be locked to the refresh rate of the screen (usually 60fps). If you set the fps to 30 then you will probably see some screen tearing. So in general, if you use VSync, then you don’t need to set the framerate.

Ah thanks grimus, so, if I set the framerate after turning on vsync would this essentially cancel out the setting of vsync or is vsync “sticky” for the life of the app?

Thanks for all your help!

The ofSetFrameRate function determines the amount of time an app sleeps while it is waiting for the next frame to be displayed. This is not sync’ed with the VSync option, which is done by the grapics card. If you set a frame rate lower that the screen refresh rate, then your app will idle unnecessarily and might lose sync with the screen redraw, therefore exhibiting screen tearing. Hope that makes sense…