Interactive Guide to Turbo-C Graphics

An exploration of the concepts from the classic graphics.h library

Welcome to the Guide

This application translates the core topics of the Turbo-C graphics language into an interactive, explorable format. Use the navigation above to move between sections and click on any topic to reveal more details.

What Was Turbo-C Graphics?

The Turbo-C graphics.h library was a popular and simple way for students and hobbyists in the late 1980s and 90s to learn computer graphics. It provided a set of functions to draw pixels, lines, circles, and rectangles, and to handle colors and basic animations, all within the MS-DOS environment.

Historical Context

  • Turbo-C graphics.h was a lightweight graphics library bundled with the Turbo-C compiler.
  • It was widely used in the late 1980s and 1990s, especially in educational settings and hobbyist projects.
  • It operated within the MS-DOS environment, meaning it ran on early personal computers using command-line interfaces.

Why It Still Matters?

Although obsolete today, the guide emphasizes that Turbo-C graphics teaches fundamental concepts:

  • Primitives: How to build visuals from basic shapes.
  • Transformations: How to move, scale, and rotate objects.
  • Animation: How to simulate motion using variable updates and redraw cycles.
  • These ideas are foundational for understanding modern graphics engines, game development, and data visualization tools.

Structure: Program Skeleton

Minimal Turbo-C Graphics Program

Below is a minimal program skeleton using the classic graphics.h API. Each line includes an inline comment that explains its purpose.

#include <graphics.h>   // Provides the Turbo-C graphics API (putpixel, line, circle, etc.)
#include <stdio.h>      // Standard I/O (printf, etc.)
#include <conio.h>      // Console I/O helpers (getch)

int main() {
    int gd = DETECT, gm;                  // gd: graphics driver, gm: graphics mode; DETECT auto-selects driver
    initgraph(&gd, &gm, "");            // Initialize the graphics system and set video mode
    /* --- Place drawing calls here (putpixel, line, circle, rectangle, etc.) --- */
    getch();                              // Wait for a key press so the window stays visible
    closegraph();                         // Shut down graphics mode and restore normal console
    return 0;                             // Exit the program
}

Program structure (overview)

This program demonstrates the typical lifecycle of a Turbo-C graphics application:

  1. Includes: Header files bring in the graphics API and any standard helpers you need.
  2. main: Entry point where you initialize the graphics driver and mode with initgraph().
  3. Drawing: Call drawing routines (putpixel, line, rectangle, circle, etc.) while the graphics mode is active.
  4. Wait: Use getch() or a delay to allow the user to view the output.
  5. Cleanup: Call closegraph() to return the machine to text mode and free resources.
Key graphics functions & keywords

DETECT — A special constant passed to initgraph() that tells the library to auto-detect the best graphics driver for the environment.

initgraph(int *gd, int *gm, const char *path) — Initializes the graphics system. Parameters are pointers to driver and mode variables; the path is an optional driver path in older implementations.

closegraph() — Restores the display to the original text mode and releases graphics resources.

putpixel(int x, int y, int color) — Draws a single pixel at coordinates (x,y) using the specified color.

line(int x1, int y1, int x2, int y2) — Draws a straight line between two points; often implemented via Bresenham's algorithm.

rectangle(int x1, int y1, int x2, int y2) — Draws an axis-aligned rectangle outline defined by the two corner coordinates.

circle(int x, int y, int r) — Draws a circle with center (x,y) and radius r using an efficient midpoint algorithm.

setfillstyle(), floodfill() — Used together to fill shapes with a pattern or color.

getimage(), putimage() — Capture and restore rectangular regions of the screen (useful for sprites and saving parts of the display).

cleardevice() — Clears the entire graphics screen (useful between animation frames).

getch() — Waits for a key press (commonly used to pause the program so the output can be inspected).

1. Fundamentals: The Building Blocks

This section covers the absolute basics. "Primitives" are the foundational elements like variables and operators that define *what* you can draw, while "Plotting & Transformations" cover the actions of *how* you draw and manipulate those shapes on the screen.

Turbo-C Graphics Language — Detailed Topics

Primitives (Constants, Actions, Operators, Variables)

Primitives are the smallest building blocks: constants (predefined colors and styles), actions (system calls), the C operators used to compute positions, and the variables that hold state. Examples:
• RED, BLUE — Used to specify colors and styles in drawing functions.
• initgraph(), closegraph() — actions to start/stop the driver. These are essential for setting up and tearing down the graphics environment.
• Operators like + and * are used to compute coordinates (e.g., centerX = x + width/2).
• Variables store coordinates, sizes, colors, and animation state. Store dynamic state like coordinates, sizes, colors, and animation parameters. (for example int x, y, radius, color;).

Plotting & Geometric Transformations

Plotting functions draw primitives on the screen. Typical functions include:
• putpixel(x, y, color)
• line(x1, y1, x2, y2)
• rectangle(x1, y1, x2, y2)
• circle(x, y, r)
Transformations are implemented by changing coordinates before drawing:

•

Translation: (x', y') = (x + tx, y + ty)

•

Scaling: (x', y') = (cx + sx*(x-cx), cy + sy*(y-cy))

•

Rotation: (x', y') = (cx + (x-cx)*cosθ - (y-cy)*sinθ, cy + (x-cx)*sinθ + (y-cy)*cosθ)

In Turbo-C, transformations were often done manually by changing the variables used for plotting.
Translation (Moving): Adding an offset to an object's (x, y) coordinates before redrawing it.
Scaling (Resizing): Multiplying an object's width and height by a factor.
Rotation: Applying trigonometric functions (sine, cosine) to an object's coordinates to calculate its new position around a central point. 

Click a function above to view a short C example.

Primitives

These are predefined values that control the graphics system.
Constants: Values for colors (e.g., RED, BLUE), fill patterns, and line styles.
Actions: Functions that initialize the system (e.g., initgraph()) or close it (e.g., closegraph()).

These aren't new operators, but rather how standard C operators (like +, -, *, /) are used to calculate coordinates, sizes, and new positions for drawing and animation.

Variables are essential for dynamic graphics. They store screen coordinates (x, y), object properties (width, height, radius), and state (current color, position, velocity). Animation is impossible without them.

Plotting & Transformations

This refers to the core drawing commands:
• putpixel(x, y, color): The most basic, draws a single dot.
• line(x1, y1, x2, y2): Draws a line between two points.
• rectangle(x1, y1, x2, y2): Draws a box.
• circle(x, y, radius): Draws a circle.
• setfillstyle() & floodfill(): Used to fill enclosed shapes with color.

In Turbo-C, transformations were often done manually by changing the variables used for plotting.
Translation (Moving): Adding an offset to an object's (x, y) coordinates before redrawing it.
Scaling (Resizing): Multiplying an object's width and height by a factor.
Rotation: Applying trigonometric functions (sine, cosine) to an object's coordinates to calculate its new position around a central point.

2. Core Concepts: Structure & Motion

Once you have the fundamentals, the next step is organization and dynamism. "Display Subroutines" explore how to create reusable drawing functions, while the "Concept of Animation" shows how to string individual drawings together to create the illusion of movement.

Display Subroutines

These are simply C functions that bundle drawing commands. Instead of writing the code for a car 10 times, you would create a single function: void drawCar(int x, int y, int color).

This function would contain all the line() and circle() calls needed to draw a car at the given (x, y) position. This makes code reusable, readable, and much easier to manage, especially for complex scenes or animations.

Display Subroutines Example: Drawing a Car

This example demonstrates how to bundle multiple drawing commands into a reusable function. The drawCar() function uses rectangles, circles, and fill operations to draw a simple car. Instead of repeating this code multiple times, you call the function with different positions and colors.

Interactive Demos & Turbo-C Program Screen

Live demos are grouped here so you can run the animation, inspect the step log, and view a small Turbo-C program that implements the same idea.

Concept of Animation

Steps will appear here...

Saving & Loading

Towers of Hanoi

Steps will appear here...
Demo status: initializing...

Turbo-C Example (Program Screen)

// Select a demo and click "Show Code" to view a small Turbo-C program here.

Concept of Animation

Animation in Turbo-C was a manual process that created an illusion of motion. It was achieved through a simple, repetitive loop:

  1. Draw: Call your display subroutines (e.g., drawCar(x, y)) to draw the object at its current position.
  2. Delay: Use a function like delay(milliseconds) to pause execution briefly, allowing the human eye to see the frame.
  3. Clear: Erase the object by drawing it again in the background color, or clear the entire screen with cleardevice().
  4. Update: Change the variables that control the object's state (e.g., x = x + 1 to move it to the right).
  5. Repeat: Loop back to step 1.

3. Applications: Bringing it to Life

This is where the concepts come together. We'll look at how to persist your creations by saving and loading them, and explore how animation can be used to visualize complex processes, like sorting algorithms or the classic "Towers of Hanoi" puzzle.

Saving, Loading & Printing

Turbo-C provided functions to save a part of the screen to disk and load it back later.

• getimage() was used to capture a rectangular area of the screen and store it in memory.
• putimage() would draw that stored image back onto the screen.

By writing the in-memory data to a file, you could "save" an image. Reading it back from the file and using putimage() would "load" it. "Printing" was more complex, often requiring third-party libraries or writing raw data to the printer port.

Animated Sorting

The same animation loop could be used to visualize algorithms. For a Bubble Sort, you would draw an array of vertical bars representing numbers. When the algorithm swapped two numbers, you would animate the two corresponding bars moving to their new positions, helping the programmer "see" the algorithm work.

Bubble Sort — Visualization & Localized Redraw

Visualizing sorting algorithms is a classic application of BGI, translating computational complexity and data rearrangement into dynamic graphical changes. The Bubble Sort algorithm, known for its iterative comparison and swapping of adjacent elements, serves as a strong pedagogical example.

A. Visualization Mapping

Array elements are represented as vertical bars: the bar height maps to the numerical value, and the horizontal x-position maps to the index. During comparisons, the two bars are highlighted; on swaps the bars are redrawn at their new positions.

B. Implementation Strategy

To avoid flicker and reduce CPU work, the demo uses localized redraw: only the bar rectangles for indices being compared/swapped are erased and redrawn. A short delay()-like pause is used between compare/erase/draw steps to make the animation perceptible.

Click Shuffle to randomize, then Start to animate Bubble Sort.
Initial values will appear here.
// Click "Show C Code" to view the Bubble Sort example here.