Captulo 5 - Figuras Geomtricas

Uno de los principales objetos o entidades en el campo de la programacin grfica es la

figura geomtrica. Algunas figuras se usan ms que otras, pero todas pueden sernos
tiles a la hora de representarlas grficamente. Algunas API's grficas contienen todas o
algunas de las siguientes figuras geomtricas, que trataremos a continuacin.

Figuras Geomtricas Bsicas

Vrtices

No son figuras geomtricas como tales, pero

forman la base de toda figura geomtrica. En
algunas ocasiones, nos interesa mostrar los
vrtices como puntos en la pantalla: v0, v1, v2,
..., vn.
Lnea Recta

Matemticamente hablando, no se trata de

una lnea recta, sino de un segmento. Aunque
no se trate de una figura geomtrica, como
tal, la lnea recta forma la base de los
trazados de las figuras. Requerimos dos
vrtices para crear una lnea o segmento: v0,
y v1.
Tringulo

Esta figura geomtrica tambin forma la

base de la representacin de objetos grficos,
especialmente a la hora de representar
objetos en tres dimensiones: v0, v1, y v2.
Podemos crear un objeto complejo a partir
de tringulos. Necesitamos tres vrtices para
formar un tringulo.
Abanico de Tringulos

Se trata de una serie de tringulos unidos

entre s con un vrtice comn como el centro
del abanico. Como mnimo debe haber tres
vrtices para formar el primer tringulo: v0,
v1, y v2. Los siguientes tringulos se crean a
partir de un vrtice nuevo, el vrtice central
del abanico, y el vrtice perteneciente al
tringulo contiguo.
Tira de Tringulos

Se trata de otra serie de tringulos unidos

entre s para formar un cinta o tira. Como
mnimo debe haber tres vrtices para formar
el tringulo inicial: v0, v1, y v2. Los siguientes
tringulos se forman a partir de un vrtice
nuevo y dos vrtices que pertenecen al
tringulo contiguo.
Rectngulo

Otra figura geomtrica importante es el

rectngulo que tambin se usa para dibujar
cuadrados. Debido a su simetra, slo
requerimos conocer dos vrtices, v0, y v1, que
forman dos esquinas opuestas. En total,
obtendremos cuatro nmeros diferentes, con
los cuales podemos averiguar las
coordenadas de los otros dos vrtices.
Cuadriltero

Esta figura geomtrica tambin es usada con

frecuencia, tanto para representar objetos en
dos como en tres dimensiones. Necesitamos
cuatro vrtices para formar el cuadriltero,
v0, v1, v2, y v3.
Tira de Cuadrilteros

Se trata de una serie de cuadrilteros unidos

entre s para formar un cinta o tira. Como
mnimo necesitamos cuatro vrtices para el
cuadriltero inicial: v0, v1, v2, y v3. Los
siguientes cuadrilteros, en la tira, se forman
con dos vrtices nuevos y con dos vrtices
pertenecientes al cuadriltero contiguo.
Polgonos

Generalmente, las figuras que nos interesan

suelen ser irregulares y con muchos ms
vrtices que 2, 3, 4. Adems, algunas API's
grficas ofrecen la funcionalidad de describir
figuras geomtricas segn una lista de
vrtices. Tpicamente, la funcionalidad de
crear polgonos requiere n vrtices, donde
automticamente se une el ltimo vrtice, vn,
con el primero, v0, para poder cerrar la figura
y formar un polgono [cerrado].
Elipse/Crculo

La elipse al igual que el crculo son otras

figuras que nos pueden servir en ocasiones,
dependiendo de la escena o "dibujo" que
queramos crear. El crculo, o la
circunferencia, si la preferimos, es un caso
especial de la elipse. Algunos API's grficos
describen las elipses y crculos de formas
diferentes. Existen principalmente dos
maneras de describir tales figuras:
1. Punto central, c; y dos longitudes para
ambos radios, r1 y r2; o
2. Un rectngulo, v0 y v1, que circunscribe la
elipse o el crculo.
Arco

El arco es una lnea curva que describe el

permetro total o parcial de una elipse o
circunferencia. Como se trata de una lnea,
no podemos hablar de un rea ni rellenarla.
La mayora de las API's grficas ofrecen tal
elemento grfico con una de dos formas para
su descripcin:
1. Punto central, c; dos radios, r1 y r2; y dos
ngulos, para describir el ngulo inicial, , y
el final, ; o
2. Un rectngulo, v0 y v1, que circunscribe el
arco; y dos ngulos, para describir el ngulo
inicial, , y el final, .
Sector/Cua

Podemos crear cuas o sectores que

bsicamente se parecen a un "trozo de tarta".
Esta superficie se basa en una elipse, como
el arco, mencionado previamente. Creamos
el sector como el arco, pero uniendo cada
extremo al centro de la elipse o crculo con
un segmento. Existen dos formas populares
para describir un sector:
1. Punto central, c; dos radios, r1 y r2; y dos
ngulos, para describir el ngulo inicial, , y
el final, ; o
2. Un rectngulo, v0 y v1, que circunscribe el
sector; y dos ngulos, para describir el
ngulo inicial, , y el final, .
Segmento elptico

El segmento elptico se basa en una elipse

como el arco y el sector. Esta figura se
parece a un sector, pero en lugar de unir cada
extremo al centro con segmentos, unimos los
extremos entre s con un segmento. Existen
dos formas comunes para describir un
segmento elptico:
1. Punto central, c; dos radios, r1 y r2; y dos
ngulos, para describir el ngulo inicial, , y
el final, ; o
2. Un rectngulo, v0 y v1, que circunscribe el
segmento elptico; y dos ngulos, para
describir el ngulo inicial, , y el final, .
Curva de Bzier

Esta curva fue descubierta por Pierre Bzier,

mientras trabajaba para la compaa de
automviles, Renault, en los aos 1960. Para
poder disear adecuadamente las superficies
curvas de los automviles modernos,
necesitaba una forma matemtica, pero
sencilla. Encontr la solucin con una
ecuacin paramtrica definida como
ecuaciones cbicas. Por esta razn, tambin
se denomina esta curva como curva de
Bzier del tercer orden, al usar una ecuacin
cbica. Se describe esta curva con cuatro
puntos: dos puntos indican el punto inicial,
(x0, y0), y final, (x3, y3), de la curva, mientras
que los otros dos sirven como puntos de
control: (x1, y1) y (x2, y2). Estos puntos de
control modifican la curva dependiendo de
su posicin relativa a los puntos iniciales y
finales. Se puede pensar en estos puntos de
control como si describieran una atraccin,
como la gravedad, tirando parte de la curva
hacia su centro.

Las frmulas se basan en el parmetro t que

queda comprendido en el intervalo [0,1].
stas son:
x(t) = Axt3 + Bxt2 + Cxt + x0
x1 = x0 + Cx / 3
x2 = x1 + (Cx + Bx) / 3
x3 = x0 + Cx + Bx + Ax

y(t) = Ayt3 + Byt2 + Cyt + y0

y1 = y0 + Cy / 3
y2 = y1 + (Cy + By) / 3
y3 = y0 + Cy + By + Ay
Con estas ecuaciones, podemos calcular los
respectivos coeficientes para x(t), e y(t):
Cx = 3*(x1 - x0)
Bx = 3*(x2 - x1) - Cx
Ax = x3 - x0 - Cx - Bx

Cy = 3*(y1 - y0)
By = 3*(y2 - y1) - Cy
Ay = y3 - y0 - Cy - By

Rectngulo Redondo

Una variante del rectngulo es el "rectngulo

redondo". Esta figura es similar a un
rectngulo, pero las cuatro esquinas son
curvas. Las curvas son cuartos de un crculo;
o sea, 90 de un crculo. Podemos describir
esta figura con dos vrtices, v0, y v1, que
forman las dos esquinas opuestas del
rectngulo. Luego, necesitamos otros dos
valores que indican la altura, h, y la anchura,
a. Ambos valores describen el centro de la
circunferencia con respecto a las esquinas
del rectngulo. Tal informacin afecta todas
las esquinas, por lo que el cuarto de crculo
es la misma figura para cada una.

Ejemplos de Figuras Geomtricas

Veamos algunos ejemplos de otras figuras geomtricas que podemos construir a partir
de las figuras fundamentales que hemos descrito anteriormente.

1. Polgonos Regulares

Un polgono regular se compone de aristas/lados de igual longitud. Esto implica que el

ngulo entre cada arista contigua es el mismo. Si trazamos un segmento del centro a un
vrtice y otro segmento del centro a otro vrtice contiguo, entonces el ngulo entre estos
dos segmentos es un divisor de 2 = 360. En otras palabras, cada ngulo mencionado
es inversamente proporcional a la cantidad de lados del polgono regular. Podemos usar
la siguiente frmula:
= 2 / N, donde es el ngulo, y N es la cantidad de lados
Crearemos polgonos regulares en base a una circunferencia que circunscribe nuestro
polgono regular. Esto implica, que el centro de la circunferencia coincide con el centro
geomtrico de cualquier polgono regular. Para esto, necesitamos usar algunas funciones
trigonomtricas, junto con el ngulo ya calculado. El paso principal es averiguar la
coordenada del siguiente vrtice de nuestro polgono. Usaremos las siguientes frmulas:
xi = cx + r * cos( i* ),
yi = cy + r * sen( i* )
donde:
i = 0,1,2,...,N-1,
r es el radio de la circunferencia, y
c = (cx, cy) es la coordenada del centro geomtrico de la circunferencia y del polgono.

Al agregar el centro a nuestra frmula, conseguimos mover el centro geomtrico del

origen (0,0) al que nosotros deseemos.

1.1. Pentgono Regular

Con un pentgono, tenemos que N=5, por lo que = 2 / 5, que equivale a 72.
Suponiendo que c = (0,0) y r = 1,00, la lista de vrtices es:
(1,0000, 0,0000),
(0,3090, 0,9511),
(-0,8090, 0,5878),
(-0,8090, -0,5878),
(0,3090, -0,9511)

Podemos ver el resultado en la figura 16.

Figura 16 - Polgono - N=5

1.2. Algoritmo

Ahora presentaremos el algoritmo para implementar el trazado de un polgono regular:

Polgono_Regular( N, centro, radio )
1. Crear una lista de N vrtices: vrtices
2. alfa <- 2 / N
3. Bucle: i <- 1 hasta N
4. vrtices[i].x <- centro.x + radio * cos( (i-1)*alfa )
5. vrtices[i].y <- centro.y + radio * sen( (i-1)*alfa )
6. Dibujar_Polgono( vrtices, N )
7. Terminar.
La funcin Dibujar_Polgono() se refiere a la funcin de la librera/biblioteca o API
grfica para trazar lneas rectas consecutivas de un vrtice o punto a otro segn una lista
de puntos. Si tal funcin primitiva no existe, entonces a continuacin presentaremos su
algoritmo usando la funcin primitiva, Dibujar_Lnea():
Dibujar_Polgono( vrtices, N )
1. Bucle: i <- 2 hasta N
2. Dibujar_Lnea( vrtices[i-1].x, vrtices[i-1].y, vrtices[i].x,
vrtices[i].y )
3. Dibujar_Lnea( vrtices[N].x, vrtices[N].y, vrtices[1].x,
vrtices[1].y )
4. Terminar.

2. Composicin

El objetivo de usar estas figuras geomtricas es para poder construir figuras ms

complejas basadas en las primitivas. He aqu algunos ejemplos de figuras compuestas.

2.1. Cara

Un ejemplo relativamente sencillo de una imagen compleja es crear una cara. Para no
complicar el ejemplo, dibujaremos la cabeza como un crculo, los dos ojos como dos
crculos, la nariz como un tringulo, y la boca como un semicrculo. El resultado se
puede ver en la figura 17.

Figura 17 - Cara

2.2. Arco Persa

Otro ejemplo es el de dibujar una ventana de estilo persa. Esto consiste en dibujar varios
arcos, unidos entre s, seguidos de lneas rectas. La figura 18 muestra una simple
imagen de la idea citada.

Figura 18 - Arco Persa

3. Visualizacin de Datos

Una aplicacin en asuntos laborales, pero menos artstica, es en la presentacin de datos

con mbito visual. Desde la presentacin del censo popular de una regin usando barras
hasta las presentaciones de cifras de precios de varios productos en una empresa usando
diagramas en tartas (pie charts, en ingls) hacen uso de grficos simples pero potentes
en cuanto a la informacin que conllevan. Aqu presentaremos algunos ejemplos de
tales usos.

3.1. Barras

Podramos decir que las barras son el grfico architpico de las presentaciones en
empresas al igual que los estadsticos al mostrar las diferencias en poblacin. La figura
19 muestra un claro ejemplo de tales datos.

Figura 19 - Barras

3.2. Grficos circulares

Otro grfico popular en la representacin de estadsticas es la "tarta" o grfico circular.

La figura 20 nos da una idea del conocido grfico.

Figura 20 - Grfico Circular

4. Diagramas

Otro ejemplo con aplicaciones, principalmente, en diseo es en presentar diagramas.

Aqu mostramos, en la figura 21, el diagrama de un circuito elctrico.

Figura 21 - Circuito Elctrico

5. Interfaces Grficas

En el tema de entornos grficos, un claro ejemplo de las figuras geomtricas bsicas que
hemos visto consiste en la creacin de componentes visuales para interfaces grficas.
Por ejemplo, en entornos visuales como MS-Windows, existen componentes como
botones, ventanas, menes, pestaas, barras de proceso, listados, etc.. Internamente,
tales componentes se basan en figuras fundamentales como rectngulos, crculos, y
lneas rectas. La figura 22 muestra la tpica ventana en MS-Windows.

Figura 22 - Ventana de MS-Windows

6. Curvas

Ya hemos visto las curvas de Bzier, mencionando las aplicaciones en el diseo de

automviles. En la programacin grfica, estas curvas son aplicadas popularmente para
realizar logotipos, fuentes, y otras figuras que no se pueden crear con facilidad como
composiciones de figuras bsicas. En la siguiente figura 23, mostramos un fantasma
diseado con varias curvas de Bzier.

Figura 23 - Fantasma (Bzier)

Para facilitar a los lectores el diseo de las curvas de Bzier, presentamos un applet de
Java para poder disear sus propias curvas interactivamente. Pinche el vrtice que se
desee mover con el botn izquierdo del ratn. Mantenga pulsado este botn izquierdo y
mueva el ratn en la direccin que se desee, para mudar el vrtice de la curva. Tambin
se permite introducir las coordenadas directamente a travs de los cuadros de edicin
correspondientes a cada uno de los vrtices.

Applet para Curvas de Bzier

Nota: Se requiere la mquna virtual de Sun (Sun VM) para poder ejecutar este applet de
Java.

Ejercicios
Enlace al paquete de este captulo.

1. Escribir un programa que muestre cualquier polgono regular, como se ha descrito en

este captulo. Intentar con los siguientes parmetros:
a) N = 7
b) N = 10
c) N = 25

Elegir valores para la resolucin y el radio que convengan.

Como una extensin al algoritmo, podemos agregar un ngulo inicial, nguloi. Esto nos
ayudar para "colocar" el primer vrtice donde queramos. Consecuentemente, los dems
vrtices tambin sern colocados segn el ngulo inicial. Esto implica que la figura ser
rotada tantos radianes desde la horizontal, que pasa por el centro geomtrico del
polgono al igual que el de la circunferencia. El algoritmo extendido es el siguiente:
Polgono_Regular( N, centro, radio, nguloi )
1. Crear una lista de N vrtices: vrtices
2. alfa <- 2 / N
3. Bucle: i <- 1 hasta N
4. vrtices[i].x <- centro.x + radio * cos( (i-1)*alfa + nguloi )
5. vrtices[i].y <- centro.y + radio * sen( (i-1)*alfa + nguloi )
6. Dibujar_Polgono( vrtices, N )
7. Terminar.
2. Escribir un programa para dibujar una estrella. Para esto, seguimos el algoritmo para
dibujar un polgono regular. Sin embargo, a la hora de dibujar el polgono, necesitamos
implementar nuestra propia funcin que va dibujando cada lnea de un vrtice a otro
vecino, pero saltndose cada 2,3,4,...,N/2 vrtices en nuestra lista. El algoritmo es
simplemente el siguiente:
Estrella( N, centro, radio, nguloi, salto )
1. Crear una lista de N vrtices: vrtices
2. alfa <- 2 / N
3. Bucle: i <- 1 hasta N
4. vrtices[i].x <- centro.x + radio * cos( (i-1)*alfa + nguloi )
5. vrtices[i].y <- centro.y + radio * sen( (i-1)*alfa + nguloi )
6. Dibujar_Estrella( vrtices, N, salto )
7. Terminar.
El algoritmo de Dibujar_Estrella() se basa en manipular los ndices de nuestra lista de
vrtices para as dibujar lneas entre un vrtice y el siguiente segn el valor de salto. Por
lo tanto, nos basaremos en la operacin del mdulo o resto de una divisin, descrito
como mod. He aqu el algoritmo:
Dibujar_Estrella( vrtices, N, salto )
1. Bucle: i <- 0 hasta N-1
2. j <- (i+salto) mod N
3. Dibujar_Lnea( vrtices[i+1].x, vrtices[i+1].y,
vrtices[j+1].x, vrtices[j+1].y )
4. Terminar.
Probar con los siguientes valores:
a) N = 7, salto = 2
b) N = 7, salto = 3
c) N = 10, salto = 4
d) N = 12, salto = 5
e) N = 25, salto = 5
f) N = 25, salto = 12

3. Mostrar las estrellas anteriores, pero slo los permetros. Es decir, sin que se vean las
lneas interiores de la estrella, en s. Para esto, tenemos que calcular los vrtices donde
se cruzan las lneas al crear la estrella. Las lneas cruzantes indican un punto comn
para ambas lneas. Esto implica que tenemos que resolver el siguiente sistema de
ecuaciones, para averiguar las coordenadas x e y de tal punto comn:
y = (By - Ay) / (Bx - Ax) * (x - Ax) + Ay,
y = (Dy - Cy) / (Dx - Cx) * (x - Cx) + Cy
donde tenemos las lneas, o mejor dicho los segmentos, AB y CD.

Simplificando, obtenemos que,

x = (m*Ax - Ay - n*Cx + Cy) / (m-n),
y = m*(x - Ax) + Ay,

donde,
m = (By - Ay) / (Bx - Ax), y
n = (Dy - Cy) / (Dx - Cx)
Algunas sugerencias para la implementacin:
1. Calcula los vrtices de la estrella, como se ha explicado anteriormente, en el ejercicio
#2. Luego, calcula los vrtices como se ha explicado previamente, en este ejercicio.
Esto implica que nuestra lista de vrtices ahora ser de 2*N, ya que existe el doble de
vrtices que en el caso anterior de la estrella. El segmento AB se basa en el vrtice i y el
siguiente, i+salto, mientras que el segmento CD se crea con el vrtice contiguo i+1 y su
anterior, i+1-salto. Por supuesto, hay que tener en cuenta que no podemos sobrepasar
los valores de los ndices. Esto implica que necesitamos "dar la vuelta", por lo que
necesitaremos usar la operacin del mdulo.
2. En el clculo de las coordenadas del punto comn (x,y), debemos asegurarnos de que
m y n sean valores determinables (calculables). Si nos fijamos, cada valor se basa en
una divisin, por lo que es posible que el denominador sea cero. Consecuentemente, m
o n no podran ser calculados. Si esto ocurre, entonces implica que uno de los
segmentos es vertical: AB o CD. En este caso, sabemos el valor de x, ya que ste no
vara, al ser un segmento vertical; o sea, x = Ax = Bx o x = Cx = Dx. Sabiendo esto, slo
tenemos que calcular el valor de y, a partir del sistema de ecuaciones presentado
anteriormente. Se nos presenta un caso similar, si el segmento es horizontal, que
ocurrira cuando m o n es cero - cuando el numerador es cero. En este caso,
conoceremos el valor de y, por lo que podemos calcular fcilmente el valor de x. Hay
que tener en cuenta que surge un problema cuando el denominador de tanto m o n es
cero, pero no existe ningn problema si el numerador de m o n es cero, nicamente que
podemos simplificar los clculos.

4. Crear un programa para mostrar estrellas, como se ha explicado en el ejercicio #3.

Esta vez, modificaremos el radio segn el valor del ngulo basado en alfa. Es decir, el
radio ser ahora una funcin dependiente de una expresin conteniendo alfa. El
algoritmo ser parecido al siguiente:
4. vrtices[i].x <- centro.x + radio( (i-1)*alfa + nguloi ) * cos(
(i-1)*alfa + nguloi )
5. vrtices[i].y <- centro.y + radio( (i-1)*alfa + nguloi ) * sen(
(i-1)*alfa + nguloi )
Probar con los siguientes valores y funciones:
a) N = 25, salto = 11,
Real radio( t )
1. a <- 12
2. b <- 30
3. x <- a*cos( t ) + b*sen( a*t/2 )
4. y <- a*cos( t ) - b*sen( a*t/2 )
5. resultado <- ( (x2+y2) / ((a+b)2 + (a-b)2) )
6. Terminar( resultado )
b) N = 12, salto = 5,
Real radio( t )
1. a <- 12
2. b <- 30
3. x <- a*cos( t ) + b*sen( a*t/2 )
4. y <- a*cos( t ) - b*sen( a*t/2 )
5. resultado <- ( (x2+y2) / ((a+b)2 + (a-b)2) )
6. Terminar( resultado )

5. Basndose en la figura 17, dibujar otras dos figuras:

a) Extendiendo la cara agregando un cuerpo con brazos y piernas, y
b) Diseando otra cara expresando otro sentimiento, como por ejemplo: sorpresa, sueo,
enfado, perplejidad, etc..

6. Usando la tcnica de composicin, dibujar una casa. Pueden basarse en la siguiente

ilustracin de la figura 24.

Figura 24 - Casa

7. Crear un programa que recoja datos de un fichero y mostrarlos en dos grficas en

forma de a) barras y b) crculo, junto con algunos resultados estadsticos, si se desea.
Por ejemplo, mostrar los porcentajes de cada sector del grfico circular incluyendo una
leyenda para indicar la representacin de cada color. Tambin se podra calcular e
indicar visualmente el promedio, varianza, desviacin estndar, etc. en la grfica de
barras.

8. Crear un programa que permita construir un diagrama de un circuito elctrico segn

los datos guardados en un fichero o indicado directamente por el usuario. Por ejemplo,
el programa podra crear un circuito con dos generadores elctricos, cuatro
condensadores, tres resistencias, dos inductores, y un interruptor. La complejidad del
programa es responsabilidad del programador; se puede crear un programa altamente
adaptable a cada tipo de circuito o un programa muy simple que agrega un componente
detrs de otro, secuencialmente.

Como una sugerencia, crean funciones para poder dibujar cada componente de forma
general. El programa principal invocar cada funcin para dibujar el componente
elctrico segn los datos que describen el circuito. La descripcin del circuito puede ser
simple, como una cadena de caracteres. Por ejemplo, "GRRCCILGLCCR", donde G
indica un generador, R es una resistencia, C es condensador, I es interruptor, y L es
inductor.

9. Disear un campo de ftbol. Se puede basar en el diagrama de la figura 25.

Figura 25 - Campo de ftbol

10. Disear una figura usando curvas de Bzier. No es necesario que el dibujo se base
exclusivamente en curvas de Bzier. Por ejemplo, intentar disear un logotipo propio o
quiz copiarse de uno existente. Otro ejemplo puede ser recrear una letra del abecedario
usando estas curvas. Se aconseja hacer uso del applet de Java presentado anteriormente
en este captulo para disear curvas de Bzier.

Marzo de 2005 Steven R. Davidson, steven arroba conclase punto net