Capítulo 5 - Figuras Geométricas

Uno de los principales objetos o entidades en el campo de la programación gráfica es la figura geométrica. Algunas figuras se usan más que otras, pero todas pueden sernos útiles a la hora de representarlas gráficamente. Algunas API's gráficas contienen todas o algunas de las siguientes figuras geométricas, que trataremos a continuación.

Figuras Geométricas Básicas

Vértices

[IMAGEN]: Figura 1 - Vértices
Figura 1 - Vértices

No son figuras geométricas como tales, pero forman la base de toda figura geométrica. En algunas ocasiones, nos interesa mostrar los vértices como puntos en la pantalla: v0, v1, v2, …, vn.

Línea Recta

[IMAGEN]: Figura 2 - Línea
Figura 2 - Línea

Matemáticamente hablando, no se trata de una línea recta, sino de un segmento. Aunque no se trate de una figura geométrica, como tal, la línea recta forma la base de los trazados de las figuras. Requerimos dos vértices para crear una línea o segmento: v0, y v1.

Triángulo

[IMAGEN]: Figura 3 - Triángulo
Figura 3 - Triángulo

Esta figura geométrica también forma la base de la representación de objetos gráficos, especialmente a la hora de representar objetos en tres dimensiones: v0, v1, y v2. Podemos crear un objeto complejo a partir de triángulos. Necesitamos tres vértices para formar un triángulo.

Abanico de Triángulos

[IMAGEN]: Figura 4 - Abanico de Triángulos
Figura 4 - Abanico de triángulos

Se trata de una serie de triángulos unidos entre sí con un vértice común como el centro del abanico. Como mínimo debe haber tres vértices para formar el primer triángulo: v0, v1, y v2. Los siguientes triángulos se crean a partir de un vértice nuevo, el vértice central del abanico, y el vértice perteneciente al triángulo contiguo.

Tira de Triángulos

[IMAGEN]: Figura 5 - Tira de Triángulos
Figura 5 - Tira de triángulos

Se trata de otra serie de triángulos unidos entre sí para formar un cinta o tira. Como mínimo debe haber tres vértices para formar el triángulo inicial: v0, v1, y v2. Los siguientes triángulos se forman a partir de un vértice nuevo y dos vértices que pertenecen al triángulo contiguo.

Rectángulo

[IMAGEN]: Figura 6 - Rectángulo
Figura 6 - Rectángulo

Otra figura geométrica importante es el rectángulo que también se usa para dibujar cuadrados. Debido a su simetría, sólo requerimos conocer dos vértices, v0, y v1, que forman dos esquinas opuestas. En total, obtendremos cuatro números diferentes, con los cuales podemos averiguar las coordenadas de los otros dos vértices.

Cuadrilátero

[IMAGEN]: Figura 7 - Cuadrilátero
Figura 7 - Cuadrilátero

Esta figura geométrica también es usada con frecuencia, tanto para representar objetos en dos como en tres dimensiones. Necesitamos cuatro vértices para formar el cuadrilátero, v0, v1, v2, y v3.

Tira de Cuadriláteros

[IMAGEN]: Figura 8 - Tira de Cuadriláteros
Figura 8 - Tira de cuadriláteros

Se trata de una serie de cuadriláteros unidos entre sí para formar un cinta o tira. Como mínimo necesitamos cuatro vértices para el cuadrilátero inicial: v0, v1, v2, y v3. Los siguientes cuadriláteros, en la tira, se forman con dos vértices nuevos y con dos vértices pertenecientes al cuadrilátero contiguo.

Polígonos

[IMAGEN]: Figura 9 - Polígono
Figura 9 - Polígono

Generalmente, las figuras que nos interesan suelen ser irregulares y con muchos más vértices que 2, 3, ó 4. Además, algunas API's gráficas ofrecen la funcionalidad de describir figuras geométricas según una lista de vértices. Típicamente, la funcionalidad de crear polígonos requiere n vértices, donde automáticamente se une el último vértice, vn, con el primero, v0, para poder cerrar la figura y formar un polígono [cerrado].

Elipse/Círculo

[IMAGEN]: Figura 10 - Elipse/Círculo #1
Figura 10.1 - Elipse/Círculo #1

La elipse al igual que el círculo son otras figuras que nos pueden servir en ocasiones, dependiendo de la escena o "dibujo" que queramos crear. El círculo, o la circunferencia, si la preferimos, es un caso especial de la elipse. Algunas API's gráficas describen las elipses y círculos 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 rectángulo, v0 y v1, que circunscribe la elipse o el círculo.
[IMAGEN]: Figura 10 - Elipse/Círculo #2
Figura 10.2 - Elipse/Círculo #2

Arco

[IMAGEN]: Figura 11 - Arco #1
Figura 11.1 - Arco #1

El arco es una línea curva que describe el perímetro total o parcial de una elipse o circunferencia. Como se trata de una línea, no podemos hablar de un área ni rellenarla. La mayoría de las API's gráficas ofrecen tal elemento gráfico con una de dos formas para su descripción:

  1. Punto central, c; dos radios, r1 y r2; y dos ángulos, para describir el ángulo inicial, α, y el final, β; o
  2. Un rectángulo, v0 y v1, que circunscribe el arco; y dos ángulos, para describir el ángulo inicial, α, y el final, β.
[IMAGEN]: Figura 11 - Arco #2
Figura 11.2 - Arco #2

Sector/Cuña

[IMAGEN]: Figura 12 - Sector/Cuña #1
Figura 12.1 - Sector/Cuña #1

Podemos crear cuñas o sectores que básicamente 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 círculo 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 rectángulo, v0 y v1, que circunscribe el sector; y dos ángulos, para describir el ángulo inicial, α, y el final, β.
[IMAGEN]: Figura 12 - Sector/Cuña #2
Figura 12.2 - Sector/Cuña #2

Segmento elíptico

[IMAGEN]: Figura 13 - Segmento elíptico #1
Figura 13.1 - Sector elíptico #1

El segmento elíptico 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 elíptico:

  1. Punto central, c; dos radios, r1 y r2; y dos ángulos, para describir el ángulo inicial, α, y el final, β; o
  2. Un rectángulo, v0 y v1, que circunscribe el segmento elíptico; y dos ángulos, para describir el ángulo inicial, α, y el final, β.
[IMAGEN]: Figura 13 - Segmento elíptico #2
Figura 13.2 - Sector elíptico #2

Curva de Bézier

[IMAGEN]: Figura 14 - Curva de Bézier
Figura 14 - Curva de Bézier

Esta curva fue descubierta por Pierre Bézier, mientras trabajaba para la compañía de automóviles, Renault, en los años 1960. Para poder diseñar adecuadamente las superficies curvas de los automóviles modernos, necesitaba una forma matemática, pero sencilla. Encontró la solución con una ecuación paramétrica definida como ecuaciones cúbicas. Por esta razón, también se denomina esta curva como curva de Bézier del tercer orden, al usar una ecuación cúbica. 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 posición relativa a los puntos iniciales y finales. Se puede pensar en estos puntos de control como si describieran una atracción, como la gravedad, tirando parte de la curva hacia su centro.

Las fórmulas se basan en el parámetro 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

Rectángulo Redondo

[IMAGEN]: Figura 15 - Rectángulo Redondo
Figura 15 - Rectángulo redondo

Una variante del rectángulo es el "rectángulo redondo". Esta figura es similar a un rectángulo, pero las cuatro esquinas son curvas. Las curvas son cuartos de un círculo; o sea, 90° de un círculo. Podemos describir esta figura con dos vértices, v0, y v1, que forman las dos esquinas opuestas del rectángulo. 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 rectángulo. Tal información afecta todas las esquinas, por lo que el cuarto de círculo es la misma figura para cada una.

Comentarios de los usuarios (2)

PABLO ALBERTO VASQUEZ NARANJO
2013-02-13 00:48:06

como hago para hacer un circulo con vertice???muchas gracias

Steven R. Davidson
2013-02-13 02:42:21

Hola Pablo Alberto,

Básicamente, tendrías que crear un polígono regular con muchos vértices para que aparente ser una circunferencia. Hablamos del algoritmo para crear y dibujar polígonos regulares en la siguiente página:

http://graficos.conclase.net/curso/index.php?cap=005b#inicio

También hablamos algo más de los polígonos regulares en el ejercicio #1 al final del capítulo.

Espero que esto te ayude.

Steven