Clock | OpenGL Project | Computer Graphics Project | With Free Source Code

   

"Clock OpenGL Project - Computer Graphics Project 🕰️🎨"

Welcome to the Clock Computer Graphics Mini Project, an exciting endeavor that utilizes OpenGL to create a captivating analog clock. This project highlights the beauty of real-time visualization by embodying the passage of time with rotating hands for hours, minutes, and seconds. With this simple yet engaging visual representation, you'll not only marvel at how time is depicted graphically but also delve deeper into the workings of computer graphics and animation.

---

Introducing the Project

The core aim of this project is to construct an analog clock using OpenGL, showcasing the current time through a beautifully rendered clock face. Every second, as the clock ticks, the hands rotate accordingly, reflecting the real-time passage of time. Utilizing basic OpenGL functions for rendering geometric shapes, such as circles and lines, in conjunction with the GLUT library for window management and timer functionality, this project serves as an excellent introduction to the world of graphics programming.

Components of the Clock

The OpenGL analog clock consists of several essential components that work together harmoniously:

• Clock Face: This is the circular base of the clock, adorned with hour markings that guide the eye.
• Clock Hands: Three distinct hands represent the hours, minutes, and seconds, elegantly sweeping across the face of the clock.
• Real-time Update: The clock is programmed to dynamically update based on the system time, offering a seamless experience as time passes.

---

Code Overview 🧑‍💻

Written in C++ with the incorporation of OpenGL and GLUT, the code consists of several crucial components that contribute to the clock's functionality:

1. Circle Function: A fundamental helper function to draw perfect circles for both the clock face and hands, ensuring a polished appearance.
2. Render String Function: This function comes into play to render the numbers (1–12) around the clock face, ensuring easy readability.
3. Time Calculation: By integrating the system time through the `<ctime>` library, the code swiftly calculates the current hour, minute, and second.
4. Drawing Functions: The heart of the project, the `draw()` function, is responsible for rendering the clock face and all three hands.
5. Timer Function: The `move()` function is a timer mechanism that updates the clock's display every second.

1. Drawing the Clock Face

To create the clock face, we utilize a simple circular drawing function. This is crucial for formulating the appearance of the clock itself.

Code for Drawing the Clock Face:

// Function to draw a circle with a specified center and radius
void circle(GLfloat xc, GLfloat yc, GLfloat radius, bool fill) {
    // Define the angle step in radians for full circle
    const GLfloat angle_step = 3.14169f / 180.0f;
    
    glBegin(fill ? GL_TRIANGLE_FAN : GL_LINE_LOOP); 
    // Use GL_TRIANGLE_FAN for filled circles or GL_LINE_LOOP for the outline

    for (int i = 0; i <= 360; i += 2) { // Loop through angles to create the circle
        float angle = i * angle_step; // Convert angle to radians
        // Calculate and plot each point on the circle's edge using sine and cosine
        glVertex2f(xc + sin(angle) * radius, yc + cos(angle) * radius);
    }
    
    glEnd(); // Close the current OpenGL drawing
}

**Explanation**: 

• The function uses `GL_TRIANGLE_FAN` for a filled circular face and `GL_LINE_LOOP` for the outline, creating a crisp appearance.
• It iterates over angles, ensuring every vertex is plotted in a smooth circular arrangement to represent the clock face accurately.

Code for Rendering Numbers:

// Function to render text (numbers) on the clock face
void RenderString(float x, float y, void *font, const unsigned char *str) {
    glColor3ub(0, 0, 0); // Set text color to black
    glRasterPos2f(x, y); // Set the position where the text will be drawn
    glutBitmapString(font, str); // Render the string
}

**Explanation**: 

The numbers on the clock, like 12, 3, 6, and 9, are positioned using a separate yet equally important function called `RenderString()`.

2. Drawing the Clock Hands

Each hand of the clock is represented with simple line segments drawn using `GL_LINES`, allowing for clear visibility.

Code for the Second Hand:

// Function to draw the second hand of the clock
void drawSecondHand() {
    float angle = second * 6; // Calculate the angle for the second hand (6 degrees per second)
    glRotatef(-angle, 0.0f, 0.0f, 1.0f); // Rotate the hand accordingly
    
    glBegin(GL_LINES); // Start drawing a line
    glColor3f(1.0f, 0.0f, 0.0f); // Set the color of the second hand to red
    glVertex2i(0, 0); // Starting point at the center of the clock
    glVertex2i(0, 30); // Ending point, extending outward
    glEnd(); // Complete the drawing of the line
}

Code for the Minute Hand:

// Function to draw the minute hand of the clock
void drawMinuteHand() {
    float angle = minute * 6; // Calculate the angle for the minute hand (6 degrees per minute)
    glRotatef(-angle, 0.0f, 0.0f, 1.0f); // Rotate the minute hand based on the angle
    
    glBegin(GL_LINES); // Start drawing a line
    glColor3f(0.0f, 1.0f, 0.0f); // Set color of the minute hand to green
    glVertex2i(0, 0); // Start point at the center
    glVertex2i(0, 25); // End point, making it slightly shorter than the second hand
    glEnd(); // Complete the drawing
}

Code for the Hour Hand:

// Function to draw the hour hand of the clock
void drawHourHand() {
    float angle = (hour + minute / 60.0) * 30; // Calculate angle for the hour hand 

//(30 degrees per hour)
    glRotatef(-angle, 0.0f, 0.0f, 1.0f); // Rotate according to the calculated angle
    
    glBegin(GL_LINES); // Start drawing a line
    glColor3f(0.0f, 0.0f, 1.0f); // Set color of the hour hand to blue
    glVertex2i(0, 0); // Start from the center
    glVertex2i(0, 20); // End point for the hour hand, which is shorter than the minute hand
    glEnd(); // Finish the line drawing
}

**Explanation**:

• The second hand rotates every 6 degrees per second (360 degrees divided by 60 seconds).
• The minute hand rotates every 6 degrees per minute, and the hour hand smoothly transitions using a formula that accounts for both hour and minute positions as it sweeps around the clock.

3. Real-time Update

One of the standout features of this clock project is its ability to update in real-time, creating a captivating experience for viewers.

Code for Updating Time:

// Function to fetch and update the current time every second
void updateTime(int value) {
    time_t now = time(0); // Get the current time
    struct tm *current_time = localtime(&now); // Convert it to local time structure
    
    // Update global time variables based on retrieved time
    hour = current_time->tm_hour;
    minute = current_time->tm_min;
    second = current_time->tm_sec;
    
    glutPostRedisplay(); // Request a redraw to update the display with the new time
    glutTimerFunc(1000, updateTime, 0); // Set a timer for 1 second to call this function again
}

**Explanation**:

• The `updateTime()` function fetches the current system time using `time()` and breaks it down to hours, minutes, and seconds.
• By calling `glutPostRedisplay()`, the display is refreshed every second, ensuring the clock appears to be continuously ticking.

---

User Interaction

The current design features automatic updates. The project also supports dynamic window resizing, making it adaptable to different screen sizes.

Code for Window Resize Handling and Entire Clock Display:

// Function to handle window resizing
void resize(GLsizei width, GLsizei height) {
    glViewport(0, 0, width, height); // Update the viewport for the new window size
    glMatrixMode(GL_PROJECTION); // Switch gears and focus on the projection matrix now
    glLoadIdentity(); // Load the identity matrix to clear previous transformations
    gluOrtho2D(-50, 50, -50, 50); // Set up orthographic projection with specified boundaries
    glMatrixMode(GL_MODELVIEW);//Time to return to the model view matrix and continue our work!
    glLoadIdentity(); // Load the identity matrix for model view
}

// Function to render the entire clock scene
void draw() {
    glClear(GL_COLOR_BUFFER_BIT); // Clear the screen for fresh drawing
    
    circle(0, 0, 40, true); // Draw the main clock face filled in
    // Loop to render the hour numbers around the clock
    for (int i = 1; i <= 12; i++) {
        float angle = i * 30; // Calculate the angle for each hour marker
        float x = 35 * sin(angle * 3.14 / 180); 

// Calculate the x position based on the angle

        float y = 35 * cos(angle * 3.14 / 180); 

// Calculate the y position based on the angle
RenderString(x - 5, y - 5, GLUT_BITMAP_HELVETICA_18,
 reinterpret_cast<const unsigned char*>(std::to_string(i).c_str())); 

// Render hour numbers at calculated positions
    }
    
    drawHourHand(); // Draw the hour hand using the defined function
    drawMinuteHand(); // Draw the minute hand
    drawSecondHand(); // Draw the second hand
    
    glFlush(); // Ensure all OpenGL commands are executed
}

---

Exploring the Code: Key Components 🕵️‍♂️

1. Circle Function
   The circle() function draws the circular clock face, the minute hand, and the hour hand. It uses the OpenGL function glBegin(GL_LINE_LOOP) for the outline and glBegin(GL_TRIANGLE_FAN) for filled circles.

2. RenderString Function
   This function is used to render the numbers on the clock face (from 1 to 12). It uses glutBitmapString() to draw text at specified positions.

3. Time Updates
   The move() function uses time.h to get the current time and updates the hour, minute, and second variables. The display is updated every second using glutTimerFunc().

4. Drawing the Hands
   The clock hands (hour, minute, second) are rotated based on the current time. The rotation angle is calculated using the following formula:

   • Second hand: angle_s = second * 6 (since 360 degrees / 60 seconds = 6 degrees per second)
   • Minute hand: angle_m = minute * 6
   • Hour hand: angle_h = (hour + minute / 60.0) * 30 (since 360 degrees / 12 hours = 30 degrees per hour)

5. Window Resize Handling
   The resize() function ensures that the clock remains centered and properly scaled when the window is resized.

---

Keyboard and Mouse Functionality 🎮

While this project does not currently incorporate specific keyboard or mouse interactivity, the potential to enhance user engagement is vast. Imagine adding features such as:

• Keyboard Controls: Allow users to manually adjust the time or change settings, such as the time zone or clock format.
• Mouse Interaction: Enable click-and-drag functionality to reposition the clock face, or incorporate zooming features that allow users to dynamically change the visual size of the clock.

---

How to Get Started 🛠️

If you're excited to embark on this digital clock journey, here’s how you can get started:

Step 1: Download the Source Code and Report 📥

Grab the complete source code from the provided link at the end of this document. Be sure to download the accompanying report to better understand the project’s structure and logic.

Step 2: Set Up Your Development Environment 🛠️

To run the project successfully, you’ll need:

• A C++ Compiler: Choose an IDE like DevC++, Code::Blocks, or Visual Studio for a streamlined coding experience.
• OpenGL and GLUT Libraries: Ensure you have these libraries installed to facilitate rendering and window management. Online guides are readily available to assist you with the setup process.

Step 3: Run the Project 🖥️

After you’ve set everything up:

1. Download the source code.
2. Open the project in your chosen IDE.
3. Compile and run the program. 

Watch in awe as the clock hands gracefully move in real-time, bringing the passage of time to life.

---

Conclusion 🎉

The Clock OpenGL Project presents a captivating approach to experiencing real-time graphics rendering with OpenGL. Through the creation of an analog clock, you can gain hands-on expertise with graphical functions, transformations, and the fascinating world of time-based updates. As you grow more comfortable with the code, consider expanding the project with features like digital clock modes, alarm settings, or even animated clock hands.

Future Enhancements

The possibilities to enhance this clock project are endless. Here are some ideas to spark your creativity:

• Smooth Sweeping Hands: Implement smoother animations for the clock hands to create a more lifelike movement.
• Customizable Clock Face: Allow users to choose from different designs and themes for a more personalized experience.
• Digital Display: Include a digital time display alongside the analog clock to cater to different user preferences.
• Design and Feature Experiments: Feel free to experiment with various designs, colors, and functionalities to elevate your project even further!

Embrace the opportunity to learn, create, and innovate as you dive into the world of OpenGL and graphics programming. The journey awaits! 

Also, check out some other exciting OpenGL projects to broaden your programming horizons! here.

 DOWNLOAD SOURCE CODE   DOWNLOAD SAMPLE REPORT