C481 B581 Computer Graphics
Dana Vrajitoru
2D Animation in OpenGL
Introduction to 2D Animation
- Fast changes in the system that happen even without user input.
- Non-animated apps - reactive applications.
- Requires a form of infinite loop - a Timer.
- Usually achieved by a set of functions or class methods that
describe the changes to each object in a small unit of time or delta t -
called update or move.
In OpenGL
- Two types of animation:
- glutIdleFunc(display);
Calls the function (display) at regular intervals.
- glutTimerFunc(msecs, anim, value);
void anim(int value);
Triggers an event calling the function anim after the given
number of ms and passes it the value as argument.
Generic Idle Function
void idleAnim()
{
for (each object)
object.update();
display();
}
Hard to control the animation speed - platform dependent.
Generic Timer Callback
void anim(int value)
{
if (value) {
for (each object)
object.update();
display();
glutTimerFunc(msecs, anim, newValue);
}
}
Double Buffers
- OpenGL can use two rendering buffers.
- One is displayed while the other one is being rendered.
- Speeds up animations.
- In init:
glutInitDisplayMode(GLUT_DOUBLE | GLUT_RGB | ...);
- In display, at the very end:
glutSwapBuffers();
Other Timers
- In Flash / ActionScript:
- var myTimer:Timer = new Timer(200); // ms
- myTimer.addEventListener(TimerEvent.TIMER, callback);
- myTimer.start(); ...
- myTimer.stop();
- In JavaScript: setTimeout(), setInterval().
- In Unity:
Update() defined in every class;
FixedUpdate() - called before updating the physics engine.
2D Collision Detection
- Two intervals [x1, x1'] and [x2, x2'] collide if
- x1 <= x2 <= x1' or x2 <= x1 <= x2'
- ((x2-x1)*(x2-x1') < 0 && (x1-x2)*(x1-x2') < 0) if you don't know
that x1 <= x1' and x2 <= x2'.
- Two boxes collide if they collide both over x and over y.
- Two circles collide if the distance between their centers is smaller
than the sum of the radii.