Analog clock Computer Graphics Laboratory with Mini-Project [ 18CSL67 ]

CHAPTER - 1

INTRODUCTION
1.1 Aim of the project

The aim of the project would be to create a graphical representation of an analog

clock using Code Blocks. This would involve designing and coding the necessary
algorithms to draw the clock face, hour hand, minute hand, and second hand using
graphics primitives like circles, lines, and polygons. Students would also need to
incorporate appropriate transformations to animate the movement of the hands as time
progresses. students can learn about fundamental computer graphics concepts, such as
Cartesian coordinate systems, drawing shapes, applying transformations.

1.2 Overview of the project

In computer graphics and visualization, creating an analog clock project is a great
way to learn about rendering 2D graphics and handling time-based animations. The goal
is to simulate the functionality of a traditional analog clock on a computer screen. We
will need to design the clock face, which typically consists of a circular shape divided
into 12 equal parts, representing the hours. Each hour mark is accompanied by smaller
minute marks to indicate the minutes. Next we will create the clock hands: the hour
hand, minute hand, and optionally, the second hand. These hands rotate around the clock
face to represent the current time. The position of each hand depends on the current
time, which you can obtain from the system or by implementing your own timekeeping
mechanism.

1.3 Outcome
Creation of a visually accurate and interactive analog clock: The project may
result in the development of a program or application that accurately represents an
analog clock, including the movement of the hour, minute, and second hands. Users
may be able to interact with the clock, such as setting the time or changing the clock
face design.

Dept. of CS&E, MIT Mysore 2022-2023 1

Analog clock Computer Graphics Laboratory with Mini-Project [ 18CSL67 ]

CHAPTER – 2

DESIGN AND IMPLEMENTATION

2.1 Algorithm
Step 1: Start

Step 2:

Initialize Variables: Set up the necessary variables, such as the clock's radius, center
coordinates, and time-related variables (hours, minutes, seconds).

Step 3:

Draw Clock Face: Draw the circular shape representing the clock face using the
specified radius and center coordinates.

Step 4:

Draw Hour Markers: Position and draw the hour markers evenly around the clock
face.

Step 5:

Draw Hour Hand: Calculate the angle for the hour hand based on the current hour,
and then draw a line representing the hand's length and position.

Step 6:

Draw Minute Hand: Calculate the angle for the minute hand based on the current
minute, and then draw a line representing its length and position.

Step 7:

Draw Second Hand: Calculate the angle for the second hand based on the current
second, and then draw a line representing its length and position.

Step 8:

Update Time: Increment the time variables (hours, minutes, seconds) to reflect the
passage of time.

Step 9:

Clear Screen: Clear the screen or canvas to prepare for the next frame.

Dept. of CS&E, MIT Mysore 2022-2023 2

Analog clock Computer Graphics Laboratory with Mini-Project [ 18CSL67 ]

Step 10:

Repeat: Return to the step of drawing the clock face and continue the process to
create an animated effect.

11. End: End

2.2 Flowchart

Dept. of CS&E, MIT Mysore 2022-2023 3

Analog clock Computer Graphics Laboratory with Mini-Project [ 18CSL67 ]

2.3 OpenGL API’s used with description

glMatrixMode() :

is a function used in the OpenGL graphics library to specify the current matrix mode. OpenGL
provides different matrix modes for different types of transformations, such as modelview,
projection, and texture transformations. This allows you to switch between these modes to
perform different types of matrix operations.

glShadeModel() :

is a function used in the OpenGL graphics library to specify the shading model used for
rendering polygons. The shading model determines how lighting calculations are performed
and how colors are interpolated across the surface of a polygon.

glLightfv() :

is a function used in the OpenGL graphics library to set various parameters of a light source.
It allows you to specify different properties of a light, such as its position, color, intensity, and
attenuation.

glEnable():

is a function used in the OpenGL graphics library to enable various OpenGL features and
capabilities. It is typically used to enable specific capabilities or functionality that you want to
utilize in your rendering pipeline.

glPushMatrix():

glPushMatrix() and glPopMatrix(): These functions push and pop the current matrix
stack, respectively. You would use them to save and restore the transformation state
when rendering the clock's hands or dial.

glTranslate():

This function applies a translation to the current matrix. You would use it to position
the clock's hands at the desired locations.

glRotatef():

This function applies a rotation to the current matrix. You would use it to rotate the
clock's hands based on the current time.

Dept. of CS&E, MIT Mysore 2022-2023 4

Analog clock Computer Graphics Laboratory with Mini-Project [ 18CSL67 ]

gluQuadricDrawStyle():

function is used to specify the drawing style of a quadric object created with glNewQuadric
A quadric object is a geometric primitive like a sphere, cylinder, or disk, which can be rendered
using OpenGL.

gluQuadricOrientation():

Specifies the orientation to be used for the quadric object.

gluCylinder():

is a function from the legacy OpenGL Utility Library that allows you to render a
cylinder primitive in the OpenGL rendering pipeline. It is used to generate the vertices,
normals, and texture coordinates necessary to render a cylinder.

glDisk():

is a function from the legacy OpenGL Utility Library (GLU) that allows you to render
a disk or a partial disk primitive in the OpenGL rendering pipeline. It is used to generate
the vertices, normals, and texture coordinates necessary to render a disk.

glClearColor():

it is used to clear the color buffer.

Void Display Func(void):

Graphics are sent to the screen through this functions and registered with the windows
system.

glutCreateMenu():

it creates a new pop-up menu.

glutAddMenuEntry():

it adds a menu entry to the bottom of the current menu.

glutMainLoop():

This will cause the program to begin an event processing loop.

glutAttachMenu():

it attaches a mouse button for the current window to the identifier of the current menu.
Dept. of CS&E, MIT Mysore 2022-2023 5
Analog clock Computer Graphics Laboratory with Mini-Project [ 18CSL67 ]

2.4 Source code

#include <windows.h>

#include <GL/glut.h>

#include <string.h>

#include <stdio.h>

#include <stdlib.h>

#include <math.h>

#include <stdarg.h>

#include <time.h>

GLdouble scalex = 1, scaley =1, scalez = 1;

void printv(va_list args, const char* format)

char buf[LEN];

char* ch=buf;

vsnprintf(buf,LEN,format,args);

while (*ch)

glutBitmapCharacter(GLUT_BITMAP_HELVETICA_18,*ch++);

void printAt(int x, int y, const char* format, ...)

va_list args;

glWindowPos2i(x,y);

va_start(args,format);

printv(args,format);

va_end(args);

int i;

void print(float x, float y, char *string)

glRasterPos3f(x,y,-1);

Dept. of CS&E, MIT Mysore 2022-2023 6

Analog clock Computer Graphics Laboratory with Mini-Project [ 18CSL67 ]
int len = (int) strlen(string);

for (i = 0; i < len; i++)

glutBitmapCharacter(GLUT_BITMAP_TIMES_ROMAN_24,string[i]);

};

void num()

glColor3f( 0.0, 0.0, 0.0);

print(-6.1,0.1,"9"); //counting from center

print(-0.195,-5.9,"12");

print(-0.1,6.1,"6");

print(5.9,0.1,"3");

print(5.0, 3.2,"4");

print(2.9,5.45,"5");

print(-3.2,5.45,"7");

print(-5.4, 3.2,"8");

print(-5.5, -2.8,"10");

print(-3.3,-5.05,"11");

print(5.1, -2.8,"2");

print(2.9,-5.05,"1");

void Draw_gear( void )

int i;

glPushMatrix();

gluCylinder(Cylinder, 2.5, 2.5, 1, 16, 16);

gluDisk(Disk, 0, 2.5, 32, 16);

glTranslatef(0,0,1);

glScaled(scalex,scaley,scalez);

gluDisk(Disk, 0, 2.5, 32, 16);

glPopMatrix();

Dept. of CS&E, MIT Mysore 2022-2023 7

Analog clock Computer Graphics Laboratory with Mini-Project [ 18CSL67 ]
for( i = 0; i < 8; i++)

glPushMatrix();

glTranslatef( 0.0, 0.0, 0.50);

glRotatef( (360/8) * i, 0.0, 0.0, 1.0);

glScaled(scalex,scaley,scalez);

glTranslatef( 3.0, 0.0, 0.0);

glutSolidCube( 1.0 );

glPopMatrix();

void Draw_clock( GLfloat cx, GLfloat cy, GLfloat cz )

int hour_ticks , sec_ticks;

glPushMatrix();

glTranslatef(cx,cy,cz);

glScaled(scalex,scaley,scalez);

glRotatef( 180, 1.0, 0.0, 0.0);

glPushMatrix(); // Draw clock face

glTranslatef( 0, 0, 1.0);

glScaled(scalex,scaley,scalez);

gluDisk(Disk, 0, 6.75, 32, 16);

glPopMatrix();

void about()

glClear(GL_COLOR_BUFFER_BIT);

glColor3f( 1.0, 1.0, 1.0);

printAt(0,120,"This project implements the clock");

printAt(0,100," Both Wall clock and digit clock");

printAt(0,80," is displayed");

printAt(0,60," Clock shows the local time");

Dept. of CS&E, MIT Mysore 2022-2023 8

Analog clock Computer Graphics Laboratory with Mini-Project [ 18CSL67 ]
printAt(0,40," fetching from computer");

glFlush();

void myKey(unsigned char key, int x, int y)

if(key == '+')

scalex += 0.1;

scaley += 0.1;

scalez += 0.1;

if(key == '-')

scalex -= 0.1;

scaley -= 0.1;

scalez -= 0.1;

void display_clock()

time(&ltime); // Get time

newtime = localtime(&ltime); // Convert to local time

glClear (GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);

glMatrixMode (GL_PROJECTION);

glLoadIdentity();

glOrtho(-8.0, 8.0, -8.0, 8.0, 1.0, 60.0);

glMatrixMode(GL_MODELVIEW);

glLoadIdentity();

glDisable(GL_LIGHTING);

glDisable(GL_COLOR_MATERIAL);

glColor3f( 1.0, 1.0, 1.0);

printAt(0,620,"To move near, press +");

Dept. of CS&E, MIT Mysore 2022-2023 9

Analog clock Computer Graphics Laboratory with Mini-Project [ 18CSL67 ]
printAt(0,600,"To move away, press -");

if(about_int != 0)

{ about(); }

printAt(120,10, asctime(newtime));

if (light_state == 1)

glEnable(GL_LIGHTING);

glEnable(GL_COLOR_MATERIAL); // Enable for lighting

}else

glDisable(GL_LIGHTING);

glDisable(GL_COLOR_MATERIAL); // Disable for lighting

Draw_clock( 0.0, 0.0, -14.0);

glutSwapBuffers();

void display(void)

glClear(GL_COLOR_BUFFER_BIT);

display_clock();

glFlush();

void reshape (int w, int h)

glViewport (0, 0, (GLsizei) w, (GLsizei) h);

glMatrixMode (GL_PROJECTION);

glLoadIdentity (); }

void options(int id)

switch(id)

case 1:

Dept. of CS&E, MIT Mysore 2022-2023 10

Analog clock Computer Graphics Laboratory with Mini-Project [ 18CSL67 ]
glClear(GL_COLOR_BUFFER_BIT|GL_DEPTH_BUFFER_BIT);

about_int= abs(about_int - 1);

break;

case 2:

glClear(GL_COLOR_BUFFER_BIT|GL_DEPTH_BUFFER_BIT);

light_state = abs(light_state - 1);

break;

case 3 :

exit(0);

int main(int argc, char** argv)

glutInit(&argc, argv);

glutInitDisplayMode (GLUT_DOUBLE | GLUT_RGB);

glutInitWindowSize (500, 500);

glutInitWindowPosition (50, 50);

glutCreateWindow (argv[0]);

glutSetWindowTitle("GLclock");

init ();

glutCreateMenu(options);

glutAddMenuEntry("About the Project",1);

glutAddMenuEntry("Light on/off",2);

glutAddMenuEntry("Quit",3);

glutAttachMenu(GLUT_RIGHT_BUTTON);

glutDisplayFunc(display);

glutReshapeFunc(reshape);

glutKeyboardFunc(myKey);

glutTimerFunc( 10, TimeEvent, 1);

glutMainLoop();

return 0;

Dept. of CS&E, MIT Mysore 2022-2023 11

Analog clock Computer Graphics Laboratory with Mini-Project [ 18CSL67 ]

CHAPTER-3
RESULT ANALYSIS
3.1 Snap shots

Dept. of CS&E, MIT Mysore 2022-2023 12

Analog clock Computer Graphics Laboratory with Mini-Project [ 18CSL67 ]

Dept. of CS&E, MIT Mysore 2022-2023 13

Analog clock Computer Graphics Laboratory with Mini-Project [ 18CSL67 ]

3.2 Discussion
The specific steps and code required will vary depending on the programming
language and graphics library you choose. It's important to refer to the documentation
and examples provided by the library to understand the specific syntax, functions, and
APIs required for creating an analog clock in computer graphics using that particular
technology.
• Choose a Programming Language:
Determine which programming language you want to use for creating the analog clock
in computer graphics. Common options GLUT ,OpenGL project depending on your
preferences and the graphics libraries available for that language.
• Select a Graphics Library
Identify a graphics library or framework that supports drawing and animation
capabilities. Some popular libraries include OpenGL, WebGL, DirectX, JavaFX, or
HTML5 Canvas, depending on the programming language you choose.
• Set up the Development Environment:
Install the necessary tools, libraries, and dependencies required for your chosen
programming language and graphics library. Refer to the documentation and resources
provided by the specific library for installation instructions.
• Write the Code:
Use the programming language and graphics library of your choice to write the code for
the analog clock. This typically involves defining the clock face, hands, and any other
visual elements, as well as implementing the animation and time-related functionality.
• Built and Run:
Once you have written the code, save the file with the appropriate file extension for the
chosen programming language (e.g., .c, .java, .py, .js). Compile the code using the
appropriate command or IDE-specific compilation options. Then, run the compiled
program or execute the script.
• Observe the Analog Clock:
The analog clock should now be displayed on your screen, showing the current time
and updating the clock hands accordingly. Interact with the clock as per the
functionality you have implemented (e.g., setting the time manually, adjusting
appearance).

Dept. of CS&E, MIT Mysore 2022-2023 14

Analog clock Computer Graphics Laboratory with Mini-Project [ 18CSL67 ]

CHAPTER-4

CONCLUSION AND FUTURE WORK

4.1 Conclusion
Analog clocks in computer graphics provide an engaging and visually appealing way
to represent time. By considering design principles, implementing appropriate
transformations, and incorporating additional features, we can create realistic and
customizable analog clocks. Whether used in educational tools, user interfaces, or
visualizations, analog clocks serve as valuable components, bridging the gap between
digital representations and our real-world understanding of time.

4.2 Future Enhancement

Analog clocks in computer graphics can be enhanced with various features: a.
Second Hand: Introduce a second hand to display the precise seconds. b. Styling and
Customization: Allow users to customize the clock's appearance, including colors,
fonts, and textures. c. Realistic Shading: Apply shading and lighting effects to create a
more realistic 3D appearance. d. Interaction: Enable user interaction, such as setting the
time manually or adjusting the clock's position and size.

Dept. of CS&E, MIT Mysore 2022-2023 15

Analog clock Computer Graphics Laboratory with Mini-Project [ 18CSL67 ]

CHAPTER-5

REFERENCES

➢ http://en.wikipedia.org/wiki/Clock

➢ https://github.com/mukulms123/Analog-clock

➢ http://www.w3schools.com

Dept. of CS&E, MIT Mysore 2022-2023 16

Analog clock Computer Graphics Laboratory with Mini-Project [ 18CSL67 ]

Dept. of CS&E, MIT Mysore 2022-2023 17