Gráficos en dos dimensiones: una introducción

Muchos lenguajes de programación cuentan con librerías muy potentes para construir gráficos, a partir de unas pocas líneas de código. En estos capítulos vamos a trabajar sobre los gráficos generados por ordenador, pero centrando nuestro trabajo en las Matemáticas que hay detrás de los gráficos por ordenador. Observa estos gráficos

Figura 1

Figura 2

 

Para crearlos, no ha hecho falta ninguna librería muy sofisticada, ni un lenguaje muy potente. Con un poco de Matemáticas, basta. Si observas estas simulaciones (click para descargar), te darás cuenta que sin ser un experto en programación, se puede visualizar movimientos de objetos (por ejemplo una bola o una pelota) de manera sencilla.

En esta sección te vas a encontrar con una introducción. Los gráficos por ordenador, necesitan de conocimientos matematicos profundos. Espero que con esta introducción te puedes hacer una idea de las Matemáticas que hay detrás de los problemas de representación gráfica de cualquier objeto en el plano (que en nuestro caso será la pantalla de un ordenador).

Nuestro campo de trabajo

Para trabajar con gráficos vamos a suponer que la pantalla de nuestro ordenador tiene "ancho" unidades de ancho (pueden ser pixeles, puntos por pulgada de pantalla, incluso unidades de longitud como cm), y "alto" unidades de alto. Es posible que tengas que hacer correcciones para que el tamaño de las unidades sea el mismo en horizontal y en vertical. Eso dependerá de tu ordenador y del lenguaje que uses.

Además se supone que podemos dibujar en pantalla puntos y rectas (por lo menos). También se supone que disponemos de dos sentencias que nos permiten hacerlo. Veamos

Ésta será la mesa de trabajo, o mejor la hoja de papel en la que vamos a dibujar. El punto (cx, cy) es el centro de la pantalla. En los ejemplos supondremos que la pantalla tiene 400 puntos x 400 puntos. Además cada unidad en horizontal (vertical) equivale a 20 puntos, por lo que nuestros ejes coordenados se centran en un cuadrado de 20 x 20, con x entre -10 y 10, e y entre -10 y 10.

 

¿Cómo podemos dibujar una circunferencia centrada en la pantalla? Puede ser que tengas una orden del tipo Circle[(x, y), R], que dibuja una circunferencia de centro (x, y) y radio R. Pero ahora no nos interesa. Observa el siguiente gráfico

El punto C tiene de coordenadas (r · cos(ang), r · sen(ang)) respecto al punto (cx, cy). Haciendo variar ang entre 0 y 2pi, con incrementos muy pequeños, iremos obteniendo muchos puntos de la circunferencia. Con esto, ya podemos poner en marcha nuestro primer programa, que dibuja una circunferencia en el centro de la pantalla de radio r: este programa tiene como entrada el radio de la circunferencia, y como salida una circunferencia de dentro en el centro de la pantalla, y radio r. Cada uno de estos programas, puede también ser considerado como una función, que puede ser llamada desde otro programa. La llamada a la función (o también subprograma o subrutina) se hace mediante una sentencia que la ejecuta, suponiendo que se le pasa el valor del parámetro (que necesita como valor de entrada).

Programa Circunferencia (r)

Obtener el centro de la pantalla (cx, cy)

Para ang entre 0 y 2pi, con incremento 2pi/100' por razones tipográficas al número p lo llamaremos pi
{
Pset (cx + r*cos (ang), cy + r*sen(ang))
}

NOTA:

Como el origen de coordenadas real (pantalla) está en el punto superior izquierdo de la pantalla, respecto a ese punto, las coordenadas de cualquier punto de la circunferencia son (cx + r*cos(ang), cy - r*sen(ang)), pero en este caso, la circunferencia se dibuja igual, si en vez de usar (cx + r*cos(ang), cy + r*sen(ang)), usamos (cx + r*cos(ang), cy - r*sen(ang)). Piensa porqué es así.

Polígonos regulares

No todos los polígonos regulares se pueden construir con regla y compás. Pero con un ordenador, podemos construir caso cualquier polígono regular. Y digo casi, porque dependemos de la resolución de la pantalla. Un polígono regular de 50 lados, nos va parecer una circunferencia.

¿Cuál es la idea? Observa el siguiente gráfico

Supongamos que el polígono regular es un heptágono. Cada uno de los ángulos centrales, desde el eje OX, mide 2pi/7, 2(2pi/7), 6(2pi/7), y el último 7(2pi/7) = 2pi. Si hacemos variar ang (Programa Circunferencia(r), entre 0 y 2pi, dando saltos de 2pi/7), obtendremos un heptágono. Por tanto, el programa que dibuja los vértices de un polígono regular de n lados, podría ser el siguiente:

Programa PoligonoRegular(r, n)

Obtener el centro de la pantalla (cx, cy)

Para i variando entre 1 y n con incrementos de 1
{
ang = i*(2pi)/n
Pset (cx + r cos (ang), cy + r sen(ang))
}

 

Asignación de valores a variables

Para indicar que el contenido de una variable X se coloca en una variable Y es habitual usar la notación Y <- X, pero no muchos navegadores no interpretan correctamente la flecha a la izquierda. Por eso usaremos el = como signo de asignatión. Por ejemplo

  • X = 3, significa que a la variable X le asignamos el valor 3
  • X = Y significa que el contenido actual de la variable Y queda asignado a la variable X

Comparación de valores de variables

Usaremos el doble igual ==, para comparar el valor de dos variables X e Y. Para indicar que si el valor de dos variables coincide, hay que dibujar en la pantalla en la posición (X, Y), haremos: Si X==Y entonces hacer Pset(X, Y)

Comentarios a los programas

Los comentarios los vamos a hacer mediante letras en verde, empezando con una ', tal y como ya se ha hecho en el Programa Circunferencia(r)

 

Para posteriores programas nos va a interesar guardar las coordenadas de los vértices. Este programa calcula las coordenadas de los vértices de un polígono regular de n lados, y los guarda en un vector (X(i), Y(i)) con variando desde 1 hasta 7

Programa VerticesPoligonoRegular(r, n)

Obtener el centro de la pantalla (cx, cy)

Para i entre 1 y ncon incrementos de 1
{
ang = i*(2pi)/n
Guardar en X(i) = cx + r cos (ang)
Guardar en Y(i) = cy + r sen(ang)
}

 

Finalmente este programa, dibuja un polígono regular de n lados

Polígono regular completo

La Figura 1, se ha obtenido dibujando un polígono regular, y uniendo cada vértice con todos los demás. Para conseguirlo, podemos usar el siguiente código

Programa PoligonoRegularCompleto(r, n)

Ejecutar VerticesPoligonoRegular (r, n)

Para i variando entre 1 y n con incrementos de 1
{

Para j variando entre 1 y n con incrementos de 1
{
Line (X(i),Y(i)) - (X(j),Y(j)
}

}

Polígonos regulares estrellados

Cuando unimos cada vértice con el contiguo obtenemos el polígono regular de n lado. Pero si unimos cada vértice con el que está dos, tres, .... vértices más alejado, obtenemos polígonos estrellados. El siguiente programa dibuja polígonos estrellados uniendo los vértices cada paso = dos, tres , cuatro, ... vértices más alejado.

Programa PoligonoRegularEstrellado(r, n, paso)

Ejecutar VerticesPoligonoRegular(r, n)

Para i variando desde 1 a n con incrementos de 1
{

Colocar en la variable segundo el valor de i + paso

Si segundo >n hacer segundo = i + paso - n
Line (X(i), Y(i)) - (X(segundo), Y(segundo))

}

La idea del programa es la siguiente:

          1. Unimos cada vértice i con el vértice i + paso
          2. Cuando i + paso sobrepasa a n, el vértice al que hemos de unir se obtiene restando n al valor i + paso

¿Qué se obtiene para n = 13 y paso variando desde 2 hasta 12? Estos son los diferentes polígonos estrellados de 13 lados.

13 vértices con paso = 2

13 vértices con paso = 3

13 vértices con paso = 4

13 vértices con paso = 5

13 vértices con paso = 6

13 vértices con paso = 7

Observa que el polígono de 13 vértices uniendo cada 7, es el mismo que uniendo cada 5. A su vez, el 13 cada 8 será el mismo que el 13 cada 4, ... Finalmente el 13 cada 12 es el polígono regular de 13 lados.

¿Cuántos polígonos estrellados diferentes hay de n vértices?

La respuesta no es fácil. Veamos si n = 6, y unimos cada dos, no se obtiene un exágono estrellado, sino un triángulo equilátero, ya que la figura no se cierra. Y si unimos cada tres, ni siquiera se obtiene un polígono. La figura de en medio, uniendo con paso = 2, no es un hexágono convexo.

¿Cuál es la condición? Si existen numeros primos con n, menores que n/2 y distintos de la unidad, entonces hay polígonos estrellados de n vértices. En este caso, el número de polígonos estrellados es el número de primos, distintos de 1, menores que n/2 (1) Por ejemplo

Para n = 8, los polígonos que se obtienen, con pasos de 2, 3, 4, 5, 6 y 7, son respectivamente

Sólo son estrellados los polígonos para paso = 3, y paso = 5, que son iguales. Esto confirma lo afirmado en (1).

Cuadros de hilos y alfileres

Es muy posible que alguna vez hayas hecho un cuadro de hilo y alfileres. ¿Qué es eso? Supón un cuadro de lado R. Dividimos los lados del cuadrado en n segmentos iguales, mediante n-1 puntos sobre cada lado (estos son los alfileres). Después, mediante alguna regla unimos los puntos de los lados de cada lado con los puntos de cada uno de los otros tres lados (estos son los hilos). Por ejemplo, podemos unir los puntos pares de cada lado, con lo impares del lado opuesto. De esta forma, obtenemos diferentes figuras, tal y como se observa en los dos ejemplos siguientes:

Esta vez te dejo a ti el diseño del programa, y la búsqueda de reglas. Puedes jugar con hilos de colores, para conseguir diferentes efectos

Un programa que hace todo esto

Me he dedicado a programar estas ideas en el siguiente programa. Para instalarlo: descomprime a una carpeta, y ejecuta el setup. Para desinstalarlo: usa Configuración->Panel de control->Agregar-quitar programas.

Lo importante es que lo hagas tú, pero este programa te puede dar algunas ideas, sobre la mejor manera de plantear la entrada de datos.