Computer Graphics Program Basics

Setting Up a Basic Graphics Environment:

• First, we need to include the graphics.h header file. It is an old graphics library used in C programming, especially in older compilers like Turbo C. This library provides functions that let you draw things like points, lines, circles, and shapes directly on the screen.
• Before we start drawing anything, we need to set up a basic environment where we can render graphics.
• Initialize the Graphics Mode: To open a graphics window and start drawing, we use the initgraph() function.

                          
  int gd = DETECT, gm;
  initgraph(&gd, &gm, "C:\\TURBOC3\\BGI");
                          
                      

  This will set up a graphics window for you to draw in.
  • Here, gd stands for graphics driver, and gm stands for graphics mode.
  • DETECT is a macro defined in the graphics.h library. It is not a keyword in the C language itself but a constant used by the graphics system.
  • DETECT automatically detects the graphics driver on your system, so you don’t have to manually specify one. This makes it easier for the program to run on different systems.
  • gm will store the mode of the graphics system once it's initialized. It doesn't require a specific value; it gets set by the initgraph() function.
  • When passed to initgraph(), DETECT tells the program to automatically detect the graphics driver based on your system’s configuration. This eliminates the need for you to manually specify the graphics driver.
• Setting Up Graphics in Turbo C3:
  • If you are using Turbo C3, ensure that the BGI (Borland Graphics Interface) files are present in the correct directory.
  • The default path in Turbo C3 is: "C:\\TURBOC3\\BGI".
  • If the path is incorrect, Turbo C3 may throw an error when initializing graphics.
• Common Errors and Fixes in Turbo C3:
  • BGI Error: "Graphics not initialized"
    • Ensure that the BGI files exist in the specified path.
    • Try providing the full path explicitly instead of an empty string.
  • Error: "Cannot run in full-screen mode" (on modern systems)
    • Turbo C3 is a DOS-based compiler and does not support full-screen graphics in modern Windows versions.
    • Use DOSBox to run Turbo C3 properly.
• Exiting Graphics Mode Properly in Turbo C3:

                          
  closegraph();
                          
                      

  • Always call closegraph(); at the end of your program to properly exit graphics mode and return to text mode.
  • Failing to do this may leave your system screen in an unstable state.
• Closing the Graphics Mode: Once you are done with drawing, you should close the graphics mode using the closegraph() function.

                          
  closegraph();
                          
                      

  • closegraph() shuts down the graphics system and deallocates any memory used for graphics.
  • It ensures that the system returns to text mode properly after graphics operations are completed.
  • Failing to call closegraph() may leave the screen in an unpredictable state, especially in older systems.

Program to draw a pixel

Now that we understand the basics of graphics in C, we will start by drawing a point on the screen. The following program demonstrates how to draw a pixel.

                
#include <graphics.h>  // Graphics library for drawing
#include <conio.h>     // Console input-output library for getch()

int main() {
    int gd = DETECT, gm;  // Detect graphics driver and store graphics mode

    initgraph(&gd, &gm, "C:\\TURBOC3\\BGI");  // Initialize graphics system

    putpixel(200, 200, WHITE);  // Draw a white pixel at (200, 200)

    getch();  // Wait for user input before closing
    closegraph();  // Close the graphics window

    return 0;  // Return success
}
                
            

Explanation of the code:

• #include <graphics.h>
  • This is a special graphics library that allows us to draw points, lines, shapes, and colors in C.
  • It’s not a standard C library—you need to install it separately if you're using GCC on Linux or other non-Turbo C compilers.
  • Functions like initgraph(), putpixel(), and closegraph() come from this library.
• #include <conio.h>
  • This is the console input-output library in C.
  • We included this because we need to use getch(), which waits for user input before closing the graphics window.
  • It replaces stdio.h for functions like getch() that are specific to console-based operations.
• int gd = DETECT, gm; (Variables for Graphic Mode)
  • gd stands for Graphics Driver.
  • gm stands for Graphics Mode.
  • DETECT is a macro (predefined constant) in graphics.h that tells the compiler to automatically detect the best graphics driver available.
  • gm is an integer variable that will store the graphics mode (like resolution or color depth).
• initgraph(&gd, &gm, "C:\\TURBOC3\\BGI"); (Initializing the Graphics System)
  • initgraph() is the function that starts the graphics mode.
  • It takes three arguments:
    1. &gd → The address of the gd variable (so it can store the detected graphics driver).
    2. &gm → The address of the gm variable (so it can store the detected graphics mode).
    3. "C:\\TURBOC3\\BGI" → This is the path to the graphics driver files used by Turbo C3. On older systems, this path is required to locate the graphics drivers. On modern systems, however, this path may not be needed if you're using an emulator or a different graphics setup.
  • What happens after calling initgraph()?
    • The system enters graphics mode.
    • A new graphics window opens where we can start drawing.
    • The graphics driver and mode are selected based on the provided path and system configuration.
• putpixel(200, 200, WHITE); (Drawing a Pixel)
  • putpixel(x, y, color) is a function that draws a single pixel on the screen.
  • Arguments:
    • x = 200 → The horizontal position (200 pixels from the left).
    • y = 200 → The vertical position (200 pixels from the top).
    • WHITE → This is a predefined color constant in graphics.h.
  • How does the coordinate system work?
    • The top-left corner of the screen is (0,0).
    • The x-axis increases to the right, and the y-axis increases downward.
• getch(); (Waiting for User Input)
  • When the program finishes running, the graphics window will close immediately unless we pause it.
  • getch(); waits for the user to press any key, keeping the graphics window open.
  • This is a function from conio.h, commonly used in Turbo C. It allows pausing the program until a key is pressed. (Alternately, you can use getchar() in place of getch()).
• closegraph();
  • It closes the graphics window and returns to normal text mode.
  • Without this function, the program might leave the system in an unstable graphics state.

Drawing a Horizontal Line

Now that we understand how to display a single pixel, let’s move to the next step: drawing a horizontal line.

Concept of Drawing a Horizontal Line

• A horizontal line means all the y-coordinates remain the same, while the x-coordinates change from a starting point to an ending point.
• For example:
  • If we want a line from (100, 200) to (300, 200):
    • y = 200 remains constant.
    • x changes from 100 to 300.

Program to Draw a Horizontal Line

                
#include <graphics.h>  // Graphics library for drawing
#include <conio.h>     // For getchar()

int main() {
    int gd = DETECT, gm;  // Detect graphics driver and mode

    initgraph(&gd, &gm, "");  // Initialize graphics mode

    int x1 = 100, x2 = 300, y = 200;  // Start and end points of the line

    for (int x = x1; x <= x2; x++) {
        putpixel(x, y, WHITE);  // Draw white pixels along the x-axis
    }

    getch();  // Wait for user input before closing
    closegraph();  // Close graphics mode

    return 0;
}
                
            

output:

Program to Draw a Vertical Line: Here the x coordinate will remain same while y coordinate will change.

                
#include <graphics.h>  // Graphics library for drawing
#include <conio.h>     // For getchar()

int main() {
    int gd = DETECT, gm;  // Detect graphics driver and mode

    initgraph(&gd, &gm, "");  // Initialize graphics mode

    int x = 200, y1 = 100, y2 = 300;  // Starting and ending y-coordinates

    for (int y = y1; y <= y2; y++) {
        putpixel(x, y, WHITE);  // Draw white pixels along the y-axis
    }

    getch();  // Wait for user input before closing
    closegraph();  // Close graphics mode

    return 0;
}
                
            

Output:

Drawing line using line() function

The line() Function

The line() function is part of the graphics.h library and allows you to draw a straight line between two points by specifying their coordinates.

Syntax of line()

    
line(int x1, int y1, int x2, int y2);
    

Where:

• (x1, y1) is the starting point of the line.
• (x2, y2) is the ending point of the line.

How It Works:

• You don’t need to manually plot each point to draw a line.
• Simply call line() with the starting and ending coordinates, and the function will automatically draw the line.

        
#include <graphics.h>  // Graphics library for drawing
#include <conio.h>     // For getchar()

int main() {
    int gd = DETECT, gm;  // Detect graphics driver and mode

    initgraph(&gd, &gm, "");  // Initialize graphics mode

    int x1 = 100, y1 = 100;  // Starting point of the line
    int x2 = 300, y2 = 300;  // Ending point of the line

    line(x1, y1, x2, y2);  // Draw the line

    getch();  // Wait for user input before closing
    closegraph();  // Close graphics mode

    return 0;
}
        
        

Program to Draw a Square

                        
#include <graphics.h>  // Graphics library for drawing
#include <conio.h>     // For getchar()

int main() {
    int gd = DETECT, gm;  // Detect graphics driver and mode

    initgraph(&gd, &gm, "");  // Initialize graphics mode

    int x1 = 100, y1 = 100;   // Top-left corner of the square
    int side_length = 200;     // Length of the side of the square

    // Draw top side (horizontal line)
    for (int x = x1; x <= x1 + side_length; x++) {
        putpixel(x, y1, WHITE);  // Draw white pixels
    }

    // Draw right side (vertical line)
    for (int y = y1; y <= y1 + side_length; y++) {
        putpixel(x1 + side_length, y, WHITE);  // Draw white pixels
    }

    // Draw bottom side (horizontal line)
    for (int x = x1; x <= x1 + side_length; x++) {
        putpixel(x, y1 + side_length, WHITE);  // Draw white pixels
    }

    // Draw left side (vertical line)
    for (int y = y1; y <= y1 + side_length; y++) {
        putpixel(x1, y, WHITE);  // Draw white pixels
    }

    getch();  // Wait for user input before closing
    closegraph();  // Close graphics mode

    return 0;
}
                        
                    

In graphics.h, there is a built-in function to draw rectangles directly, which makes things a lot simpler compared to manually drawing each side using loops.

The rectangle() Function

The rectangle() function is part of the graphics.h library and allows you to easily draw a rectangle by just specifying two opposite corners (top-left and bottom-right).

Syntax of rectangle()

                
rectangle(int x1, int y1, int x2, int y2);
                
            

Where:

• (x1, y1) is the top-left corner of the rectangle.
• (x2, y2) is the bottom-right corner of the rectangle.

How It Works:

• You don’t need to manually draw the four sides of the rectangle using loops.
• Simply call rectangle() with the two corner coordinates, and the function will automatically draw the rectangle for you.

                    
#include <graphics.h>  // Graphics library for drawing
#include <conio.h>     // For getchar()

int main() {
    int gd = DETECT, gm;  // Detect graphics driver and mode

    initgraph(&gd, &gm, "");  // Initialize graphics mode

    int x1 = 100, y1 = 100;  // Top-left corner of the square
    int side_length = 200;    // Length of the side of the square

    // Bottom-right corner will be (x1 + side_length, y1 + side_length)
    rectangle(x1, y1, x1 + side_length, y1 + side_length);  // Draw the square

    getch();  // Wait for user input before closing
    closegraph();  // Close graphics mode

    return 0;
}
                    
                

The circle() Function

The circle() function is part of the graphics.h library and allows you to easily draw a circle by just specifying the center and radius.

Syntax of circle()

                
circle(int x, int y, int radius);
                
            

Where:

• (x, y) is the center of the circle.
• radius is the distance from the center to the edge of the circle.

How It Works:

• You don’t need to manually calculate points on the circle.
• Simply call circle() with the center coordinates and radius, and the function will automatically draw the circle for you.

                    
#include <graphics.h>  // Graphics library for drawing
#include <conio.h>     // For getchar()

int main() {
    int gd = DETECT, gm;  // Detect graphics driver and mode

    initgraph(&gd, &gm, "");  // Initialize graphics mode

    int x = 200, y = 200;  // Center of the circle
    int radius = 100;      // Radius of the circle

    circle(x, y, radius);  // Draw the circle

    getch();  // Wait for user input before closing
    closegraph();  // Close graphics mode

    return 0;
}
                    
                

The ellipse() Function

The ellipse() function is part of the graphics.h library and allows you to easily draw an ellipse by specifying the center, axes, and angle.

Syntax of ellipse()

            
ellipse(int x, int y, int startAngle, int endAngle, int xRadius, int yRadius);
            
        

Where:

• (x, y) is the center of the ellipse.
• startAngle is the starting angle (in degrees) where drawing begins.
• endAngle is the ending angle (in degrees) where drawing stops.
• xRadius is the horizontal radius (width of the ellipse).
• yRadius is the vertical radius (height of the ellipse).

How It Works:

• If you want a full ellipse, set startAngle = 0 and endAngle = 360.
• You can use different values for xRadius and yRadius to create stretched or squished ellipses.
• The function automatically handles the calculations, so you just need to specify the parameters.

                    
#include <graphics.h>  // Graphics library for drawing
#include <conio.h>     // For getchar()

int main() {
    int gd = DETECT, gm;  // Detect graphics driver and mode

    initgraph(&gd, &gm, "");  // Initialize graphics mode

    int x = 250, y = 250;  // Center of the ellipse
    int xRadius = 150, yRadius = 100;  // Horizontal and vertical radius

    ellipse(x, y, 0, 360, xRadius, yRadius);  // Draw a full ellipse

    getch();  // Wait for user input before closing
    closegraph();  // Close graphics mode

    return 0;
}
                    
                

Line Drawing

Making Different shapes like Traffic Light, Smiley Face, Moving Car Animation, Hut Drawing with Colors, Bar Graph, Arc Animation with Circles, Basic Circle Drawing with Color Filling

        
arc(300, 340, 200, 340, 50); 
        
    

        
arc(300, 340, 20, 160, 50); 
        
    

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

void main()
{
    int gd = DETECT, gm, midx, midy;

    initgraph(&gd, &gm, "");

    midx = getmaxx() / 2;  // X center of the screen
    midy = getmaxy() / 2;  // Y center of the screen

    int faceRadius = 100;  // Face size
    int eyeRadius = 15;    // Eye size
    int mouthRadius = 50;  // Mouth arc size

    // Draw Face (Big Circle, just border)
    setcolor(WHITE);
    circle(midx, midy, faceRadius);  // Face border

    // Draw Left Eye (Just border)
    circle(midx - 35, midy - 30, eyeRadius);  // Left eye border

    // Draw Right Eye (Just border)
    circle(midx + 35, midy - 30, eyeRadius);  // Right eye border

    // Draw Smile (Arc) - Happy face
    arc(midx, midy + 10, 200, 340, mouthRadius);  // Smile arc

    // To make a sad face, use the following line instead of the smile arc:
    // arc(midx, midy + 40, 20, 160, mouthRadius);  // Sad arc

    getch();
    closegraph();
}