Graphics Programming Using C++ - Lab Handout 1 Computer Graphics (ITEC-613 & SENG-613)
Instructor: Dr. Zeeshan Bhatti
Welcome, future graphics programmers! This tutorial will guide you through the fundamentals of graphics programming using C++ and the Borland Graphics Interface (BGI). By the end of this lab, you'll be creating various shapes and understanding how to work with the graphics coordinate system.
Setting Up Your Environment
Before we begin, ensure you have a Turbo C++ compiler or a modern IDE (like Code::Blocks) with the WinBGIM library installed. You'll need these key files in your project directory:
graphics.h
(header file)graphics.lib
(library file).BGI
files (graphics drivers, particularlyEGAVGA.BGI
)
1. Your First Graphics Program: Drawing a Circle
Let's start with a simple program that displays a circle on the screen. This will verify that your graphics environment is working correctly.
Example 1: Basic Circle Program
/* simple.c - Basic graphics program to draw a circle */
#include<graphics.h> // Includes graphics functions and constants
#include<conio.h> // Includes console input/output functions
void main()
{
int gd = DETECT, gm; // gd = graphics driver, gm = graphics mode
clrscr(); // Clear the text mode screen
// Initialize graphics mode
initgraph(&gd, &gm, "C:\\TC\\BGI"); // Path to BGI driver files
// Draw a circle at center (200,100) with radius 150 pixels
circle(200, 100, 150);
getch(); // Wait for user input before closing
closegraph(); // Switch back to text mode and free memory
}
Understanding the Code:
graphics.h
: The main header file containing all graphics functionsconio.h
: Providesgetch()
for pausing the programDETECT
: Automatically detects the best graphics driver availableinitgraph()
: Initializes the graphics system (more details below)circle(x, y, radius)
: Draws a circle with center at (x,y) and given radiusgetch()
: Prevents the window from closing immediatelyclosegraph()
: Properly shuts down the graphics system
Expected Output:
A graphics window displaying a white circle centered at position (200, 100) with a radius of 150 pixels.
Understanding Key Graphics Functions
The initgraph()
Function
This is the most important function that initializes the graphics system.
Syntax:
initgraph(int far *graphdriver, int far *graphmode, char far *pathtodriver);
Parameters:
*graphdriver
: The graphics driver to use (DETECT
for auto-detection)*graphmode
: The graphics mode/resolution (set automatically withDETECT
)*pathtodriver
: Path to the directory containing.BGI
files
Common Usage:
initgraph(&gd, &gm, "C:\\TC\\BGI"); // Specific path
initgraph(&gd, &gm, ""); // Current directory only
The closegraph()
Function
Always call this function at the end of your graphics program to:
Switch back to text mode
Clear the screen
Free allocated memory for graphics system
Prevent system crashes or unusual behavior
2. Understanding the Coordinate System
In graphics mode, all coordinates are specified in pixels:
Origin (0,0): Top-left corner of the screen
X-axis: Increases from left to right
Y-axis: Increases from top to bottom
Resolution: Typically 640×480 pixels in VGA mode
Visual Representation:
(0,0) ────────────────→ X-axis (640)
│
│ Your shapes are drawn
│ within this coordinate
│ system
↓
Y-axis (480)
3. Drawing Basic Shapes
Now let's explore more shape-drawing functions with practical examples.
Example 2: Multiple Shapes Program
/* shapes.c - Drawing various basic shapes */
#include<graphics.h>
#include<conio.h>
void main()
{
int gd = DETECT, gm;
initgraph(&gd, &gm, "C:\\TC\\BGI");
// Draw a rectangle: (left, top, right, bottom)
rectangle(50, 50, 200, 150);
// Draw a circle: (center_x, center_y, radius)
circle(320, 120, 80);
// Draw an ellipse: (center_x, center_y, start_angle, end_angle, x_radius, y_radius)
ellipse(500, 120, 0, 360, 100, 50);
// Draw a line: (x1, y1, x2, y2)
line(50, 200, 600, 200);
// Draw an arc: (center_x, center_y, start_angle, end_angle, radius)
arc(320, 300, 45, 270, 60);
getch();
closegraph();
}
Shape Functions Summary:
rectangle(left, top, right, bottom)
: Draws a rectanglecircle(x, y, radius)
: Draws a circleellipse(x, y, st_angle, end_angle, x_radius, y_radius)
: Draws an ellipseline(x1, y1, x2, y2)
: Draws a straight linearc(x, y, st_angle, end_angle, radius)
: Draws an arc
4. Working with Colors
BGI provides 16 colors that you can use to make your graphics more appealing.
Example 3: Colorful Shapes Program
/* colors.c - Using colors in graphics */
#include<graphics.h>
#include<conio.h>
void main()
{
int gd = DETECT, gm;
initgraph(&gd, &gm, "C:\\TC\\BGI");
// Set background color to BLUE
setbkcolor(BLUE);
// Draw a red rectangle
setcolor(RED);
rectangle(100, 100, 200, 150);
// Draw a green circle
setcolor(GREEN);
circle(300, 200, 50);
// Draw a filled yellow ellipse
setcolor(YELLOW);
setfillstyle(SOLID_FILL, YELLOW);
fillellipse(450, 150, 80, 40);
// Draw magenta text
setcolor(MAGENTA);
outtextxy(200, 300, "Hello Graphics World!");
getch();
closegraph();
}
Color Functions:
setcolor(color)
: Sets the current drawing colorsetbkcolor(color)
: Sets the background colorsetfillstyle(pattern, color)
: Sets fill pattern and colorfloodfill(x, y, border_color)
: Fills a bounded area with current fill style
Available Colors:
BLACK, BLUE, GREEN, CYAN, RED, MAGENTA, BROWN, LIGHTGRAY,
DARKGRAY, LIGHTBLUE, LIGHTGREEN, LIGHTCYAN, LIGHTRED,
LIGHTMAGENTA, YELLOW, WHITE
5. Creating Patterns and Complex Shapes
Example 4: Pattern Drawing with Loops
/* pattern.c - Creating patterns using loops */
#include<graphics.h>
#include<conio.h>
void main()
{
int gd = DETECT, gm;
int i, x, y;
initgraph(&gd, &gm, "C:\\TC\\BGI");
setbkcolor(BLACK);
// Draw concentric circles
for(i = 10; i <= 100; i += 10) {
setcolor(i/10); // Change color for each circle
circle(320, 240, i);
}
// Draw a grid of rectangles
for(x = 50; x <= 550; x += 100) {
for(y = 50; y <= 400; y += 100) {
setcolor((x/50 + y/50) % 16);
rectangle(x, y, x+40, y+40);
}
}
getch();
closegraph();
}
6. Common Errors and Solutions
Error 1: "BGI Error: Graphics not initialized"
Solution: Check the path in
initgraph()
or ensure BGI files are in your project directory.
Error 2: Program closes immediately
Solution: Add
getch()
beforeclosegraph()
to pause execution.
Error 3: Shapes not visible
Solution: Check if coordinates are within screen bounds (typically 640×480).
Best Practices:
Always initialize graphics with
initgraph()
Always close graphics with
closegraph()
Use
getch()
to pause before closingCheck your coordinate values
Test colors to ensure visibility against background
Practice Exercises
Exercise 1: Create a program that draws the Indian flag using rectangles and a circle.
Exercise 2: Write a program that draws a simple house with a door, windows, and roof.
Exercise 3: Create an animated effect by drawing circles with increasing radii in a loop.
Exercise 4: Draw a bar chart representing monthly sales data.
Exercise 5: Create a colorful geometric pattern using nested loops.
Conclusion
Congratulations! You've taken your first steps into the world of C++ graphics programming. You've learned how to:
Set up the graphics environment
Draw basic shapes (circles, rectangles, lines, ellipses)
Work with colors and fill patterns
Understand the graphics coordinate system
Create visual patterns using loops
These fundamentals will serve as the building blocks for more advanced graphics programming concepts we'll cover in future labs.
Remember to experiment with different coordinates, colors, and shapes to strengthen your understanding. Happy coding!
Instructor: Prof. Dr. Zeeshan Bhatti
YouTube Channel: Zeeshan Academy
you don't share java coding ?
ReplyDeleteyou don't share java coding ?
ReplyDeleteErst you beautification your course you ought to be fit to interpret the confounded programming module.In late these days designing has seized a major hop as now what is manikin abused in differed train stages. Java
ReplyDelete