interpolation + multiple image edges

beginners
#1

hi all, suspect there’s no fix for this but here goes…

i am animating some images, which each have 4 other images drawn over the top of them to create a border

when i animate them, the interpolation doesn’t always move the image and the borders at once, for example, the image will move a pixel, then the borders.

can’t seem to find anything in my code that i’m missing. the border images are textured with an alpha channel - so outlining them with a rect and enabling smoothing is a no go if that would normally help

anything to check i may have missed? or any other workaround for this? using textures is not an option i think, as the images need to be reloaded dynamically

cheers.

#2

took another stab at this but still no luck. here’s what i’m doing:
-translating to location with smooth float values
-draw image at 0,0

then i draw borders over the top with:

  
  
float half_height = image.height*0.5;  
borders[0].draw(x,0-half_height,w,h);  
borders[1].draw(x,half_height,w,h);

the borders still step out of time with the image. any advice? is the only option really to have the borders as part of the image file?

any help hugely appreciated (deadline this week!)

cheers
nay.

#3

can you post either (a) a simple code example (src + data) of this happening or (b) a video describing this – I’m finding it hard to visualize what the problem is and maybe if people can see it (since it’s a visual bug) they can help better. Even some screenshots, etc…

thanks!!
zach

#4

thanks zach
isolated the prob in a demo app
src and data folder are in the archive here:
http://renechristen.net/temp/stepping-prob.zip

looks like this may just come down to not being able to have smoothing enabled for filled shapes. but as you’ll see from the app, adding a smooth outline won’t help in this case

cheers
nay.

#5

I got it up and running but I’m afraid I don’t see the problem. when the image and borders don’t move in sync how do you see that?

for example, if I draw the inner photo smaller, like this:

  
  
void testApp::draw_photo  (float y){  
  
	glPushMatrix();  
  
		glTranslatef(ofGetWidth()/2,y,0);  
  
		ofSetColor(0xFFFFFF);  
		ofSetRectMode(OF_RECTMODE_CENTER);  
		pic.draw(20,20,60,60);  
  
  
		ofEnableAlphaBlending();  
		//BORDERS:  
		int border_overlap = 2;  
		//top:  
		border.draw(0,0 - border_overlap -pic.height/2);  
		//bottom:  
		border.draw(0,pic.height/2 + border_overlap);  
  
		glPushMatrix();  
			glRotatef(90,0,0,1);  
			//right:  
			border.draw(0,0 - border_overlap -pic.width/2);  
			//left:  
			border.draw(0,border_overlap + pic.width/2);  
		glPopMatrix();  
		ofDisableAlphaBlending();  
	glPopMatrix();  
  
}

they seem to move in sync to me – I’ve slowed down the sin / y movements and I see them making the pixel movements completely in sync. my eyes could be deceiving me, but that’s what I see.

maybe you can try putting in a sharp edged picture, like a grid as the interior shot so you can see the pixel movements on the interior more clearly? The interior shot now (of the gymnast) it pretty hard to perceive the movements.

take care,
zach

#6

just removed the border overlap and took a look and you’re right, they do move in sync. i just thought they were off because it looks as if the content of the image doesn’t always move in perfect sync with the edge of the image with a low framerate.

if you make
border_overlap = border.height;
you might be able to see what i mean

with a fast framerate/movement this is hardly noticeable. i guess my prob is that the project i’m using this in has a framerate of 25. can you suggest a way to make that animation look any smoother with such a slow framerate? it seems like the resolution of the sine table should be good enough (i’m running it on fast PCs with a 512 mb nvidia card).

cheers,
nay.