Create Simple Animation Using OpenFrameworks

I had previously created a post on how to setup and create a simple generative image using OpenFrameworks library.

In this blogpost, I will capture what I did to generate the following video.

The above animation is generated by rotation of a set of ellipses along an eccentric axis. Each of this ellipses have different angular velocities which remains constant throughout the animation. I will explain further below.

Guide

Assuming that OpenFrameworks was installed properly, let’s create a new project inside the myApps folder using the following command.

1
projectGenerator eccentric_ellipses

The necessary files for the project will be generated inside the eccentric_ellipses folder. The 3 files we need to modify are inside the src/ folder.

There is no need to modify the main.cpp file. However, one can set the size of the output window by modifying the following method’s parameters.

1
    settings.setSize(1920, 1080);

We will modify the class ofApp in ofApp.h by adding the following variables.

1
2
3
4
5
6
7
class ofApp : public ofBaseApp{

    public:
        //Keep the original functions unmodified.
    private:
        float d, x, y, k;
};

Here,

d is the size variable which defines the size of the ellipse.
x, y are used to define the center of rotation.
k is a parameter used to control the speed of the animation.

In the ofApp.cpp file, the following functions are to be updated.

1
2
3
4
5
6
7
void ofApp::setup(){
    d = 80;
    x = ofGetWindowWidth()/2;
    y = ofGetWindowHeight()/2;
    ofSetBackgroundColor(0,0,0);
    k = 0;
}

We have initialized the variables in setup function and set the center of rotation to be the center of the window.

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
void ofApp::draw(){
    ofSetColor(230,120, 120); //Setting color of the line.
    ofNoFill(); //Setting no fill such that only lines are drawn for ellipse.
    ofSetLineWidth(3); // linewidth of the ellipse.

    ofTranslate(x,y); // Move the current co-ordinate to the center of the window
    for (int i=0; i < 36; i++){
        ofDrawEllipse(0.8*d, 0, 5*d, d); // ofDrawEllipse(x, y, width, height)
        ofRotate(k*10);
    }
}

The draw function is called for each frame. In our case, we are using for loop to draw 36 ellipses. And for each iteration, we are rotating by a factor of 10°. This means that, if the first ellipse rotates by 10°, the last ellipse would have rotated by 360°. Hence, the first ellipse will need to rotate 36 times to meet the first ellipse again in the same place. The angular velocity of the center of each ellipses can be written down as $\omega=n\cdot k\cdot 10$° per frame where $n$ is the index of the ellipse.

The width and height of the ellipse are set as a factor of d. The offset is also provided as a factor of d. Note that, since we had already translated the co-ordinates to the center, (0,0) corresponds to the center of the ellipse where either ends of the major axis are $2.5d$ away from center.

Finally, in order to actually make the animation, we need to increment k at a constant rate. This we perform in the update function (note that it can be done in draw function too).

1
2
3
4
void ofApp::update(){
    k += 0.001;
    if (k > 36) k = 0;
}

We are resetting k to 0 when it reaches 36 since all the ellipses reaches their beginning position (or in other words, rotated by 360°) for k=36.

Further, for recording the animation, I had followed this blogpost by OpenFuse.

Let me know in the comment section if you have any further queries.

Create Simple Animation Using OpenFrameworks

Guide

See Also: