Image draw and resize animation

beginners
#1

Hi,
I need to display a grid of thumbnails (of image).
When the user taps on a thumbnai I would like to perform the following animation:

  • the thumbnail shall move the center of the screen
  • the thumbnail size shall increase and the containing image shall be resize accordingly.

I’m using using the following ofImage method to perform the animation:

  • draw
  • resize

The animation is not so smooth and the problem is the resize method since, as I have read in this forum, is run on CPU.

I would like to know it there is an alternative approach in order to implement an animation as described above with a better perfomance.

Thanks
Alessandro

#2

Hi!
I think resize isn’t needed, since you can use

draw(x, y, w, h)

I tried to make something that moves and scales at the same time with this class:

class movingImage: public ofImage{
public:
    movingImage(ofVec2f loc, ofVec2f size){
        this->loc = loc;
        this->size = size;
        fullSize = ofVec2f(400, 400);
        endPos = ofVec2f(50, 50);
    }
    ofVec2f loc, size, fullSize, endPos;
    void display(){
        draw(loc.x, loc.y, size.x, size.y);
    }
    bool bGrow = false;
    bool bMove = false;
    void update(){
        if(bGrow){
            if(size == fullSize){
                bGrow = false;
            } else{
                size += ofVec2f(5, 5);
            }
        }
        if(bMove){
            if(loc.distance(endPos) < 2){
                bMove = false;
            } else{
                loc -= ofVec2f(1, 1);
            }
        }
    }
};

And this in ofApp.h

movingImage* i;

ofApp.cpp

void ofApp::setup(){
    ofSetFrameRate(30);
    ofSetWindowShape(500, 500);
    ofBackground(200);
    i = new movingImage(ofVec2f(100, 100), ofVec2f(200, 200));
    i->load("test.jpg");
    i->bGrow = true;
    i->bMove = true;
}

//--------------------------------------------------------------
void ofApp::update(){
    i->update();
}

//--------------------------------------------------------------
void ofApp::draw(){
    i->display();
}

I’m not sure what you mean by not so smooth, but in my implementation I see some noise in the scaling picture, but I think that’s inevitable.

Oh, and if you’re looking for a (way) better implementation of moving (and scaling) an object, take a look at the examples in Nature Of Code by Daniel Shiffman.

1 Like
#3

Thanks, I will try your solution, but the image has to been resized since its size is bigger the rect size used to display on the app.