Intermediate · Tutorial

Animation in graphics.h — Moving Objects with delay()

Learn how to create simple animations in graphics.h using cleardevice(), delay(), and loop-based redrawing. This tutorial builds two complete animation programs: a bouncing ball and a moving car. Both programs run in the online compiler — no local Turbo C required.

How Animation Works in graphics.h

graphics.h does not have a built-in animation system. Animation is achieved by repeating a simple three-step loop:

🎨

Draw

Draw the shape at position (x, y)

⏱

Wait

Call delay() to pause for N milliseconds

🗑

Erase & Move

Call cleardevice(), update (x, y), repeat

Each loop iteration draws the object at a slightly different position, creating the illusion of motion. The key functions are cleardevice() to erase the screen and delay(ms) to control the frame rate.

⚠ Frame rate: delay(30) gives approximately 33 frames per second. Smaller values = faster animation. Larger values = slower animation.

Key Functions for Animation

Function	Header	Purpose
`cleardevice()`	graphics.h	Clears the entire graphics window (erases all drawn content)
`delay(ms)`	dos.h	Pauses execution for the given number of milliseconds
`kbhit()`	conio.h	Returns 1 if a key has been pressed — used to stop the animation loop
`getmaxx()`	graphics.h	Returns the maximum X coordinate of the window (useful for boundary detection)
`getmaxy()`	graphics.h	Returns the maximum Y coordinate of the window

Tutorial 1 — Bouncing Ball Animation

This program draws a filled circle that moves across the screen. When it reaches the edges, the direction reverses — creating a bouncing effect. Press any key to stop the animation.

How the Bounce Logic Works

Variables dx and dy control the X and Y speed and direction.
When x + radius reaches the right edge, dx is negated (reversed).
Same logic applies for the top, bottom, and left edges.
The ball is redrawn at the new position each frame after cleardevice().

Complete Bouncing Ball Program

#include <graphics.h>
#include <conio.h>
#include <dos.h>

int main() {
    int gd = DETECT, gm;
    initgraph(&gd, &gm, "");

    int maxX = getmaxx();
    int maxY = getmaxy();
    int radius = 20;

    int x = 100, y = 100;
    int dx = 4, dy = 3; /* speed: 4px/frame horizontally, 3px/frame vertically */

    while (!kbhit()) {
        /* Draw ball */
        setfillstyle(SOLID_FILL, YELLOW);
        setcolor(YELLOW);
        fillcircle(x, y, radius);

        delay(20); /* ~50 fps */

        /* Erase */
        cleardevice();

        /* Update position */
        x += dx;
        y += dy;

        /* Bounce off edges */
        if (x - radius <= 0 || x + radius >= maxX) dx = -dx;
        if (y - radius <= 0 || y + radius >= maxY) dy = -dy;
    }

    closegraph();
    return 0;
}

Click Run to see the bouncing ball in the browser.

💡 Try this: Change dx and dy to different values to control the angle of the bounce. Set both to the same value for a perfect 45° bounce.

Tutorial 2 — Moving Car Animation

This program draws a simple car shape (body + wheels) that moves from left to right. When it exits the right edge, it reappears from the left — creating a continuous looping animation.

Moving Car — Complete Program

#include <graphics.h>
#include <conio.h>
#include <dos.h>

void drawCar(int x, int y) {
    setcolor(WHITE);

    /* Car body */
    rectangle(x, y, x + 140, y + 50);

    /* Car cabin */
    rectangle(x + 20, y - 30, x + 110, y);

    /* Wheels */
    setfillstyle(SOLID_FILL, DARKGRAY);
    fillellipse(x + 25, y + 50, 18, 18);
    fillellipse(x + 115, y + 50, 18, 18);
}

int main() {
    int gd = DETECT, gm;
    initgraph(&gd, &gm, "");

    int maxX = getmaxx();
    int x = 0;

    while (!kbhit()) {
        /* Draw road */
        setcolor(DARKGRAY);
        setfillstyle(SOLID_FILL, DARKGRAY);
        bar(0, 320, maxX, 400);

        /* Draw dashed center line */
        setcolor(YELLOW);
        for (int i = 0; i < maxX; i += 60) {
            line(i, 360, i + 30, 360);
        }

        /* Draw car */
        drawCar(x, 270);

        delay(25);
        cleardevice();

        /* Move right; wrap around when off screen */
        x += 5;
        if (x > maxX) x = -160;
    }

    closegraph();
    return 0;
}

Click Run to see the car animation in the browser.

Animation Tips and Performance

Use setvisualpage() / setactivepage() for flicker-free double-buffered animation (advanced technique — see Advanced Functions).
Keep cleardevice() inside the loop — forgetting it leaves ghost images from previous frames.
Reduce delay() value for faster animations — but going below 10ms may not improve speed due to system timer limits.
Use kbhit() instead of getch() so the animation runs until the user presses a key, rather than pausing immediately.
getmaxx() / getmaxy() give the screen boundaries — always use them instead of hardcoded values like 640/480 for portable code.

Continue Learning Try the Patterns & Designs tutorial next, or explore the full Advanced Functions reference for double-buffering and write modes.