Dibujando Objetos

Geomtricos
Nilton A. Garcia

COMPUTACIN Hilares

GRFICA
Dibujando Objetos Geomtricos Introduccin
puntos, lneas y polgonos Pxel
Vrtice
Lnea
Polgono

Dibujando con
OpenGL
Modo de dibujo
Especificando un color

Caractersticas
adicionales
Puntos
Lneas
Polgonos

Primitivas 2D
Primitivas I
Primitivas II

Ejercicios
Tablero de ajedrez
Lic. Nilton Alan Garca Hilares Tangram

Universidad Nacional Mayor de San Marcos

1.1
 Dibujando Objetos
Contenido Geomtricos
Nilton A. Garcia
Introduccin Hilares

Pxel
Vrtice
Lnea
Polgono
Dibujando con OpenGL Introduccin
Pxel
Modo de dibujo Vrtice
Lnea
Especificando un color Polgono

Dibujando con
Caractersticas adicionales OpenGL

Puntos Modo de dibujo

Especificando un color

Lneas Caractersticas
adicionales
Polgonos Puntos
Lneas
Primitivas 2D Polgonos

Primitivas I Primitivas 2D
Primitivas I
Primitivas II Primitivas II

Ejercicios
Ejercicios Tablero de ajedrez

Tablero de ajedrez Tangram

Tangram
1.2
 Dibujando Objetos
Introduccin Geomtricos
Nilton A. Garcia
Hilares
Cuando se aprende a renderizar cualquier tipo de grfico en
un ordenador, lo normal es empezar con los pxeles.
Pxel
Es el elemento ms pequeo en el monitor de un ordenador.
Introduccin
Pxel
Bsicamente se trabaja con un Vrtice

espacio de color (por ejemplo RGBA); Lnea

Polgono
en dicho espacio de color, este pxel Dibujando con
puede tener cualquiera de los colores OpenGL
Modo de dibujo

disponibles. As el nivel ms simple de Especificando un color

grficos de ordenador, sera: Caractersticas

adicionales
renderizar un punto en cualquier lugar Puntos
Lneas
de la pantalla y darle un color Polgonos

especfico. Primitivas 2D
Primitivas I
Primitivas II
A partir de este concepto simple, es posible producir en el Ejercicios
lenguaje de computadores favorito lneas, polgonos, crculos y Tablero de ajedrez
Tangram
otras figuras y grficos.

1.3
 Dibujando Objetos
Vrtices Geomtricos
Nilton A. Garcia
Hilares

Vertex
Un punto es representado por un conjunto de numeros en
Introduccin
punto flotante, este conjunto de puntos es llamado vertice. Pxel
Vrtice
Lnea
Polgono

OpenGL realiza todos los clculos Dibujando con

OpenGL
internos como si los vrtices fueran Modo de dibujo
Especificando un color
tridimensionales; es decir los vrtices
Caractersticas
especificados por el usuario como adicionales
Puntos
bidimensionales (solo coordenadas X Lneas

e Y ), son asignados de la coordenada Polgonos

Primitivas 2D
Z igual a cero. Primitivas I
Primitivas II

Ejercicios
Tablero de ajedrez
Tangram

1.4
 Dibujando Objetos
Lneas Geomtricos
Nilton A. Garcia
Hilares

Line
En OpenGL, una lnea se refiere a un segmento de lnea, no a
Introduccin
la version matemtica (infinita en ambas direcciones). Pxel
Vrtice
Lnea
Polgono

OpenGL tiene maneras fciles de Dibujando con

OpenGL
especificar una linea, una series de Modo de dibujo
Especificando un color
lneas conectadas entre si, o incluso Caractersticas
una serie de lneas cerradas. En todos adicionales
Puntos
los casos, las lneas son especificadas Lneas

en trminos de los vrtices de los Polgonos

Primitivas 2D
extremos de cada segmento de linea. Primitivas I
Primitivas II

Ejercicios
Tablero de ajedrez
Tangram

1.5
 Dibujando Objetos
Polgonos Geomtricos
Nilton A. Garcia
Hilares

Polygon
Un Polgono, es la area cerrada por un ciclo simple de
segmentos de lneas, donde los segmentos de linea son Introduccin
especificados por los vrtices de sus extremos finales Pxel
Vrtice
Lnea
Polgono

Dibujando con
OpenGL
Modo de dibujo
Especificando un color
Los polgonos, tpicamente son
Caractersticas
dibujados con los pxeles de su interior adicionales
Puntos
coloreados, pero tambin se pueden Lneas

renderizar como lneas o puntos. Polgonos

Primitivas 2D
Primitivas I
Primitivas II

Ejercicios
Tablero de ajedrez
Tangram

1.6
 Dibujando Objetos
Polgonos Geomtricos

Los polgonos pueden ser complicados, por eso OpenGL hace Nilton A. Garcia
Hilares
algunas restricciones fuertes, en que es lo que constituye una
primitiva polgono.
1 Los bordes de los polgonos OpenGL no se pueden intersecar.
2 Los polgonos OpenGL deben ser convexos.
Introduccin
Pxel
Vrtice
Lnea
Polgono

Dibujando con
OpenGL
Modo de dibujo
Especificando un color

Caractersticas
adicionales
Puntos
Lneas
Polgonos

Primitivas 2D
Primitivas I
Primitivas II

Ejercicios
Note que OpenGL no restringe el numero de lneas que forman el Tablero de ajedrez
Tangram
polgono, adems los polgonos no convexos tambin son dibujados,
pero al no poder ser dibujados con solo una secuencia cerrada de
lneas, puede que OpenGL no lo dibuje como usted esperaba. 1.7
 Dibujando Objetos
Entorno de dibujo Geomtricos
Nilton A. Garcia
Anteriormente, ya vimos que los eventos de animacin o Hilares
pintado son administrados por la funcin

glutDisplayFunc(Display )

donde Display es la funcin en la cual codificamos nuestra

animacin. Introduccin
Pxel
Vrtice

Ejemplo Lnea
Polgono

Dibujando con
void Display() OpenGL
{ Modo de dibujo
glClearColor(0.0,0.0,0.0,0.0); Especificando un color

glClear(GL_COLOR_BUFFER_BIT); Caractersticas
adicionales
Puntos
glBegin(Modo);
Lneas
. Polgonos
.
.
Primitivas 2D
glEnd(); Primitivas I
Primitivas II

glFlush(); Ejercicios
} Tablero de ajedrez
Tangram

Modo especifica la primitiva que sera creada de los vrtices

entre las subsecuencias glBegin y glEnd. 1.8
 Dibujando Objetos
Modo de dibujo Geomtricos
Nilton A. Garcia
Hilares
Especificacin
void glBegin(GLenum mode);
..
.
void glEnd( void);
Introduccin

Donde Modo especifica la forma en la que ser creada la primitiva de Pxel

Vrtice
los vrtices entre las subsecuencias glBegin y glEnd. Modo puede ser Lnea
Polgono
cualquiera de las siguientes constantes simblicas
Dibujando con
OpenGL
GL_POINTS Trata cada vrtice como un solo punto. Modo de dibujo
Especificando un color
GL_LINES Trata cada par de vrtice como una linea Caractersticas
independiente. adicionales
Puntos
Lneas
Polgonos

Primitivas 2D
Primitivas I
Primitivas II

Ejercicios
Tablero de ajedrez
Tangram

1.9
 Dibujando Objetos
Modo de dibujo Geomtricos
Nilton A. Garcia
GL_LINE_STRIP Dibuja una secuencia de lneas conectando desde Hilares
el primer hasta el ultimo vrtice.
GL_LINE_LOOP Igual a GL_LINE_STRIP, pero cerrando el grfico.

Introduccin
Pxel
Vrtice
Lnea
Polgono

Dibujando con
OpenGL
GL_TRIANGLES Trata cada terna de vrtices como un tringulo Modo de dibujo

independiente. Especificando un color

Caractersticas
GL_TRIANGLE_STRIP Dibuja un grupo conectado de tringulos. adicionales

Cada tringulo se define (V1 , V2 , V3 ) luego (V2 , V3 , V4 ) Puntos

Lneas
luego (V3 , V4 , V5 ) y as sucesivamente. Polgonos

Primitivas 2D
Primitivas I
Primitivas II

Ejercicios
Tablero de ajedrez
Tangram

1.10
 Dibujando Objetos
Modo de dibujo Geomtricos
Nilton A. Garcia
Hilares
GL_TRIANGLE_FAN Dibuja un grupo conectado de tringulos. Cada
tringulo se define (V1 , V2 , V3 ) luego (V1 , V3 , V4 )
luego (V1 , V4 , V5 ) y as sucesivamente.
GL_QUADS Trata cada grupo de cuatro vrtices como un
cuadriltero independiente.
Introduccin
GL_QUAD_STRIP Dibuja cuadrilteros conectados. Cada Pxel
Vrtice
cuadriltero es definido anlogamente a Lnea

GL_TRIANGLE_STRIP. Polgono

Dibujando con
GL_POLYGON Dibuja un solo polgono convexo. OpenGL
Modo de dibujo
Especificando un color

Caractersticas
adicionales
Puntos
Lneas
Polgonos

Primitivas 2D
Primitivas I
Primitivas II

Ejercicios
Tablero de ajedrez
Tangram

1.11
 Dibujando Objetos
Dibujando Vrtices Geomtricos
Nilton A. Garcia
Hilares

Para especificar un punto dibujado en la paleta 3D, se utiliza la

funcin OpenGL glVertex, sin ninguna duda la funcin ms
utilizada de todas las que ofrece la API de OpenGL. Es el
mnimo comn denominador de todas las primitivas de
Introduccin
OpenGL. La funcin glVertex toma como argumentos de 2 a 4 Pxel

parmetros de tipo numrico, de bytes a dobles. Vrtice

Lnea
Polgono

Especificacin Dibujando con

OpenGL
void glVertex*(Argumentos); Modo de dibujo
Especificando un color

Caractersticas
* representa la cantidad y el sufijo para los argumentos que se adicionales
Puntos
van a utilizar. Por ejemplo Lneas
Polgonos
glVertex2s(2, 3); Primitivas 2D

glVertex3d(0.0, 0.0, 3.141592); Primitivas I

Primitivas II

glVertex4f(2.3, 1.0, -2.2, 2.0); Ejercicios

Tablero de ajedrez
Tangram

1.12
 Dibujando Objetos
Especificando un color Geomtricos
Nilton A. Garcia
Hilares

En OpenGL, la descripcin de la forma de un objeto que esta siendo

dibujado es independiente de la descripcin de su color. Cualquier
objeto geomtrico que es dibujado con el esquema de color
especificado actualmente (por defecto se dibujan en color blanco).
En general, primero activamos un esquema de color y despus Introduccin
Pxel
dibujamos los objetos. Hasta que el esquema de color es cambiado Vrtice

todos los objetos se dibujan del mismo color del esquema. Lnea
Polgono

Por ejemplo para renderizar objetos de diversos colores, podemos Dibujando con
OpenGL
considerar el siguiente pseudocdigo Modo de dibujo
Especificando un color

Caractersticas
establecer_color_actual(rojo); adicionales
dibujar_objeto(A); Puntos
Lneas
dibujar_objeto(B); Polgonos

establecer_color_actual(verde); Primitivas 2D
Primitivas I
dibujar_objeto(C); Primitivas II

establecer_color_actual(azul); Ejercicios
dibujar_objeto(D); Tablero de ajedrez
Tangram

1.13
 Dibujando Objetos
Especificando un color Geomtricos
Nilton A. Garcia
Hilares
Para establecer un color, utilizamos la instruccin glColor*() la
cual toma de tres a cutro parmetros, todos ellos numeros en
punto flotante entre 0.0 y 1.0.
Especificacin
void glColor*(Argumentos); Introduccin
Pxel
Vrtice

Esta instruccin es parecida a glVertex*, de igual manera su Lnea

Polgono

formato depende del numero de argumentos y el tipo de Dibujando con

OpenGL
argumentos que va a recibir, por ejemplo Modo de dibujo
Especificando un color
glVertex3d(0.0, 0.0, 1.0); Caractersticas
adicionales
glVertex4f(0.5, 0.0, 0.2, 0.5); Puntos
Lneas

En general los tres primeros argumentos corresponden a las Polgonos

componentes rojo, verde y azul respectivamente, y el cuarto Primitivas 2D

Primitivas I

corresponde al parmetro alfa del modelo de color RGBA. Primitivas II

Cuando solo se utilizan 3 argumentos, por defecto, alfa toma el Ejercicios

Tablero de ajedrez
valor de 1.0. El color inicial es (1,1,1,1) correspondiente al Tangram

blanco y puede cambiarse en cualquier momento.

1.14
 Dibujando Objetos
Cambiando el color Geomtricos
Nilton A. Garcia
Hilares

Introduccin
Pxel
Vrtice
Lnea
Polgono

Dibujando con
OpenGL
Modo de dibujo
Especificando un color

Caractersticas
adicionales
Puntos
Lneas
Polgonos

Primitivas 2D
Primitivas I
Primitivas II

Ejercicios
Tablero de ajedrez
Tangram

1.15
 Dibujando Objetos
Cambiando el tamao de los puntos Geomtricos

Para controlar el tamao con el cual se renderizar un punto, Nilton A. Garcia

Hilares
podemos utilizar la instruccin glPointSize()
Especificacin
void glPointSize(GLfloat size);

El argumento size especifica el dimetro con el cual se renderizarn Introduccin

los puntos, su valor por defecto es 1. Pxel
Vrtice

Ejemplo Lnea
Polgono

Renderizar los cuatro vertices de un cuadrado, pero con diferente Dibujando con
OpenGL
color y tamao. Modo de dibujo
Especificando un color

Caractersticas
adicionales
glColor3f(1.0,0.0,1.0); Puntos

glPointSize(1.0); Lneas
Polgonos

Primitivas 2D
glBegin(GL_POINTS); Primitivas I
Primitivas II
glVertex2d(-0.5,0.5);
Ejercicios
glVertex2d(0.5,0.5); Tablero de ajedrez

glVertex2d(0.5,-0.5); Tangram

glVertex2d(-0.5,-0.5);
glEnd();
1.16
 Dibujando Objetos
Cambiando el tamao de los puntos Geomtricos
Nilton A. Garcia
Hilares

Resultados
Una implementacin de la porcin de cdigo mostrada
anteriormente da los siguientes resultados para los siguientes
valores de size Introduccin
Pxel
Vrtice
Lnea
Polgono

Dibujando con
OpenGL
Modo de dibujo
Especificando un color

Caractersticas
adicionales
Puntos
Lneas
Polgonos

Primitivas 2D
Primitivas I
Primitivas II
(3,0) (6,0) (9,0) Ejercicios
Tablero de ajedrez
Tangram

1.17
 Dibujando Objetos
Lneas con diferentes patrones Geomtricos

Con OpenGL, puedes especificar lneas con diferente ancho y lneas Nilton A. Garcia
Hilares
que son trazadas con diferentes patrones como puntos, guiones,
puntos y guiones alternados, etc.

Especificacin
void glLineWidth(GLfloat width);
Introduccin
width especifica el ancho con el cual las lneas son dibujadas. el valor Pxel
Vrtice
inicial, por defecto, es 1. Lnea
Polgono

Para hacer lneas con algn patrn, debemos utilizar la instruccin Dibujando con
OpenGL
glLineStipple() para definir un patrn, y despus activarlo y Modo de dibujo
Especificando un color
desactivarlo respectivamente con glEnable() y glDisable().
Caractersticas
adicionales
Especificacin Puntos
Lneas

void glLineStipple(GLint factor , GLushort pattern); Polgonos

Primitivas 2D
Primitivas I
factor especifica el mltiplo para cada bit en la linea del patrn. por Primitivas II
ejemplo si factor es 3, entonces cada bit del patrn se utiliza 3 veces Ejercicios
antes del siguiente bit del patrn. Tablero de ajedrez
Tangram

pattern especifica un entero de 16-bit, cuyos bits determinan los

patrones a usar. El patrn por defecto es puros 1. 1.18
 Dibujando Objetos
Lneas con diferentes patrones Geomtricos
Nilton A. Garcia
Algunos patrones bastante utilizados son los siguientes Hilares

Patrn Descripcin
0x0101 Linea construida a base de puntos
0xAAAA Linea construida a base de puntos estrechos
0x00FF Linea construida a base de guiones
Introduccin
0x0C0F Linea construida a base de guin punto Pxel

0x1C47 Linea construida a base de guin punto guin Vrtice

Lnea
Polgono

El formato para utilizar estas caractersticas es el siguiente Dibujando con

OpenGL
Modo de dibujo

glEnable(GL_LINE_STIPPLE); Especificando un color

glLineStipple (1, 0x0101); Caractersticas

adicionales
Puntos
Lneas
glBegin(GL_LINES); Polgonos

glVertex2d(-0.5,0.0); Primitivas 2D
Primitivas I
glVertex2d(0.5,0.0); Primitivas II

glEnd(); Ejercicios
Tablero de ajedrez
Tangram

glDisable(GL_LINE_STIPPLE);
1.19
 Dibujando Objetos
Lneas con diferentes patrones Geomtricos
Nilton A. Garcia
Hilares

Ejemplo
Renderizar lneas con cada uno de los patrones mencionados
anteriormente. Una implementacin de la porcin de cdigo
mostrada anteriormente da los siguientes resultados para los Introduccin
siguientes valores de factor Pxel
Vrtice
Lnea
Polgono

Dibujando con
OpenGL
Modo de dibujo
Especificando un color

Caractersticas
adicionales
Puntos
Lneas
Polgonos

Primitivas 2D
Primitivas I
Primitivas II

Ejercicios
(1,0) (3,0) (6,0) Tablero de ajedrez
Tangram

1.20
 Dibujando Objetos
Cambiando el relleno de un polgono OpenGL Geomtricos

Los polgonos son dibujados tpicamente llenando todos los pxeles Nilton A. Garcia
Hilares
encerrados por su frontera, pero se pueden renderizar solo el
contorno, o tan simple como puntos en los vertices. Un polgono
rellenado, puede tener relleno solido (un solo color) o un patrn como
relleno.

Introduccin
Pxel
Vrtice
Lnea
Polgono

Dibujando con
OpenGL
Modo de dibujo
Especificando un color

Caractersticas
adicionales
Puntos
Lneas
Polgonos

Primitivas 2D
Primitivas I
Un polgono tiene dos caras frontal y posterior y pueden ser Primitivas II
dibujados de formas diferentes, dependiendo de que lado estemos Ejercicios
mirando. Esto nos permite tener ilustraciones diferentes de objetos Tablero de ajedrez
Tangram
solidos en los que hay una distincin obvia entre las partes que estn
afuera y las que estn adentro. por defecto ambas caras son
dibujadas de la misma manera. 1.21
 Dibujando Objetos
Cambiando el relleno de un polgono OpenGL Geomtricos

Para cambiar la forma en la cual se dibujan las caras de nuestro Nilton A. Garcia
Hilares
polgono, podemos utilizar la instruccin glPolygonMode().

Especificacin
void glPolygonMode(GLenum face, GLenum mode);

face especifica el modo que se esta aplicando a los polgonos, el Introduccin

argumento face puede ser GL_FRONT_AND_BACK, GL_FRONT o Pxel

Vrtice
GL_BACK. Lnea
Polgono

mode especifica como sern dibujado los polgonos, este argumento Dibujando con
OpenGL
acepta alguno de los siguientes valores GL_POINT, GL_LINE, o Modo de dibujo

GL_FILL. El valor inicial , por defecto, es GL_FILL para ambas caras Especificando un color

del polgono. Caractersticas

adicionales
Puntos
El formato para utilizar estas caractersticas es el siguiente Lneas
Polgonos

Primitivas 2D
glPolygonMode(GL_FRONT_AND_BACK, GL_POINT); Primitivas I
Primitivas II

glBegin(GL_POLYGON); Ejercicios
Tablero de ajedrez
glVertex2d(-0.5,0.5); glVertex2d(0.5,0.5); Tangram

glVertex2d(0.5,-0.5); glVertex2d(-0.5,-0.5);
glEnd();
1.22
 Dibujando Objetos
Cambiando el relleno de un polgono OpenGL Geomtricos
Nilton A. Garcia
Hilares

Ejemplo
Renderizar polgonos con cada uno de los modos
mencionados anteriormente. Una implementacin de la
porcin de cdigo mostrada anteriormente da los siguientes Introduccin
resultados para los siguientes valores de mode Pxel
Vrtice
Lnea
Polgono

Dibujando con
OpenGL
Modo de dibujo
Especificando un color

Caractersticas
adicionales
Puntos
Lneas
Polgonos

Primitivas 2D
Primitivas I
Primitivas II

Ejercicios
GL_POINT GL_LINE GL_FILL Tablero de ajedrez
Tangram

1.23
 Dibujando Objetos
Cambiando el relleno de un polgono OpenGL Geomtricos

Por defecto, los polgonos son dibujados con un patrn solido, pero Nilton A. Garcia
Hilares
tambin pueden ser llenados con un patrn alineado en un marco de
32-bits por 32-bits, lo cual se especifica con glPolygonStipple().

Especificacin
void glPolygonStipple(const GLubyte *mask );
Introduccin

mask define el patrn actual para llenar los polgonos, este Pxel
Vrtice
argumento es un puntero a un bitmap de 32 32, que es interpretado Lnea
Polgono
como una mascara de ceros y unos. Donde aparece un 1 se dibuja el
Dibujando con
pixel correspondiente en el relleno, y donde aparece un cero nada se OpenGL
dibuja. Modo de dibujo

Ejemplo de mascara de 32 32 Especificando un color

Caractersticas
adicionales
Puntos
Lneas
Polgonos

Primitivas 2D
Primitivas I
Primitivas II

Ejercicios
Tablero de ajedrez
Tangram

1.24
 Dibujando Objetos
Cambiando el relleno de un polgono OpenGL Geomtricos
Nilton A. Garcia
Hilares

Una ves especificado el patrn con el cual rellenaremos

nuestros polgonos, lo activamos y desactivamos con
glEnable() y glDisable() respectivamente.
Ejemplo
Introduccin
Renderizar polgonos con diferentes patrones de relleno, como Pxel
Vrtice
por ejemplo el patrn correspondiente a la imagen anterior Lnea
Polgono

Dibujando con
OpenGL
GLubyte mosca[] = {
Modo de dibujo
0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00, 0x00,
Especificando un color
0x03, 0x80, 0x01, 0xC0, 0x06, 0xC0, 0x03, 0x60,
0x04, 0x60, 0x06, 0x20, 0x04, 0x30, 0x0C, 0x20, Caractersticas
0x04, 0x18, 0x18, 0x20, 0x04, 0x0C, 0x30, 0x20, adicionales
0x04, 0x06, 0x60, 0x20, 0x44, 0x03, 0xC0, 0x22,
Puntos
0x44, 0x01, 0x80, 0x22, 0x44, 0x01, 0x80, 0x22,
0x44, 0x01, 0x80, 0x22, 0x44, 0x01, 0x80, 0x22, Lneas
0x44, 0x01, 0x80, 0x22, 0x44, 0x01, 0x80, 0x22, Polgonos
0x66, 0x01, 0x80, 0x66, 0x33, 0x01, 0x80, 0xCC,
Primitivas 2D
0x19, 0x81, 0x81, 0x98, 0x0C, 0xC1, 0x83, 0x30,
0x07, 0xe1, 0x87, 0xe0, 0x03, 0x3f, 0xfc, 0xc0, Primitivas I
0x03, 0x31, 0x8c, 0xc0, 0x03, 0x33, 0xcc, 0xc0, Primitivas II
0x06, 0x64, 0x26, 0x60, 0x0c, 0xcc, 0x33, 0x30,
0x18, 0xcc, 0x33, 0x18, 0x10, 0xc4, 0x23, 0x08, Ejercicios
0x10, 0x63, 0xC6, 0x08, 0x10, 0x30, 0x0c, 0x08, Tablero de ajedrez
0x10, 0x18, 0x18, 0x08, 0x10, 0x00, 0x00, 0x08 } ; Tangram

1.25
 Dibujando Objetos
Cambiando el relleno de un polgono OpenGL Geomtricos
Nilton A. Garcia
Hilares
Ejemplo
Renderizar polgonos con cada uno de los patrones mencionados
anteriormente. Una implementacin utilizando GL_FILL y
GL_POLYGON_STIPPLE con dos patrones diferentes, se muestra a
continuacin
Introduccin
Pxel
Vrtice
Lnea
Polgono

Dibujando con
OpenGL
Modo de dibujo
Especificando un color

Caractersticas
adicionales
Puntos
Lneas
Polgonos

Primitivas 2D
Primitivas I
Primitivas II

Ejercicios
Tablero de ajedrez
Tangram

1.26
 Dibujando Objetos
Dibujando polgonos no convexos Geomtricos
Nilton A. Garcia
OpenGL solo puede renderizar polgonos convexos, pero muchos Hilares

polgonos no convexos aparecen en la practica, para renderizar estos

polgonos no convexos , tpicamente los disidimos en polgonos
convexos, usualmente utilizamos tringulos para estas divisiones.
Desafortunadamente si descomponemos el polgono en tringulos y
luego los dibujamos no podemos utilizar glPolygonMode() para
Introduccin
renderizar los contornos, porque obtendramos los contornos de Pxel
todos los tringulos que lo conforman. Por ejemplo consideremos Vrtice
Lnea
Polgono

Dibujando con
OpenGL
Modo de dibujo
Especificando un color

Caractersticas
adicionales
Puntos
Lneas
Polgonos

Primitivas 2D
Primitivas I
Primitivas II

Ejercicios
Tablero de ajedrez
Tangram

1.27
 Dibujando Objetos
Dibujando polgonos no convexos Geomtricos

Implementamos lo anterior, con sus respectivos modos; las tres Nilton A. Garcia
Hilares
primeras GL_POLYGON y las otras GL_TRIANGLE_STRIP

Introduccin
Pxel
Vrtice
Lnea
Polgono

Dibujando con
OpenGL
Modo de dibujo

GL_POINT GL_LINE GL_FILL Especificando un color

Caractersticas
adicionales
Puntos
Lneas
Polgonos

Primitivas 2D
Primitivas I
Primitivas II

Ejercicios
Tablero de ajedrez
Tangram

GL_LINE GL_FILL 1.28

 Dibujando Objetos
Primitivas I Geomtricos
Nilton A. Garcia
En el mundo fsico los objetos poseen formas variadas que no Hilares

necesariamente guardan relacin con los objetos en la

geometra bsica. por lo que en sew aproximan de la mejor
forma posible teniendo en cuenta las limitaciones del
hardware. ya que al fin y al cabo hay un dicho en computacin
grfica si luce bien, esta bien. Introduccin
Pxel
Vrtice

OpenGL hace uso del lo que sus creadores llaman el Lnea

Polgono

paradigma Begin/End. que simplemente es la forma en que Dibujando con

OpenGL
se pasan las instrucciones para indicar al API como se deben Modo de dibujo

armar las primitivas, a travs de dos funciones: Especificando un color

Caractersticas
adicionales
void glBegin( enum modo ); Puntos
Lneas
void glEnd( void ) Polgonos

Primitivas 2D
Seleccionando un modo, anteriormente ya vimos los valores Primitivas I
Primitivas II

que puede tomar, y en adicin con la instruccin glVertex*() Ejercicios

construimos nuestras primitivas bsicas (lneas, tringulos y Tablero de ajedrez
Tangram
polgonos).

1.29
 Dibujando Objetos
Primitivas I Geomtricos
Nilton A. Garcia
Hilares

En la practica suelen repetirse constantemente ciertas primitivas, Es

necesario cuantificar sus vertices para poder renderizar cada una de
ellas?

Ejemplo
Introduccin
Renderizar tres cuadrados como se Pxel

muestra en la figura Vrtice

Lnea
Polgono

Observaciones Dibujando con

OpenGL
Para realizar el dibujo, Modo de dibujo
Especificando un color
necesitamos conocer los 16
Caractersticas
vertices adicionales
Puntos
Se pudo haber utilizado 3 Lneas

modos diferentes de dibujo, Polgonos

Primitivas 2D
as como uno solo Primitivas I
Primitivas II
Mientras ms objetos
Ejercicios
renderizamos mas lneas de Tablero de ajedrez

cdigo necesitamos Tangram

1.30
 Dibujando Objetos
Primitivas I Geomtricos
Nilton A. Garcia
Por ejemplo, escogiendo tres modos diferentes, se puede renderizar la escena Hilares
pedida, mediante la siguiente funcin

Display()
glClearColor(0.0,0.0,0.0,0.0);
glClear(GL_COLOR_BUFFER_BIT);

glColor3f (1.0, 0.0, 1.0);

Introduccin
glBegin(GL_QUADS); Pxel
glVertex2f(-0.8,-0.4); Vrtice
glVertex2f(-0.4,-0.4); Lnea
glVertex2f(-0.4,-0.8); Polgono
glVertex2f(-0.8,-0.8);
glEnd(); Dibujando con
OpenGL
glColor3f (0.0, 1.0, 1.0); Modo de dibujo
Especificando un color
glBegin(GL_TRIANGLE_STRIP);
glVertex2f(-0.2,-0.2); Caractersticas
glVertex2f(0.2,-0.2); adicionales
glVertex2f(-0.2,0.2); Puntos
glVertex2f(0.2,0.2); Lneas
glEnd();
Polgonos

glColor3f (1.0, 1.0, 0.0); Primitivas 2D

Primitivas I
glBegin(GL_POLYGON);
Primitivas II
glVertex2f(0.8,0.4);
glVertex2f(0.4,0.4); Ejercicios
glVertex2f(0.4,0.8);
Tablero de ajedrez
glVertex2f(0.8,0.8);
Tangram
glEnd();

glFlush ();

1.31
 Dibujando Objetos
Creando nuestras propias primitivas: Cuadrado Geomtricos
Nilton A. Garcia
Hilares
Una forma alternativa de renderizar la figura anterior, es
utilizando los mismos modos para cada cuadrado, as hubiera
sido ms fcil notar que podemos usar tcnicas de la
programacin modular (funciones) para reducir el nmero de
lneas de cdigo, as como la posibilidad insertar nuevos
Introduccin
errores al codificar. Pxel
Vrtice
Lnea
Polgono
Ejemplo Dibujando con
OpenGL
Para esto creemos la funcin Cuadrado(), con las siguientes Modo de dibujo
Especificando un color
caractersticas
Caractersticas
adicionales
1 Se ubicar el cuadrado en base al vrtice superior Puntos

izquierdo (argumentos X , Y ) Lneas

Polgonos

2 Se renderizar el cuadrado en base a la medida su lado Primitivas 2D

Primitivas I
(argumento lado) Primitivas II

3 Se renderizar el cuadrado con un color especifico Ejercicios

Tablero de ajedrez

(argumentos R, V , A) Tangram

1.32
 Dibujando Objetos
Creando nuestras propias primitivas: Cuadrado Geomtricos
Nilton A. Garcia
Una posible implementacin para dicha funcin, seria la siguiente Hilares

void Cuadrado (float X , float Y, float Lado, float R, float V, float A)

{

glColor3f(R,V,A)
Introduccin
Pxel

glBegin(GL_QUADS); Vrtice
Lnea
glVertex2f(X, Y); Polgono

glVertex2f(X + Lado, Y); Dibujando con

OpenGL
glVertex2f(X + Lado, Y - Lado ); Modo de dibujo

glVertex2f(X, Y - Lado ); Especificando un color

Caractersticas
glEnd(); adicionales
Puntos
Lneas
} Polgonos

Primitivas 2D
De esta manera el cdigo de la escena anterior se reduce Primitivas I

drsticamente, ya que conjunto de lneas referentes a un cuadrado Primitivas II

Ejercicios
son reemplazadas por solo una, por ejemplo Tablero de ajedrez
Tangram

Cuadrado(-0.8,-0.4,0.4,1.0,0.0,1.0);
1.33
 Dibujando Objetos
Creando nuestras propias primitivas: Recta Geomtricos

No solo podemos considerar el color como argumento en Nilton A. Garcia

Hilares
nuestras primitivas, tambin podemos considerar otros
atributos como por ejemplo el grosor, modo y el patrn.
Ejemplo
Codifiquemos la funcin Recta(), con las siguientes
Introduccin
caractersticas Pxel
Vrtice
1 Se ubicar la recta en base a sus extremos (argumentos Lnea
Polgono
X0 , Y0 , X1 , Y1 )
Dibujando con
OpenGL
2 Se renderizar la recta con un color especifico Modo de dibujo

(argumentos R, V , A) Especificando un color

Caractersticas
3 Se renderizar la recta con un ancho especifico adicionales
Puntos
(argumento A) Lneas
Polgonos
4 Se renderizar la recta con alguno de los 5 patrones Primitivas 2D
vistos antes, sin necesidad de que el usuario sepa como Primitivas I
Primitivas II
escribir dicho patrn (argumento P) Ejercicios
Tablero de ajedrez

Mientras ms caractersticas agreguemos a la funcin, ms Tangram

argumentos necesitamos, entonces se podra usar arreglos

para disminuir en cierto modo la cantidad de argumentos. 1.34
 Dibujando Objetos
Creando nuestras propias primitivas: Recta Geomtricos
Nilton A. Garcia
Como los argumentos A y P, no siempre van a ser utilizados, podemos declararlos con Hilares
valores por defecto a 1 y 0xFFFF respectivamente.

Ejemplo: posible codificacin

void Recta(float *X0, float *X1, float *C, float A = 1, int P = 0)
{
glColor3fv(C);
glLineWidth(A); Introduccin
Pxel

glEnable(GL_LINE_STIPPLE); Vrtice
Lnea
Polgono
switch (P)
{ Dibujando con
OpenGL
case 1: glLineStipple (1, 0x0101); break; Modo de dibujo
case 2: glLineStipple (1, 0xAAAA); break; Especificando un color
case 3: glLineStipple (1, 0x00FF); break;
Caractersticas
case 4: glLineStipple (1, 0x0c0F); break; adicionales
case 5: glLineStipple (1, 0x1C47); break; Puntos
default: glLineStipple (1, 0xFFFF); break; Lneas
} Polgonos

Primitivas 2D
glBegin(GL_LINES); Primitivas I
glVertex2fv(X0); Primitivas II

glVertex2fv(X1); Ejercicios
glEnd(); Tablero de ajedrez
Tangram
glDisable(GL_LINE_STIPPLE);
}
1.35
 Dibujando Objetos
Creando nuestras propias primitivas: Recta Geomtricos
Nilton A. Garcia
Hilares
Ejemplo
Diversas combinaciones para los argumentos de nuestra primitiva Recta()

Introduccin
Pxel
Vrtice
Lnea
Polgono

Dibujando con
OpenGL
Modo de dibujo
Especificando un color

Caractersticas
adicionales
Puntos
Lneas
Polgonos

Primitivas 2D
Primitivas I
Primitivas II

Ejercicios
Tablero de ajedrez
Tangram

1.36
 Dibujando Objetos
Creando nuestras propias primitivas: Rectngulo Geomtricos
Nilton A. Garcia
Hilares

As mismo las ideas utilizadas, en la construccin de la

primitiva Recta(), pueden utilizarse para mejorar un poco la
primitiva Cuadrado(), as tendramos la primitiva Rectangulo()
Introduccin
con las siguientes caractersticas Pxel
Vrtice
1 Se ubicar el rectngulo en base al vrtice superior Lnea
Polgono
izquierdo (argumentos X , Y )
Dibujando con
OpenGL
2 Se renderizar el rectngulo en base a la medida su lado Modo de dibujo

y ancho (argumento lado, ancho ) Especificando un color

Caractersticas
3 Se renderizar el cuadrado con un color especifico adicionales
Puntos
(argumentos R, V , A) Lneas
Polgonos
4 Se renderizar el cuadrado con un modo especifico i.e. Primitivas 2D
puntos, rectas o relleno (argumento Modo) Primitivas I
Primitivas II

Ejercicios
Tablero de ajedrez
Tangram

1.37
 Dibujando Objetos
Creando nuestras propias primitivas: Rectngulo Geomtricos
Nilton A. Garcia
Una posible implementacin para dicha funcin, seria la siguiente Hilares

Ejemplo: Posible implementacin

void Rectangulo (float *XY , float *S, float *C, int M = 1 , float G = 1)
{
glColor3fv(C);
switch (M)
{ Introduccin
case 2: { Pxel
Vrtice
glPolygonMode(GL_FRONT_AND_BACK,GL_POINT);
Lnea
glPointSize(G);
Polgono
break;
} Dibujando con
OpenGL
case 3: { Modo de dibujo
glPolygonMode(GL_FRONT_AND_BACK, GL_LINE); Especificando un color
glLineWidth(G);
Caractersticas
break; adicionales
} Puntos
default: glPolygonMode(GL_FRONT_AND_BACK, GL_FILL); Lneas
} Polgonos

Primitivas 2D
glBegin(GL_QUADS); Primitivas I
glVertex2f(XY[0], XY[1]); Primitivas II

glVertex2f(XY[0] + S[1], XY[1]); Ejercicios

glVertex2f(XY[0] + S[1], XY[1] - S[0] ); Tablero de ajedrez
glVertex2f(XY[0], XY[1] - S[0] ); Tangram
glEnd();
}
1.38
 Dibujando Objetos
Creando nuestras propias primitivas Geomtricos
Nilton A. Garcia
Hilares

Ejemplo
Construir la siguiente escena, utilizando las primitivas que
codificaron anteriormente
Introduccin
Pxel

Observaciones Vrtice
Lnea
Polgono
Combinar de manera
Dibujando con
adecuada los parmetros OpenGL
Modo de dibujo
R,G y B para obtener los Especificando un color

colores deseados Caractersticas

adicionales
Tener en cuenta el orden Puntos
Lneas
en el que se crean los Polgonos

objetos, ya que Primitivas 2D

Primitivas I
visualizamos en orden Primitivas II

contrario a su creacin Ejercicios

Tablero de ajedrez
Tangram

1.39
 Dibujando Objetos
Creando nuestras propias primitivas: Rectngulo Geomtricos

Una posible implementacin para crear la escena pedida es Nilton A. Garcia

Hilares

glClearColor(1.0,1.0,1.0,0.0);
glClear(GL_COLOR_BUFFER_BIT);

float x1[] ={-0.8,0.6}, x2[]={-0.6,0.4}, x3[] ={0.3,0.4};

float x4[] ={-0.6,-0.4}, x5[]={-0.15,0.15}; x6[]={0.8,0.63}; Introduccin

float x7[]={-0.8,0.63}, x8[]={0,0,0}, S1[] = {1.2,1.6}; Pxel

Vrtice
float S2[] = {0.2,0.3}, S3[] = {0.1,1.2}, S4[] = {0.3,0.3}; Lnea
Polgono
float c1[] ={0.9,0.6,0.6}, c2[] ={1,1,1}, c3[] ={1,0,0};
Dibujando con
float c4[] ={0.89,0.37,0}; OpenGL
Modo de dibujo
Especificando un color
Rectangulo(x1,S1,c1,0,1); Caractersticas
Rectangulo(x2,S2,c2,0,1); adicionales
Puntos
Rectangulo(x3,S2,c2,0,1); Lneas

Rectangulo(x4,S3,c3,0,1); Polgonos

Primitivas 2D
Rectangulo(x5,S4,c4,0,1); Primitivas I
Cuadrado(-0.6,-0.3,0.1,1,0,0); Primitivas II

Cuadrado(0.5,-0.3,0.1,1,0,0); Ejercicios
Tablero de ajedrez
Cuadrado(-0.5,0.35,0.1,0,1,0); Tangram

Cuadrado(0.4,0.35,0.1,0,1,0);
Linea(x6,x7,x8,10,13,2);
1.40
 Dibujando Objetos
Ajedrez Geomtricos

El ajedrez es un juego entre dos personas, cada una de las cuales Nilton A. Garcia
Hilares
dispone de 16 piezas mviles que se colocan sobre un tablero
dividido en 64 escaques. Se juega sobre un tablero cuadriculado de
8 8 casillas, alternadas en colores blanco y negro, que constituyen
las 64 posibles posiciones para el desarrollo del juego.

Al principio del juego cada jugador tiene Introduccin

diecisis piezas: un rey, una dama, dos Pxel
Vrtice
alfiles, dos caballos, dos torres y ocho Lnea
Polgono
peones. Se trata de un juego de estrategia
Dibujando con
en el que el objetivo es derrocar al rey OpenGL
del oponente. Modo de dibujo
Especificando un color

Caractersticas
adicionales
Esto se hace amenazando la casilla que Puntos
ocupa el rey con alguna de las piezas Lneas
Polgonos
propias sin que el otro jugador pueda
Primitivas 2D
proteger a su rey interponiendo una pieza Primitivas I

entre su rey y la pieza que lo amenaza, Primitivas II

mover su rey a un escaque libre o capturar Ejercicios

Tablero de ajedrez
a la pieza que lo est amenazando, lo que Tangram

trae como resultado el jaque mate y el fin

de la partida.
1.41
 Dibujando Objetos
Tablero de ajedrez Geomtricos
Nilton A. Garcia
Ejercicio 2 Hilares

Renderizar el siguiente tablero de ajedrez, utilizando las

primitivas, que hemos visto, de forma conveniente

Introduccin
Pxel
Vrtice
Lnea
Polgono

Dibujando con
OpenGL
Modo de dibujo
Especificando un color

Caractersticas
adicionales
Puntos
Lneas
Polgonos

Primitivas 2D
Primitivas I
Primitivas II

Ejercicios
Tablero de ajedrez
Tangram

1.42
 Dibujando Objetos
Tablero de ajedrez Geomtricos
Nilton A. Garcia
Ejercicio 2 Hilares

Renderizar el siguiente tablero de ajedrez, utilizando las

primitivas, que hemos visto, de forma conveniente

Introduccin
Pxel
Vrtice
Lnea
Polgono

Dibujando con
OpenGL
Modo de dibujo
Especificando un color

Caractersticas
adicionales
Puntos
Lneas
Polgonos

Primitivas 2D
Primitivas I
Primitivas II

Ejercicios
Tablero de ajedrez
Tangram

1.43
 Dibujando Objetos
Tablero de ajedrez Geomtricos
Nilton A. Garcia
Ejercicio 3 Hilares

Renderizar el siguiente tablero de ajedrez, utilizando las

primitivas, que hemos visto, de forma sistematizada

Introduccin
Pxel
Vrtice
Lnea
Polgono

Dibujando con
OpenGL
Modo de dibujo
Especificando un color

Caractersticas
adicionales
Puntos
Lneas
Polgonos

Primitivas 2D
Primitivas I
Primitivas II

Ejercicios
Tablero de ajedrez
Tangram

1.44
 Dibujando Objetos
Tangram Geomtricos

El Tangram es un que juguete surgi en China y se le llam Nilton A. Garcia

Hilares
Chi Chiao Pan. Tambin se le conoce como Juego de los
siete elementos o Tabla de la sabidura. Mucho se dice sobre
este ancestral juego, pero realmente no se sabe quin fue su
inventor ni cundo se cre.

Las primeras publicaciones relativas a este juguete datan del Introduccin

Pxel

siglo XVIII. Este juego, conocido tambin como el Vrtice

Lnea
rompecabezas chino, se hizo tan popular que jugaban con el Polgono

nios y adultos. Dibujando con

OpenGL
Modo de dibujo
Especificando un color
El Tangram es un juego Caractersticas
educativo que incentiva la adicionales
Puntos
imaginacin de nios y adultos. Lneas
Polgonos
Es un puzzle que est formado Primitivas 2D
por varias piezas que pueden Primitivas I
Primitivas II
unirse de multitud de maneras, Ejercicios
permitiendo as, la creacin de Tablero de ajedrez
Tangram
miles de figuras o imgenes.

1.45
 Dibujando Objetos
Dibujando un tangram Geomtricos
Nilton A. Garcia
Ejercicio 4 Hilares

Renderizar la estructura del tangram, utilizando los modos y

sus caractersticas de forma conveniente

Introduccin
Pxel
Vrtice
Lnea
Polgono

Dibujando con
OpenGL
Modo de dibujo
Especificando un color

Caractersticas
adicionales
Puntos
Lneas
Polgonos

Primitivas 2D
Primitivas I
Primitivas II

Ejercicios
Tablero de ajedrez
Tangram

1.46
 Dibujando Objetos
Dibujando un tangram Geomtricos
Nilton A. Garcia
Ejercicio 5 Hilares

Renderizar la estructura del tangram, utilizando los modos y

sus caractersticas de forma conveniente

Introduccin
Pxel
Vrtice
Lnea
Polgono

Dibujando con
OpenGL
Modo de dibujo
Especificando un color

Caractersticas
adicionales
Puntos
Lneas
Polgonos

Primitivas 2D
Primitivas I
Primitivas II

Ejercicios
Tablero de ajedrez
Tangram

1.47
 Dibujando Objetos
Dibujando un tangram Geomtricos
Nilton A. Garcia
Hilares

Ejercicio 6
Ahora practiquemos armando una de las mil y un posibles
figuras, por decir el cisne
Introduccin
Pxel
Vrtice
Lnea
Polgono

Dibujando con
OpenGL
Modo de dibujo
Especificando un color

Caractersticas
adicionales
Puntos
Lneas
Polgonos

Primitivas 2D
Primitivas I
Primitivas II

Ejercicios
Tablero de ajedrez
Tangram

1.48