P01_Animación_Reloj_Analógico - Rogelio Manríquez Cobián (9)

Vista previa del material en texto

Gráficos por Computadora 
1 | P á g i n a 
 
 
UNIVERSIDAD DE GUANAJUATO 
DIVISIÓN DE INGENIERÍAS CAMPUS IRAPUATO-SALAMANCA 
LIC. EN ING. EN SISTEMAS COMPUTACIONALES 
 
 
GRÁFICOS POR COMPUTADORA 
PROFESOR: DR. CARLOS HUGO GARCÍA CAPULÍN 
 
 
NO. DE PRÁCTICA: 01 
NOMBRE DE LA PRÁCTICA: 
ANIMACIÓN DE UN RELOJ ANALÓGICO 
 
 
ESTUDIANTE: 
MANRÍQUEZ COBIÁN ROGELIO 
NUA: 345988 
 
FECHA DE ENTREGA: 
04 DE NOVIEMBRE DEL 2022 
 
 
 
 
 
 Gráficos por Computadora 
2 | P á g i n a 
 
Resumen—En la siguiente práctica se encontrará la 
explicación completa de cómo construir un reloj analógico 
escrito en C con ayuda de OpenGL, además de observar 
las pruebas y resultados del programa en funcionamiento. 
Palabras clave— GLUT, compilar, OpenGL, estructura 
de datos, RGB. 
 
I. INTRODUCCIÓN 
Utilizando el Lenguaje C, el estándar gráfico OpenGLy el kit 
de herramientas de GLUT, se deberá implementar la 
animación de un reloj analógico, que muestre las tres 
manecillas correspondientes a las horas, minutos y segundos, 
realizando el debido movimiento respetando el paso de 
tiempo de la vida real como lo son los segundos, minutos y 
horas. 
A continuación, se explicará la metodología que se llevó 
a cabo para el desarrollo de la práctica usando las 
herramientas mencionadas bloque por bloque, además de 
observar el resultado final del programa. 
II. METODOLOGÍA 
 En los siguientes bloques se estará explicando la manera 
de cómo se desarrolló la práctica de este ejercicio del reloj 
analógico. 
A. Planteamiento 
El principal objetivo de la práctica es realizar el 
funcionamiento de un reloj analógico que cuente con sus 3 
manecillas, el segundero, el minutero y el horero haciendo 
que estas manecillas actúen de manera regular como en la 
vida real. 
Por lo tanto, en el siguiente bloque se explicará a detalle 
en cómo se llevó a cabo el desarrollo del código para tener 
resultados. 
B. Cabeceras 
Para el desarrollo del programa es fundamental utilizar 
estas cabeceras ya que con ellas se podrá realizar el dibujo del 
reloj, a continuación, se dará una breve explicación de la 
funcionalidad de cada una, Fig. 1. 
• gl\glut.h 
Se hará uso de las funciones de la biblioteca OpenGL-
Glut. 
• math.h 
Esta biblioteca nos ayudará a utilizar funciones 
trigonométricas dentro del programa. 
• stdio.h 
Esta biblioteca nos ayudará realizar todas las definiciones 
estándar del programa como entradas y salidas. 
• windows.h 
Esta cabecera utiliza todas las funciones para crear 
aplicaciones para Windows. 
 Si no se agregase la primera cabecera “gl\glut.h” no 
podremos ver en pantalla lo que se está realizando en el proceso, 
por lo que todo se estará ejecutando en hardware. 
 
Figura 1 - Cabeceras 
C. Estructuras 
A continuación, declararemos una estructura de tipo “enum”, 
la cual nos ayudará a enlistar nombres referentes a colores que 
podemos utilizar para dibujar nuestro reloj analógico, además 
declararemos de manera global un arreglo bidimensional 
llamado “PALETA_COLORES”, el cual contendrá la asignación 
de los colores anteriormente llamados por la estructura “enum” 
pero en un formato RGB, en dónde los valores tienen un límite 
de cero a uno. 
Algunas asignaciones de color se muestran en la Fig. 2. 
 
Figura 2 - Asignación de colores (RGB) 
Las siguientes estructuras de datos tomarán mucho en cuenta 
para la creación del reloj, ya que estas nos estarán dando las 
guías de dónde dibujar las figuras Fig. 3. 
La estructura “PUNTO” únicamente tiene dos variables 
flotantes para poder asignarlo en cualquier parte de nuestro 
plano. 
La estructura “LINEA” contendrá dentro dos variables de 
tipo “PUNTO”, la cual tendrá un inicio y un final la línea para 
que sea dibujada en el plano, además de contener un color de la 
estructura “COLOR” 
 
 Gráficos por Computadora 
3 | P á g i n a 
 
Y, por último, la estructura “CIRCULO” tendrá un punto 
de referencia y un radio en formato flotante para ser dibujado. 
 
Figura 3 - Estructuras Principales 
En el siguiente bloque se estará explicando los 
prototipos de funciones y saber que argumentos tienen para 
su funcionamiento. 
D. Prototipos de Función 
En la Fig. 4 se muestra los prototipos de funciones que 
son esenciales para el dibujo y funcionalidad del reloj 
analógico. 
 
Figura 4 - Prototipos de Función 
El prototipo de función “DibujarTexto” contendrá tres 
argumentos, el primer argumento será un apuntador llamado 
“Texto” de tipo “char” el cual nos ayudará a dibujar en 
pantalla cualquier carácter que sea deseable, además de 
contener dos variables de tipo flotante, para que sea dibujada 
en un punto específico en el plano. 
La función “AsignaColor” tiene como argumento un 
valor de la estructura “COLOR”. 
La función “display” tiene un argumento vacío, ya que 
solamente mostrará en pantalla lo que se dibuje. La función 
“Linea” y “Circulo” tendrán como argumento la estructura 
indicada para cada uno de ellos. 
La función “RotacionLinea” tendrá como argumentos el 
apuntador de la línea dibujada y tres variables flotantes, de los 
cuales dos servirán para el inicio y final de la línea y la otra 
variable será para calcular el ángulo del movimiento de la 
línea. 
La función “animar” tendrá argumentos vacíos ya que 
solamente ayudará al llamado de otras funciones. 
Ahora, tendremos algunas variables de manera global que 
nos ayudará a dibujar el círculo como lo es la variable “pi” que 
será una constante que no cambiará. 
Las variables “minFlag” y “hourFlag” ayudarán a saber 
cuándo se tienen que mover las manecillas cuando pase un 
determinado tiempo. 
Y por último se creará 3 tipos de datos con la estructura 
“LINEA” que las utilizaremos para identificar las manecillas 
del reloj Fig. 5. 
 
Figura 5 - Variables globales 
E. Funciones 
Dentro de la función “main” lo primero que se realizará 
será la creación de las manecillas del reloj desde un punto 
céntrico que se encontrará en nuestro plano de ventana. 
Para la línea del “segundero” la diferencia que tendrá es 
que su punto final será mayor que la del “minutero” y “horas” 
y tendrá una asignación de color blanco. 
De igual manera el “minutero” tendrá un punto fijo de 
inicio y un punto intermedio de largo para el punto final para 
diferenciarlo de las otras manecillas junto con un color gris. 
Después nos encontraremos con algunas funciones que son 
esenciales de la librería GLUT, la cual es el “glutInit()” que 
ayudará a extraer toda la línea de comandos que se requieran. 
Por lo tanto, las siguientes funciones nos ayudarán a 
configurar el tamaño de la ventana que nosotros queramos 
tener, además de asignarle un nombre a la ventana para poder 
identificarlo. Luego, se necesita redimensionar nuestra venta 
de acuerdo con los puntos de coordenadas que nosotros 
deseemos para tener un límite en ventana. 
Por último, haremos el llamado de la función “display” que 
realizará todo el proceso de dibujo del reloj de acuerdo con 
otras funciones que se llamarán. Fig. 6. 
 
 Gráficos por Computadora 
4 | P á g i n a 
 
 
Figura 6 - Función main (1) 
También llamaremos nuestra función “animar” que 
realizará todos los movimientos de rotación de reloj. 
 Y todo esto lo mantendremos abierto gracias a la función 
“glutMainLoop” ya que, sin ella, la ventana se cerraría en 
seguida. 
 
Figura 7 - Función main (2) 
Ahora con la función “display” dibujaremos nuestra 
ventana de un fondo color negro y lo que haremos será crear 
un círculo de color blanco en el centro de nuestro plano con 
un radio de 10 píxeles. 
Luego, dibujaremos dentro del círculo las secciones 
correspondientes a las horas que contiene el reloj (12 horas) 
con un tamaño de línea de inicio de 8 pixeles y 10 pixeles de 
final; para luego dibujar en cada una de las secciones de línea 
las horas en formato de números arábigos empezando del 1 al 
12. 
Paraluego terminar dibujando nuestras tres manecillas de 
reloj llamándolos con la función “Linea” como se muestra en la 
Fig. 8. 
 
Figura 8 - Función display (dibujo de figuras) 
Con la función “animar” realizaremos las animaciones 
de movimientos con las manecillas del reloj, la manecilla de 
segundo no tendrá una restricción en su forma de actuar, ya 
que siempre estará marcando cada segundo que pase, hasta 
completar un giro de 60 segundos, para activar una bandera 
que moverá la manecilla de minutero y desactivará esta 
bandera hasta que vuelvan a pasar 60 segundos en la 
manecilla del segundero. 
 
 
 
 Gráficos por Computadora 
5 | P á g i n a 
 
Cada vez que esté pasando el tiempo, veremos cómo se 
mueven las manecillas del segundero y minutero, y la manera 
que vamos a mover la manecilla de las horas, será cuando se 
haya completado 60 minutos o 3600 segundos gracias a una 
bandera, después de ello desactivaremos la bandera y la 
manecilla de la hora quedará fija hasta que se vuelva a 
completar el ciclo de segundos. 
Y todo esto necesita ser redibujado, por lo que se ocupa 
la función “glutPostRedisplay” para lograr esta animación 
como en la Fig. 9. 
 
Figura 9 - Animación de las manecillas 
Dentro de la función de “RotacionLinea” encontraremos 
expresiones matemáticas que ayudaran a realizar el 
movimiento adecuado de las manecillas de reloj, por ello 
utilizamos el apuntador a línea en específico del segundero, 
tanto como del minutero y horas para realizar los cambios en 
el tiempo que sea debido Fig. 10. 
 
Figura 10 - Rotación de Línea 
Para la sección del Texto se usará para darle un tipo de 
letra a los números que se imprimirán en pantalla, por ello se 
utiliza la función “glutBitmapCharacter” para seleccionar 
como argumento un tipo de letra determinado por las 
posiciones de las coordenadas fijas de las divisiones del reloj, 
Fig. 11. 
 
 
Figura 11 - Tipo de Letra al dibujar texto 
Luego de ello, usaremos la función “AsignaColor” para 
utilizarlo de acuerdo con lo dibujado en pantalla para ser 
identificado con facilidad, dentro de esta función es necesario 
utilizar nuestro arreglo bidimensional para tomar algún valor del 
formato RGB que se declararon desde un principio, Fig. 12. 
 
Figura 12 - Asignación de color 
A continuación, la función “Circulo” se encargará de realizar 
el dibujo de la figura de acuerdo con los parámetros de las 
coordenadas y un ángulo theta para presentarla en pantalla con 
una sola línea continua como se muestra en la Fig. 13. 
 
Figura 13 - Creación de un círculo 
Para la creación de la línea, solamente utilizaremos las 
coordenadas de punto inicial y final para dibujarla en la ventana 
del reloj utilizando una primitiva. Fig. 14. 
 
Figura 14 - Creación de una Línea 
Una vez escrito el programa, en el siguiente bloque 
observaremos su funcionalidad en un video el cual se compartirá 
en una liga. 
 
 
 Gráficos por Computadora 
6 | P á g i n a 
 
De igual manera, si se requiere obtener el código para uso 
académico en la sección de “REFERENCIAS” se podrá 
encontrar. [1] 
III. PRUEBAS Y RESULTADOS 
En esta sección, se mostrará en la siguiente Fig. 15, que la 
ejecución del código fue correcta y la animación del reloj se 
muestra en pantalla en una ventana. 
 
Figura 15 - Reloj analógico 
Para observar su funcionamiento adecuado a la práctica, 
se debe ir a la sección de “REFERENCIAS” [2]. 
A. A. Discusión de Resutlados 
Realizar esta práctica fue interesante por el enfoque 
que se le dio gracias a un ejemplo de la vida real, un reloj 
analógico. 
Es importante saber diversos temas sobre estructuras 
de datos para la práctica ya que, sin ellas, resultaría ser 
un código complicado de desarrollar, por lo tanto, con 
ellas podemos llevar un orden correcto. Por otro lado, el 
kit de herramientas que ofrece GLUT y el gráfico 
OpenGL es esencial para el desarrollo porque con ellas 
podemos observar todo mediante una ventana y con 
dibujos, sin el uso de ellas, únicamente el programa 
correría dentro de la computadora sin observar nada. 
Otro tema importante para el desarrollo de la práctica son 
las funciones trigonométricas básicas, ya que con ellas 
podemos dibujar curvas. 
 
Un ejemplo de ello dentro de la práctica fue dibujar el 
circulo y realizar las rotaciones de las manecillas del reloj 
junto con valores de ángulos theta y el valor de pi. 
Para concluir con esta práctica, espero seguir 
aprendiendo acerca de las herramientas que nos 
proporciona el kit de GLUT para el desarrollo de otras 
aplicaciones útiles que puedan ayudar durante el curso con 
ayuda del profesor para su orientación. 
AGRADECIMIENTO 
Se agradece mucho al Dr. Carlos García por su 
explicación del tema de los gráficos por computadora 
junto con las funcionalidades que tiene cada 
herramienta de OpenGL. 
REFERENCIAS 
[1] Manríquez, R. (s. f.). GitHub - RogerMxG/Analogic-Clock-
using-OpenGL-GLUT: In this repository you're going found a 
functional code about Analog Clock using OpenGL with GLUT 
library. GitHub. https://github.com/RogerMxG/Analogic-
Clock-using-OpenGL-GLUT 
 
[2] Manríquez, R. (s. f.-b). Practica01_Reloj_Analógico. 
OneDrive. https://ugtomx-
my.sharepoint.com/:v:/g/personal/r_manriquezcobian_ugto_mx
/Eb0qSgBQ-
s5FrBj67BmupBcBgrRODGlc9a1s9wc4OElTuQ?e=gNTLey 
 
 
 
https://github.com/RogerMxG/Analogic-Clock-using-OpenGL-GLUT
https://github.com/RogerMxG/Analogic-Clock-using-OpenGL-GLUT
https://ugtomx-my.sharepoint.com/:v:/g/personal/r_manriquezcobian_ugto_mx/Eb0qSgBQ-s5FrBj67BmupBcBgrRODGlc9a1s9wc4OElTuQ?e=gNTLey
https://ugtomx-my.sharepoint.com/:v:/g/personal/r_manriquezcobian_ugto_mx/Eb0qSgBQ-s5FrBj67BmupBcBgrRODGlc9a1s9wc4OElTuQ?e=gNTLey
https://ugtomx-my.sharepoint.com/:v:/g/personal/r_manriquezcobian_ugto_mx/Eb0qSgBQ-s5FrBj67BmupBcBgrRODGlc9a1s9wc4OElTuQ?e=gNTLey
https://ugtomx-my.sharepoint.com/:v:/g/personal/r_manriquezcobian_ugto_mx/Eb0qSgBQ-s5FrBj67BmupBcBgrRODGlc9a1s9wc4OElTuQ?e=gNTLey