How can I make kenburns effect from rect1 to rect2?

#1

Hi All.

I made kenburns effect like animated image magnification.

test
test.jpg1136×902 175 KB

At now, I am using ofScale and x0, y0.
But, I want to convert from rect1 to rect2.

How can I make kenburns effect from rect1 to rect2?

My Code:
//--------------------------------------------------------------
void ofApp::setup(){
img1.load("/Users/mun/Desktop/lena512.png");

rect1= ofRectangle(0, 0, 1024, 768);
rect2= ofRectangle(100, 100, 102, 77);

t=1;
xx= 1;
yy= 1;

}

//--------------------------------------------------------------
void ofApp::update(){

ofSleepMillis(30);
img1.update();
ss= 1 + t * 0.01;

t += 1;
if(t > 500) t = 0;

}

//--------------------------------------------------------------
void ofApp::draw(){

ofBackground(75);

ofSetColor(255, 255, 255);
//ofScale(4.0f, 4.0f, 1.0f);
ofScale(ss);
img1.draw(xx-t*0.5, yy-t*0.5);

}

Thanks.

#2

You can use ofLerp to interpolate position x, y, width and height of a rectangle

rect3.x = ofLerp(rect1.x, rect2.x, amount);
rect3.y = ofLerp(rect1.y, rect2.y, amount);
rect3.width = ofLerp(rect1.width, rect2.width, amount);
rect3.height = ofLerp(rect1.y, rect2.height, amount);

and amount is a variable between 0 and 1, where 0 is the start of your animation and 1 is the end.

1 Like
#3

Hi, @dimitre

Thanks a lot.

That’s great !!