C Animation Basics

Animation is showing slightly different pictures quickly so things seem to move, like a flipbook. In C you erase and redraw a shape a little farther along each time.

In this page:

Moving a Shape
Controlling Speed
Preventing Flickering
Bouncing Animations
Keyframe Based Updates

Syntax

while (condition) {
    shape(x, y, ...);   // draw
    delay(milliseconds);
    cleardevice();      // erase
    x = x + step;       // update position
}

Moving a Shape

The basic animation loop in BGI graphics is: draw a shape, pause briefly, erase that shape, update its position variables, then draw it again at the new location — repeating this cycle rapidly is what creates the illusion of smooth motion on screen.

Example: Moving a Shape

#include <graphics.h>
// Program execution starts in main()
int main() {
	initgraph(0, 0, "");
	// Declare x and set it to 0
	int x = 0;
	// Loop: repeat while the condition holds
	for (int i = 0; i < 3; i++) {
		circle(x, 100, 10);
		delay(100);
		cleardevice();
		x += 20;
	}
	closegraph();
	// Return 0 to signal that the program finished successfully
	return 0;
}

Controlling Speed

delay() pauses program execution for a number of milliseconds you specify, and it's what controls the perceived speed of an animation: a larger delay value between frames makes motion look slower, while a smaller one makes it look faster.

Example: Controlling Speed

#include <graphics.h>
int main() {
	initgraph(0, 0, "");
	circle(50, 50, 10);
	delay(500);
	closegraph();
	return 0;
}

Preventing Flickering

Calling cleardevice() to erase the whole screen between frames works, but it also causes visible flickering since the entire display blanks out for an instant; erasing only the previous shape by redrawing it in the background color, then drawing the new frame, avoids that flicker.

Example: Preventing Flickering

#include <graphics.h>
// Program execution starts in main()
int main() {
	initgraph(0, 0, "");
	// Declare x and set it to 0
	int x = 0;
	// Loop: repeat while the condition holds
	for (int i = 0; i < 3; i++) {
		setcolor(BLACK);
		circle(x, 100, 10);
		x += 10;
		setcolor(WHITE);
		circle(x, 100, 10);
		delay(100);
	}
	closegraph();
	// Return 0 to signal that the program finished successfully
	return 0;
}

Bouncing Animations

A bouncing animation tracks a direction variable (such as +1 or -1) alongside a shape's position, and reverses the sign of that direction the moment the shape's coordinates reach a screen boundary, which is what makes it appear to bounce off the edge instead of moving off-screen.

Example: Bouncing Animations

#include <graphics.h>
// Program execution starts in main()
int main() {
	initgraph(0, 0, "");
	int x = 0, direction = 1;
	// Loop: repeat while the condition holds
	for (int i = 0; i < 5; i++) {
		// Check whether x >= 100 || x <= 0
		if (x >= 100 || x <= 0) {
			direction = -direction;
		}
		x += direction * 10;
		delay(50);
	}
	closegraph();
	// Return 0 to signal that the program finished successfully
	return 0;
}

Keyframe Based Updates

Animating several shapes together just means updating every shape's position variables once per pass through the same loop, before redrawing all of them, which keeps their movements synchronized to the same timing rather than each shape running on its own independent loop.

Example: Keyframe Based Updates

#include <graphics.h>
// Program execution starts in main()
int main() {
	initgraph(0, 0, "");
	int x1 = 0, x2 = 200;
	// Loop: repeat while the condition holds
	for (int i = 0; i < 3; i++) {
		circle(x1, 100, 10);
		circle(x2, 100, 10);
		x1 += 10;
		x2 -= 10;
		delay(100);
	}
	closegraph();
	// Return 0 to signal that the program finished successfully
	return 0;
}

Chapter Quiz — Complete all 10 topics to unlock

0/10 topics done

Complete these topics first:

← Previous Lesson C Text in Graphics Next Lesson → C Mouse Input