P02_Colision_de_Figuras - 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: 02 
NOMBRE DE LA PRÁCTICA: 
DEMOSTRACIÓN DE LA COLISIÓN DE FIGURAS 
 
 
ESTUDIANTE: 
MANRÍQUEZ COBIÁN ROGELIO 
NUA: 345988 
 
FECHA DE ENTREGA: 
09 DE DICIEMBRE DEL 2022 
 
 
 
 
 Gráficos por Computadora 
2 | P á g i n a 
 
Resumen—En la siguiente práctica se encontrará la 
demostración completa de cómo realizar colisiones de 
figuras, especialmente circulares escrito en C con 
ayuda de OpenGL, además de observar las pruebas y 
resultados del programa en funcionamiento en un 
vídeo. 
Palabras clave— GLUT, compilar, OpenGL, cuadrantes, 
colisiones. 
I. INTRODUCCIÓN 
Utilizando el Lenguaje C, el estándar gráfico OpenGL 
y el kit de herramientas de GLUT, se implementará la 
animación de la colisión de un grupo de figuras circulares, 
de las cuales trabajarán de la siguiente manera: 
• Inicializar con una cantidad de 10 círculos ubicados 
de forma aleatoria dentro de un plano cuadrado, 
• Mover los círculos en direcciones aleatorias y en 
diferentes velocidades, 
• Cuando dos círculos colisionen entre sí, estos 
desaparecerán, 
• Y el programa terminará hasta que ningún círculo 
quede activo. 
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. DESARROLLO 
En los siguientes bloques se estará explicando la 
manera de cómo se desarrolló la práctica de este ejercicio 
de las colisiones de figuras circulares. 
A. Planteamiento 
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 
• define numC 
Lo que realizará esta definición de variable será el número 
de círculos que se quiere mostrar en pantalla. 
 
Figura 1 - Cabeceras 
C. Estructuras 
Las siguientes estructuras de datos tomarán mucho en 
cuenta para la creación de los círculos, ya que estas nos 
estarán dando las guías de dónde dibujar las figuras. Fig. 2. 
• PUNTO 
La estructura “PUNTO” únicamente tiene dos variables 
flotantes para poder asignarlo en cualquier parte de nuestro 
plano. 
• CIRCULO 
Y, por último, la estructura “CIRCULO” tendrá un punto 
de referencia y un radio en formato flotante para ser dibujado. 
 
Figura 2 - Estructuras para figuras circulares 
En el siguiente bloque se estará explicando los prototipos 
de funciones y saber que argumentos tienen para su 
funcionamiento. 
 
 Gráficos por Computadora 
3 | P á g i n a 
 
D. Prototipos de Función 
En la siguiente Fig. 3. Se muestra los prototipos de 
función que son esenciales para el dibujo y animación de las 
figuras circulares. 
 
Figura 3 - Prototipos de Función 
La función “display” tiene un argumento vacío, ya que 
solamente mostrará en pantalla lo que se dibuje. 
La función “Circulo” tendrán como argumento la 
estructura indicada para cada uno de ellos. 
La función “Cuadrantes” solamente hará el llamado de la 
posición de los círculos en la ventana. 
La función “Animación” tendrá argumentos vacíos ya 
que solamente ayudará al llamado de otras funciones. 
Y luego de las declaraciones de función, tendremos unas 
cuantas variables globales, las cuales ayudarán en la 
manipulación de las figuras circulares para indicar su tamaño, 
posición y saber si es existente dentro del programa. Fig. 4. 
 
 Figura 4 - Constantes para la creación de círculos 
Las constantes de “pi” y “radio” ayudarán a realizar la 
forma del círculo, la constante que se puede cambiar sería el 
radio a conveniencia del usuario-programador. 
Ahora, se creará un arreglo del tipo de estructura 
“Circulo” la cual contendrá la cantidad de “numC” números 
de círculos definidos por esa variable global. 
Los siguientes arreglos llamados “posX” y “posY” nos 
ayudará a saber la posición que se encontrará esta cantidad de 
círculos en el plano. 
Luego, encontraremos una variable “cOn” que contendrá 
la cantidad de círculos que estarán presentes-activos dentro 
de la ventana, esta estará acompañada de la variable “ini” que 
la utilizaremos para indicar al programa cuando iniciar. Y por 
último se tiene la variable “speed” que nos ayudará a observar 
la velocidad con las que se mueven las figuras circulares. 
En bloque siguiente, se estará especificando mejor lo que 
realiza cada función del código desarrollado. 
E. Funciones 
• Función main 
En la función main, se estará realizando el llamado de 
funciones de acuerdo con el orden necesario para la ejecución 
del programa. Primeramente, se hará el llamado de inicializar 
los cuadrantes con los círculos que se proyectarán. 
Luego, haremos el llamado de las funciones especiales de 
glut para la creación de una ventana de tamaño (500x500), 
también se le pondrá un nombre a la ventana creada y le 
diremos que esa misma ventana tenga un fondo de color negro 
para percibir mejor los círculos que se crearán de color blanco. 
Entonces, con estas creaciones, haremos el llamado de la 
función “display” para poder comenzar a dibujar todo lo 
necesario para el programa. 
Así que, de esta manera, luego de dibujar lo necesario, 
únicamente se ocuparía la forma de animación de las 
colisiones, esto se logra con el llamado a la función 
“Animacion”. Por último con la función “glutMainLoop()” 
haremos que nuestra ventana se mantenga abierta hasta que 
termine de ejecutarse todo nuestro programa. Fig. 5. 
 
Figura 5 - Funciones necesarias para la ejecución del 
programa 
 
 
 
 
 
 Gráficos por Computadora 
4 | P á g i n a 
 
• Función display 
 Dentro de la función display, realizaremos 
primeramente la configuración del color que tendrá 
nuestras figuras circulares, por las que se configuraron de 
un color blanco para verlas claramente. 
 Luego, se realizará la creación de la cantidad de 
círculos definida en pantalla, de acuerdo con la función 
“Circulo”, y después de esa creación, dormiremos la 
pantalla durante 3 segundos, antes que inicie la ejecución 
del programa con las colisiones. Fig. 6. 
 
Figura 6 - Función display 
• Función Círculo 
Para la creación de un círculo, se ocupará de tres 
variables “x”, “y”, “theta”, estas se estarán utilizando para 
realizar el dibujado de la figura con un color de línea 
blanco, de acuerdo a un ángulo dado, después de ello se le 
asignará a las coordenadas (x,y) para almacenarse en esa 
posición. Fig. 7. 
 
Figura 7 - Creación de un círculo 
• Función Cuadrantes 
Para la función de cuadrantes, se estará manejando un 
espacio 2D para la manipulación de la posición de los 
círculos creados. 
 
Por ello, se necesita dos arreglos para mantener la 
posición de acuerdo con la cantidad de círculos a 
proyectar, para luego, generar estas posiciones manera 
aleatoria y no sobrepasar el tamaño de nuestro plano para 
que los círculos se mantengan de manera visible, de lo 
contrario, estos sí serán dibujados, pero no se notarán 
dentro del plano. Fig. 8. 
 
Figura 8 - Guardar posición de círculos 
Ahora,teniendo en cuenta la posición de los círculos, 
ubicaremos estos mismos en el espacio del primer cuadrante 
que se creó. 
 
Figura 9 - Posición de los círculos 
De igual forma, se estarán creando los tres cuadrantes 
restantes para la ubicación de los círculos de acuerdo con las 
coordenadas del plano que tiene la ventana. 
• Función Animación 
Dentro de la función animación se hará todo lo necesario 
que ocupa el programa. Lo primero que vamos a realizar es 
darle movimiento y velocidad a la mitad de los círculos que 
tenemos, por ello utilizaremos nuestra variable “time” para 
indicar un tiempo muy grande de velocidad, la primera 
condición hará el módulo del tamaño de “time” y si este es 
idéntico a cero, realizará el movimiento de los círculos 
dentro del plano que se creó además de ir actualizando su 
posición de acuerdo con los cuadrantes que de igual manera 
se crearon. También, se creará otra condición casi idéntica a 
la anterior, únicamente que está tendrá un valor de módulo 
diferente para manejar otra velocidad de la otra mitad de 
círculos creados. Fig. 10. 
 
Figura 10 - Asignación de velocidades de acuerdo con la 
variable time 
 
 Gráficos por Computadora 
5 | P á g i n a 
 
Entonces, estás condiciones se pueden modificar para 
tener una velocidad menor o mayor de acuerdo con los 
propósitos del usuario. 
Luego, tendremos una condición en dónde lo ideal es que 
cuando los círculos colisionen, estos desaparezcan y se 
termine de ejecutar el código. Por ello cuando esto suceda, 
dormiremos el programa al instante y se cerrará por 
completo. Fig. 11. 
 
Figura 11 - Termina ejecución de las colisiones 
Teniendo en cuenta el desarrollo principal del programa, 
a continuación, en el bloque siguiente se mostrará las 
pruebas y resultados. 
III. PRUEBAS Y RESULTADOS 
En esta sección, se mostrará en la siguiente Fig. X, que 
la compilación del código fue correcta y la animación de 
la colisión de las figuras se muestra en pantalla en una 
ventana. 
El mensaje de warning que lanza la línea de comandos, 
es porque la función está declarada implícitamente para 
poder usarse dentro del programa, haciendo que éste 
cuando inicialice inicie después de 3 segundos a la 
normalidad. Fig. 12. 
 
Figura 12 - Línea de comandos para compilar 
Después de la ejecución vemos por unos 3 segundos el 
acomodo que tienen nuestros círculos. Fig. 13. 
 
Figura 13 - Programa ejecutado exitosamente 
Podemos realizar la modificación de la posición de los 
círculos iniciales desde la función “Cuadrantes”, por lo 
tanto, se muestra otra manera del acomodo aleatorio de los 
círculos. 
A. Discusión de Resultados 
Realizar esta práctica fue retadora por los requisitos que 
se pidieron, dibujar cierta cantidad de dibujos resulta ser 
fácil, al igual que darle movimiento, pero realizar el tema de 
colisiones, es muy importante saber las físicas necesarias al 
momento de chocar estas en distintos puntos del plano. 
También es de suma importancia trabajar con estructuras 
de datos, ya que, resulta más sencillo y cómodo al momento 
de codificar lo que se vaya ocupando para la práctica y llevar 
un control sencillo. 
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 embargo, lo que tuvo mayor relevancia para el 
correcto funcionamiento del programa, fue el código 
implementado, ya que éste da las funcionalidades de 
movimiento y colisión a las figuras circulares, y solamente 
con el kit de herramientas se estaría logrando la parte visual 
que se involucra. 
Para concluir con esta práctica, espero seguir realizando 
prácticas acerca de las colisiones ya que es un tema de suma 
importancia para cualquier programa que involucre 
movimientos en ventana, por lo que se pondrá a prueba en el 
proyecto final, y también seguir aprendiendo acerca del kit 
de GLUT para el desarrollo de otras aplicaciones como la 
creación de videojuegos o el desarrollo de figuras 3D. 
REFERENCIAS 
[1] Manríquez, R. (s. f.). GitHub - RogerMxG/Collision-of-
Circles-using-OpenGL-GLUT: In this repository you're going 
found a functional code about Collision of Circles using 
OpenGL with GLUT library. GitHub. 
https://github.com/RogerMxG/Collision-of-Circles-using-
OpenGL-GLUT.git 
 
[2] Manríquez, R. (s. f.-b). Practica02_Colision_de_Figuras. 
OneDrive. https://ugtomx-
my.sharepoint.com/:v:/g/personal/r_manriquezcobian_ugto_m
x/ETqfzRN3Fb5PmPIk8havSBABocQV5Z6lp7Ct3E1Dwvx0
hg?e=TqtuQl 
 
 
https://github.com/RogerMxG/Collision-of-Circles-using-OpenGL-GLUT.git
https://github.com/RogerMxG/Collision-of-Circles-using-OpenGL-GLUT.git
https://ugtomx-my.sharepoint.com/:v:/g/personal/r_manriquezcobian_ugto_mx/ETqfzRN3Fb5PmPIk8havSBABocQV5Z6lp7Ct3E1Dwvx0hg?e=TqtuQl
https://ugtomx-my.sharepoint.com/:v:/g/personal/r_manriquezcobian_ugto_mx/ETqfzRN3Fb5PmPIk8havSBABocQV5Z6lp7Ct3E1Dwvx0hg?e=TqtuQl
https://ugtomx-my.sharepoint.com/:v:/g/personal/r_manriquezcobian_ugto_mx/ETqfzRN3Fb5PmPIk8havSBABocQV5Z6lp7Ct3E1Dwvx0hg?e=TqtuQl
https://ugtomx-my.sharepoint.com/:v:/g/personal/r_manriquezcobian_ugto_mx/ETqfzRN3Fb5PmPIk8havSBABocQV5Z6lp7Ct3E1Dwvx0hg?e=TqtuQl