Drawing the Flag of Bangladesh with C++ & OpenGL

A step-by-step guide to rendering a national symbol with code.

Today, we're going to combine national symbolism with computer graphics. We'll walk through the process of creating a perfect, mathematically accurate representation of the Bangladeshi flag using C++ and the OpenGL graphics library. It's a fantastic exercise for understanding 2D transformations, shapes, and the official specifications of a beautiful flag.

The Symbolism Behind the Flag

Before we dive into the code, it's important to understand the meaning behind the design. The flag of Bangladesh, known as the "Lal-Sobuj" (Red-Green), is simple yet powerful.

The proportions and placement are also specific. The flag has a 10:6 length-to-width ratio, and the red disc is slightly offset towards the hoist (the left side) so that it appears centered when the flag is flying.

The C++ OpenGL Code

Here is the complete C++ source code using the GLUT library to create the window and handle events. Make sure you have `freeglut` or a similar library installed.

#include 
#include  // For sin and cos

// Define constants for the flag's properties
const float FLAG_LENGTH = 10.0f;
const float FLAG_WIDTH = 6.0f;
const float CIRCLE_RADIUS = FLAG_LENGTH / 5.0f; // Radius is 1/5 of the length
const float CIRCLE_CENTER_X = FLAG_LENGTH * (9.0f / 20.0f); // Centered at 9/20 of the length
const float CIRCLE_CENTER_Y = FLAG_WIDTH / 2.0f;   // Centered at 1/2 of the width

// Function to draw the flag
void drawFlag() {
    // 1. Draw the green background rectangle
    glColor3f(0.0f, 0.408f, 0.282f); // "Bottle Green"

    glBegin(GL_QUADS);
        glVertex2f(0.0f, 0.0f);
        glVertex2f(FLAG_LENGTH, 0.0f);
        glVertex2f(FLAG_LENGTH, FLAG_WIDTH);
        glVertex2f(0.0f, FLAG_WIDTH);
    glEnd();

    // 2. Draw the red circle
    glColor3f(0.835f, 0.161f, 0.161f); // Red
    
    int num_segments = 100; // More segments = smoother circle
    glBegin(GL_TRIANGLE_FAN);
        glVertex2f(CIRCLE_CENTER_X, CIRCLE_CENTER_Y); // Center of the circle
        for (int i = 0; i <= num_segments; i++) {
            float angle = i * 2.0f * 3.14159f / num_segments;
            float x = CIRCLE_CENTER_X + (cos(angle) * CIRCLE_RADIUS);
            float y = CIRCLE_CENTER_Y + (sin(angle) * CIRCLE_RADIUS);
            glVertex2f(x, y);
        }
    glEnd();
}

// The main display function
void display() {
    glClear(GL_COLOR_BUFFER_BIT);
    glLoadIdentity();
    drawFlag();
    glutSwapBuffers();
}

// The reshape function, handles window resizing
void reshape(int width, int height) {
    glViewport(0, 0, width, height);
    glMatrixMode(GL_PROJECTION);
    glLoadIdentity();
    // Use an orthographic projection to maintain the 10:6 aspect ratio
    glOrtho(0.0, FLAG_LENGTH, 0.0, FLAG_WIDTH, -1.0, 1.0);
    glMatrixMode(GL_MODELVIEW);
    glLoadIdentity();
}

int main(int argc, char** argv) {
    glutInit(&argc, argv);
    glutInitDisplayMode(GLUT_DOUBLE | GLUT_RGBA);
    glutInitWindowSize(1000, 600);
    glutInitWindowPosition(100, 100);
    glutCreateWindow("Flag of Bangladesh - OpenGL");

    glClearColor(0.0f, 0.0f, 0.0f, 1.0f);
    glutDisplayFunc(display);
    glutReshapeFunc(reshape);
    glutMainLoop();
    return 0;
}

Breaking Down the Code

1. Proportions & Setup

We start by defining constants based on the official specifications. This makes the code clean and easy to understand. The key is the reshape function, where glOrtho(0.0, 10.0, 0.0, 6.0, -1.0, 1.0); sets up a 2D coordinate system that is exactly 10 units wide and 6 units tall. This means we can draw our shapes using the flag's real dimensions, and OpenGL will handle scaling it to the window size without distortion.

2. Drawing the Green Field

This is the easy part. We set the color to bottle green using glColor3f() and then draw a rectangle that fills our entire 10x6 coordinate space using glBegin(GL_QUADS).

3. Drawing the Red Disc

Since OpenGL has no built-in circle function, we have to create our own. The most common way is to draw a polygon with many sides. We use a GL_TRIANGLE_FAN, which is perfect for this. It takes a center point (the center of our circle) and then connects it to a series of vertices around the circumference, creating a fan of triangles that form a filled circle. The circle's center is precisely calculated at (4.5, 3.0) in our 10x6 world, and its radius is 2.0 (one-fifth of the length).

How to Compile and Run

First, save the code above as bangladesh_flag.cpp. You'll need a C++ compiler (like g++) and the freeglut development libraries installed.

Open your terminal and run the following command to compile:

g++ bangladesh_flag.cpp -o flag -lGL -lglut

If it compiles successfully, run the program with:

./flag

A window should appear displaying a perfect rendition of the Bangladeshi flag!