FLTK simple animation

Question

I can successfully compiled and run the Hello World code. Now I want to do something like animation.

I first create a rectangle class to implement draw() from Fl::widget

class myRect: public Fl_Widget {
private:
    Fl_Color color;
    void draw(){
        fl_color(color);
        fl_rectf(x(),y(),w(),h(),color);
    }
public:
    myRect(int X,int Y,int W,int H, Fl_Color c) : Fl_Widget(X,Y,W,H),color(c) {}
};



int main (int argc, char ** argv)
{
    Fl_Window *window = new Fl_Window (300, 180, "FLTK Test");

    vector<myRect*> allRect;
    for(int i=0; i<10; ++i){
        allRect.push_back(new myRect ((i*10)%100,100,50,50,i%256));
    }
    window->end();
    window->show();

    return Fl::run();
}

The code above can run as I expected. But Now I want to show the rectangles one by one, with some time interval such as 1 second. Make it just like animation.

I have read the official document but I still have no idead about that. Please give me some information. Thanks !!

Thanks to DejanLekic, I revised my code as below:

#include <iostream>
#include <vector>
#include <FL/Fl.H>
#include <FL/Fl_Widget.H>
#include <FL/Fl_Double_Window.H>
#include <FL/fl_draw.H>

using namespace std;

class myRect: public Fl_Widget {
private:
    Fl_Color color;
    void draw(){
    fl_color(color);
    fl_rectf(x(),y(),w(),h(),color);
}

public:
    myRect(int X,int Y,int W,int H, Fl_Color c)
        :Fl_Widget(X,Y,W,H),color(c) {}
};

vector<myRect*> allRect;

void winUpdate(void *data)
{
    static unsigned i = 0;
    Fl_Double_Window *o = (Fl_Double_Window*)data;
    if(i < allRect.size()){
        o->add(allRect[i]);
        if(i>=3) o->remove(allRect[i-3]);
        o->redraw();
        Fl::add_timeout(0.5,winUpdate,data);
        ++i;
    }
}

int main (int argc, char ** argv)
{
    for(int i=0; i<8; ++i){
        allRect.push_back(new myRect(i*30,i*30,50,50,i));
    }
    Fl_Double_Window *window = new Fl_Double_Window (400, 400, "FLTK Test");
    Fl::add_timeout(2,winUpdate,window);
    window->end();
    Fl::visual(FL_DOUBLE|FL_INDEX);
    window->show();
    return Fl::run();
}

It seems to run well, but I'm not sure whether it is correct or not. If there is any problem, please let me know. Thanks.

score 1 · Accepted Answer · answered May 28 '12 at 18:01

1

Cory, you are on the right path.

Here is a complete example how to do a simple 2D animation using FLTK's drawing capabilities: http://seriss.com/people/erco/fltk/#AnimateDrawing

Similar thing using OpenGL: http://seriss.com/people/erco/fltk/#OpenGlInterp

The key, in both examples is in the Fl::add_timeout(0.25, Timer_CB, (void*)this); line, and in the Timer_CB() static (callback) method. Both examples are nice and easy and I am confident you will understand them instantly.

answered May 28 '12 at 18:01

DejanLekic

18,787
4
46
77

Thanks, it really helpful. But I think it a little complicated. It need to modify the class. Could it be simpler ? For example, "show_and_pause(1.0)" after creating a rectangle. In the loop it create a rectangle, show it and pause 1 second and then draw next until loop break. Is it possible ? I've tried, but the window freeze and crash :( – Cory Lee May 29 '12 at 06:50
It is not complicated. That is actually the simplest way to make a video that does not flicker. And yes, sure it is possible but you have to do it in another thread because if you pause the main (GUI) thread, it will freeze the whole application for 1s. It is not only with FLTK, it is the case with ANY GUI toolkit. More about multithreading: http://www.fltk.org/doc-1.1/advanced.html . An alternative (simpler) is to call `fltk::check();` in your time-consuming loop. – DejanLekic May 29 '12 at 08:17
Could you please revise my code ? Sorry I still have no idea. In the for loop I create 10 rectangles, and it is just on the screen. How can I use callback to add them one by one just like animation ? Need I create a global "show-list" and in the callback function access it by index 0,1,2...9 ? – Cory Lee May 29 '12 at 09:13
You have enough to solve your problem from the examples I gave you, and from my comments here. Play with them, analyse the code and You will easily make your rectangle-animation. – DejanLekic May 29 '12 at 09:23

FLTK simple animation

1 Answers1

Linked