Capítulo 2 - Trazar Ecuaciones

Para comenzar, veamos un ejemplo práctico del uso de gráficos: trazar la gráfica de una ecuación. En este capítulo trazaremos la ecuación: y = 3x2 - 6. Como ya sabemos, esta ecuación describe una parábola cóncava (hacia "arriba") - en el sentido positivo por el eje-Y. Nosotros, como matemáticos, trazamos tal gráfica tomando ciertos valores de x para calcular valores de y y así crear coordenadas por donde pasará la gráfica. Al ser humanos, no nos gusta tomar todos los posibles valores, por lo que creamos una tabla de valores calculando algunas coordenadas, hasta que tengamos una idea de dónde situar la gráfica. En nuestra ecuación, sabemos de antemano que se trata de una parábola, por lo que ya conocemos su forma y estructura. En papel, aproximamos el trazado a la gráfica real, ya que no nos hace falta tanta precisión; o sea, lo hacemos a ojo de buen cubero. Sin embargo, esto no es posible al crear la gráfica en pantalla: necesitamos ser precisos.

Cambio de Coordenadas I

La ventaja que tenemos es que el ordenador no se "cansará" al calcular todos los valores que requerimos, por lo que no tendremos problemas de precisión. Por otro lado, estamos intentado representar una imagen de dimensiones infinitas - el plano cartesiano, debido a los valores de x que son infinitos, en un área de dimensiones finitas - la pantalla. Por lo tanto, debemos representar la gráfica ajustándonos a las dimensiones de nuestra pantalla. Las dimensiones de la imagen equivalen a la resolución gráfica establecida. Para este ejemplo, usaremos una resolución de 800 x 600.

Ahora tenemos que pensar qué representa cada píxel que activemos - demos color. Si establecemos que cada píxel equivale a una unidad matemática, entonces no obtendremos una imagen presentable. Hay que tener en cuenta que las unidades matemáticas no tienen por qué ser valores enteros, mientras que los píxeles sí deben serlos. Lo que tenemos que hacer es decidir los valores mínimo y máximo a usarse en la ecuación. Digamos que queremos ver parte de la gráfica usando los valores de x : [-3, +3]; o sea, x_ui = -3 y x_uf = 3, los cuales representan los valores mínimo y máximo de las unidades del plano cartesiano, respectivamente. Aún así, no podemos usar todos los valores en este conjunto, ya que serían infinitos. Como ya sabemos, no podemos representar valores infinitos en un sistema de valores finitos (limitados). Tenemos que repartir estos valores cartesianos de entre los posibles valores de la pantalla del mismo eje X; es decir, tenemos que conseguir cambiar el intervalo [-3, +3] al de [0, 799]. Los valores iniciales y finales son fáciles de averiguar: x_ui = -3 ⇒ 0 y x_uf = 3 ⇒ 799. Los demás valores deberán ser calculados:

Primeramente, debemos cambiar la escala o longitud: 6 (=3-(-3)) unidades cartesianas a 800 píxeles (el número de columnas); esto implica que existen 6/800 unidades cartesianas por cada píxel, que es lo mismo que decir: 0,0075 unidades/píxel. Dicho de otro modo, cada píxel representará 0,0075 unidades cartesianas. Miremos unos cuantos valores, para ilustrar este concepto:

También podemos establecer la relación realizando la operación inversa: 800/6 = 133,3333 píxeles/unidad. Aquí podemos ver que sería algo difícil representar 133,3333 píxeles, ya que los píxeles son siempre enteros. Esto implica que obtendremos errores al aproximarnos a un número entero; en este caso, 133 (≅133,3333).

Cual sea la relación, podemos averiguar un píxel determinado a partir de una coordenada cartesiana determinada, y viceversa. Por ejemplo, si tenemos la coordenada-X de un píxel, x_p = 345, para poder averiguar el valor de x en unidades cartesianas, realizamos la siguiente operación:

 6 unidades         |xu - xui| unidades
-------------  =  ---------------------- ⇒
 800 píxeles        |345 - xpi| píxeles

|345 - 0| píxeles * 0,0075 unidades/píxel = |x - (-3)| unidades ⇒

x = -0,4125 unidades.

Por otro lado, podemos averiguar el píxel correspondiente a la coordenada-X, x_u = -2,0000, aplicando la simple regla de tres:

 800 píxeles          |xp - xpi| píxeles
-------------  =  -------------------------- ⇒
 6 unidades        |-2,0000 - xui| unidades

1,000 unidad * 133,3333 píxeles/unidad = |xp - 0| píxeles ⇒

x = 133,3333 píxeles ⇒ x = 133 píxeles.

Del mismo modo, tenemos que averiguar los valores de y en unidades cartesianas correspondientes con los valores en píxeles. El número de filas es 600 píxeles, según nuestra resolución que hemos elegido. Ya que los valores del eje-Y son imaginarios, éstos pueden ser calculados. Por esta razón, el conjunto de valores puede ser ajustado según los valores inicial y final del eje-X. Con x_ui = -3, obtenemos y_u = 3 (x_ui)² - 6 ⇒ y_u = 21. Con x_uf = 3, obtenemos y_u = 21. Ahora averiguaremos la coordenada del valor mínimo de y_u de la curva con la siguiente fórmula: 6x_u = 0 ⇒ x_u = 0, y por tanto, y_u = -6. La fórmula usada proviene de la derivada de nuestra ecuación: y_u = 3 (x_u)² - 6, para averiguar el punto crítico. Ahora tenemos que los valores de y se encuentran entre [-6, +21]; esto es, y_ui = -6 e y_uf = +21. Por lo tanto, necesitamos realizar otro cambio de escala: 27 (=21-(-6)) unidades cartesianas a 600 píxeles (el número de filas). Esto quiere decirse que tenemos 27/600 = 0,0450 unidades/píxel. Veamos unos cuantos valores:

Calculemos el píxel que corresponda al valor en unidades cartesianas de y_u = 3 (-2,0000)² - 6 ⇒ y_u = 6,0000. Nuevamente se trata de aplicar la regla de tres con la información que tenemos:

 600 píxeles           |yp - ypi| píxeles
-------------  =  -------------------------- ⇒
 27 unidades        |6,0000 - yui| unidades

|6,0000 - (-6)| unidades * 22,2222 píxeles/unidad = |yp - 0| píxeles ⇒

y = 266,6666 píxeles ⇒ y = 267 píxeles.

Por lo tanto, la coordenada (-2, 6), en el plano cartesiano, es representada por la pareja columna-fila (133, 267), en la pantalla.

Observaciones

Es posible que el lector haya hecho unos cuantos cálculos u observaciones y haya descubierto que,

1. Aunque tengamos una serie de píxeles con coordenadas continuas a lo largo del eje-X, las coordenadas del eje-Y no son contiguas, en su mayor parte. Esto depende de la gráfica y, por tanto, del tipo de ecuación. Si estuviéramos trazando la gráfica de una ecuación lineal de poca pendiente: y = mx + b, m : [0,1], donde m es la pendiente, entonces todos los valores de cada coordenada (x_p, y_p) serían contiguos. Perdemos precisión en la coordenada-Y, al ser precisos en la coordenada-X, y viceversa. Un arreglo que podemos hacer es trazar líneas continuas entre cada píxel que calculemos. Esto implica que cada píxel se convertirá en un vértice para luego ser unidos con líneas. En resumen, aproximamos la curva de la gráfica usando líneas. Esto queda mejor explicado en la siguiente sección: Explicación Detallada.
2. Las fórmulas presentadas no sirven para hallar los valores finales de la coordenada x ni y. En nuestro ejemplo, estos valores corresponderían a: x_uf = 3 e y_uf = 21; sus homólogos en píxeles son: x_pf = 800 e y_pf = 600. Claro está, estos valores son 1 píxel más allá de la resolución en cada dirección. Esto es debido a que estamos aproximando un intervalo de valores (cartesianos) como un valor único (píxel). Por ejemplo, el valor x_p = 4 representa el conjunto de valores x_u : [-2,9700, -2,9625). Si nos fijamos, el valor limitante, -2,9625, no pertenece a este intervalo, pero todos los valores anteriores pertenecientes sí son aproximados por x_p = 4. Cuando llegamos al último intervalo, x_u : [2,9925, 3,0000), notamos que el último valor x_uf = 3 no forma parte de este intervalo, aunque por defecto tiene la misma representación. No podemos hacer mucho para corregir esta inexactitud; simplemente se nos han acabado las columnas. Sin embargo, podemos hacer una de estas dos posiblidades para intentar arreglarlo:
1. Trazar una línea usando como la última coordenada, x_pf = 800 (el siguiente valor). La mayoría de los sistemas gráficos permitirá dibujar en zonas inexistentes ya que éstos realizan la tarea de eliminar píxeles "sobrantes" o "irrepresentables". Con esto, conseguiremos la parte de la línea en el eje-Y. Aunque no lleguemos justamente a la coordenada x_pf, llegaremos lo suficientemente cerca.
2. Invertir el proceso de trazado. En vez de averiguar el valor de y a partir del valor de x y posteriormente obtener su correspondencia en píxeles, trataremos de averiguar los valores de y que pertenezcan a sus complementos de x.

Explicación Detallada

Como ya se ha explicado, los píxeles representan intervalos de valores. En nuestro ejemplo, x_p = 133 representa los valores de x_u : [-2,0025, -1,9950), calculando el valor de y_u obtenemos y_u = 6,03001875 que corresponde a y_p = 267,33375 = 267. Realmente, el píxel (133,267) representa un área de valores: x_u : [-2,0025, -1,9950) e y_u : [6,0150, 6,0600). Esto se refleja en la Figura 1.

En la Figura 1, cada rectángulo representa la coordenada x_p del píxel. La anchura de cada rectángulo indica el recorrido de valores de x_u que representa. Del mismo modo, actúa cada rectángulo para la coordenada y_p. Esto se muestra claramente en la Figura 2:

El área de color violeta representa el píxel (x_p,y_p) para los recorridos de los valores de x_u e y_u.

Para aquellos lectores que tengan conocimientos de cálculo diferencial, ambas figuras asemejan la aproximación del área debajo de una curva. Al área real (precisa) la llamamos una integral. Sin embargo, nosotros sólo calculamos los valores para crear una serie y no una suma, como es el método de la suma de Riemann. En la Figura 2, tenemos los datos suficientes para comprobar nuestro método:

n : Número de particiones = rectángulos,
d : Distancia de nuestro intervalo.
xui : Valor inicial de nuestro intervalo.

Usando los valores en la gráfica, obtenemos:

x0 = [xui, xui + 3/50)
x1 = [xui + 3/50, xui + 6/50)
x2 = [xui + 6/50, xui + 9/50)
...
xa = [xui + a*d / n, xui + (a+1)*d / n),  a = 0,1,2,...,n-1

a representa el número de columnas de nuestra resolución gráfica. Así es como elegimos a nuestros valores en la coordenada x. Para los valores en la coordenada y, aplicamos nuestra ecuación teniendo en cuenta el número de particiones a lo largo del eje-Y. Por esta razón debemos realizar un cambio de coordenadas del plano cartesiano al plano gráfico en píxeles.

Al ver ambas figuras, podemos observar que tal método nos es suficiente para coordenadas que no se distancien mucho entre sí. Observando la curva hacia la derecha, nos damos cuenta de que los valores de cada partición se alejan bastante, y por tanto optamos por trazar líneas entre cada píxel. Esto es análogo al método trapezoidal para la aproximación de un área debajo de una curva. Es decir, en vez de usar rectángulos, usamos trapezoides.

La otra observación de ambas figuras es la representación del último valor x_uf. La curva continúa, pero la partición no puede representar x_uf. Una alternativa es invertir el proceso de aproximación. En vez de usar el método de rectángulos inscritos, usar rectángulos circunscritos o exteriores en vez de interiores. Generalmente no podemos decidir cuál método nos saldrá más rentable, ya que depende de la ecuación que queramos representar y por tanto de la forma de la gráfica.

Otro método que podemos implementar es realizar los cálculos inversos: a partir de coordenadas en píxeles, averiguar si pertenecen a la ecuación en unidades cartesianas. Sin embargo, para usar este método, tendríamos que comprobar todos los píxeles en la pantalla. Para crear imágenes de fractales, sí haremos uso de este método. Para algunos fractales, la imagen no es el trazado de la ecuación, sino que se basa en una ecuación. Este caso lo veremos más detenidamente en el siguiente capítulo: Fractales.

Cambio de Coordenadas II

Aún no hemos acabado con nuestra gráfica. Al calcular los valores y cambios de escala, lo hemos hecho en base a una condición: la orientación del sistema de coordenadas del plano cartesiano sea la misma que el sistema gráfico; en nuestro caso, es la pantalla. Generalmente, los sistemas gráficos comienzan por la coordenada (0,0) en la esquina superior izquierda. Esto implica que la orientación en el eje-X es positiva de izquierda a derecha y en el eje-Y es positiva de arriba a abajo. En el plano cartesiano, por regla común, la orientación positiva en el eje-X es de izquierda a derecha y en el eje-Y de abajo a arriba. Como podemos observar, la orientación en el eje-X es la misma que en el plano cartesiano: de izquierda a derecha, pero no en el eje-Y. Debido a esta diferencia, debemos asegurarnos de la orientación; de lo contrario, veremos nuestros trazados en el sentido inverso, como si fueran vistos en un espejo.

Para arreglar las orientaciones, necesitamos arreglar nuestras fórmulas. Como ya se ha dicho, la orientación en el eje-X no necesita cambios, pero el eje-Y, sí los necesita. Usaremos el mismo ejemplo, y_u = 6,0000. El píxel y_p en su orientación correcta se calcula de la siguiente forma:

 600 píxeles       |(ypi + alturap) - yp| píxeles
-------------  =  ------------------------------- ⇒
 27 unidades          (6,0000 - yui) unidades

|6,0000 - (-6)| unidades * 22,2222 píxeles/unidad = |(0+600) - yp| píxeles ⇒

yp = 333,3333 píxeles ⇒ yp = 333 píxeles.

altura_p : es la altura o el número de filas de nuestra resolución. Aplicando un poco de lógica y álgebra, podemos usar la siguiente fórmula:

 600 píxeles       |(ypf + 1) - yp| píxeles
-------------  =  -------------------------- ⇒
 27 unidades       |6,0000 - yui| unidades

|6,0000 - (-6)| unidades * 22,2222 píxeles/unidad = |(599+1) - yp| píxeles ⇒

yp = 333,3333 píxeles ⇒ yp = 333 píxeles.

Al final, el píxel (133,333) representa correctamente el punto (-2,6), en la mayoría de los sistemas gráficos.

Fórmulas

 anchurau     |xu - xui|
---------- = -----------
 anchurap     |xp - xpi|

 alturap     |(ypf - ypi + 1) - yp|
--------- = -----------------------
 alturau        |yu - yui|

Algoritmo

Aquí exponemos el algoritmo para el trazado de una ecuación:

Inicializar valores para: xui, xuf, yui, yuf, xpi, xpf, ypi, ypf
anchurau ← |xuf - xui|
alturau  ← |yuf - yui|
anchurap ← |xpf - xpi + 1|
alturap  ← |ypf - ypi + 1|
dxup ← anchurau / anchurap
dypu ← alturap / alturau
xu ← xui
yu ← función( xu )
x_origp ← xpi
y_origp ← ypf + 1 - dyup * |yu - yui|
Bucle: xp ← xpi+1 hasta xpf con incremento de 1
xu ← xu + dxup
yu ← función( xu )
yp ← ypf + 1 - dyup * |yu - yui|
Dibujar_Línea( x_origp, y_origp, xp, yp )
x_origp ← xp
y_origp ← yp

función() es la ecuación cuya gráfica queremos trazar. La función Dibujar_Línea() hace alusión a la función básica de cualquier API o biblioteca gráfica, para trazar una línea recta desde una coordenada de píxeles a otra.

Ejercicios

Enlace al paquete de este capítulo.

1. Escriba, para cada ecuación, un programa que trace las gráficas de las siguientes ecuaciones y según las restricciones dadas:

   1. y(x) = 0,5x4 - 2x3 + 0,33x2 - 0,75x + 1,
      Restricciones: x = [-1, +2], y = [y(2), y(-1)],
      Resolución: 100 x 100.

      

   2. y(x) = (1,5x3 - 2,6x2 + 3,3x - 10) / (x2 - 1,5x + 0,5),
      Restricciones: x = [0, +2], y = elija un intervalo apropiado,
      Resolución: 300 x 300,
      
      Observación: la ecuación contiene dos asíntotas verticales, x1 y x2. Calcula, con anterioridad, estos valores de x para que la ecuación no sea indeterminada en x = x1 ni en x = x2.
      (Pista: Precalcula, x2 - 1,5x + 0,5 = 0, ya que si el denominador es 0, entonces la división queda indeterminada y por tanto la ecuación se "dispara" a infinito en el eje-Y positivo).
      

      

   3. Si x < 1, entonces y(x) = 1 - x2, si 1 ≤ x ≤ 9, entonces y(x) = ln x, si x > 9, entonces y(x) = cos x,
      Restricciones: x = [-1, +12], y = elija un intervalo apropiado,
      Resolución: 600 x 600.

      

   4. y(x) = |6 - x2|,
      Restricciones: x = [-5, +5], y = [0, +6],
      Resolución: 300 x 300 para la gráfica, pero centrado en una resolución total de la ventana, portal, o zona de dibujo de 500 x 500. Es decir, la gráfica debe dibujarse en unas dimensiones de 300 x 300, pero las dimensiones de la ventana o zona de dibujo son de 500 x 500. La gráfica debe estar centrada con respecto a la ventana.

      

2. Elija dos de las ecuaciones anteriores y reescriba sus programas para que trace las curvas usando el método descrito en el último párrafo de la sección Observaciones, bajo b)2.. Esto es, trace la ecuación a partir de valores dados para y_p en vez de x_p. Compare las gráficas obtenidas con este método junto con el usado en el ejercicio anterior.
3. Escriba un programa para trazar la siguiente ecuación:
   f(x) = 4 / π * [ ∑( sen(nx) / n ) ], donde n = 1,3,5,7,..., +∞ (infinito).
   Si escribimos unos cuantos términos de la suma, obtenemos lo siguiente:
   f(x) = 4 / π * [sen(x) + sen(3x) / 3 + sen(5x) / 5 + sen(7x) / 7 + sen(9x) / 9 + sen(11x) / 11 + sen(13x) / 13 + ...],
   Restricciones: x = [-2π, +2π], y = [-1,5, +1,5],
   Resolución: 800 x 800,
   Como no podemos llegar hasta +infinito, entonces elegiremos un intervalo finito. Esto es, n := [1,N]. Para el valor de N, use:
   

   1. N = 3,

      

   2. N = 7,

      

   3. N = 21,

      

   Observaciones: Cuanto mayor sea el valor de N, obtendremos una mayor precisión de la ecuación. Esto implica que nuestro error se reducirá a 0 (cero) o al menos a un valor insignificante.

4. La ecuación presentada en el ejercicio #3 es, en realidad, la serie de Fourier para esta ecuación periódica:
   Si -π < x < 0, entonces f(x) = -1. Si 0 < x < +∞, entonces f(x) = 1.
   Reescriba el programa del ejercicio anterior #3 - usando las mismas restricciones y resolución - para dibujar la función anterior, presentada en este ejercicio #4. Si sabe manipular colores, use distintos colores para cada trazado. Si no puede distinguir un trazado del otro, entonces cree otro programa diferente y ejecute ambos simultáneamente. Compare ambos trazados. Después de varias sumas (por ejemplo, N = 21), el trazado de la serie de Fourier (ejercicio #3) se parecerá o igualará al de esta ecuación (ejercicio #4).

   

   
   
   Observaciones: 1) La función no define algunos valores de f(x) para todos los valores de x. El dominio (valores de x) es el intervalo (-π, 0) ∪ (0, +π), ∪ significa unión. Los valores x1 = -π, x2 = 0, y x3 = +π no están definidos para f(x).
   2) La ecuación anterior debe ser trazada periódicamente. Es decir, el mismo trazado debe ser igual para los intervalos x := ... ∪ (-3π, -2π) ∪ (-2π, -π) ∪ (-π, 0) ∪ (0, +π) ∪ (+π, 2π) ∪ (+2π, +3π) ∪ .... La periodicidad es de 2π; o sea, cada 2π unidades, la gráfica se repite.

5. Otra forma de crear curvas es basándonos en un parámetro común para x e y. Esto sería, x = x(t) e y = y(t), donde t es nuestro parámetro. Tales ecuaciones están en forma paramétrica. Escriba un programa para trazar las siguientes curvas paramétricas:

   1. x(t) = sen(t), y(t)= cos(t), donde 0 ≤ t ≤ 2π,

      

   2. x(t) = t*cos(t), y(t) = 3t*sen(t), donde 0 ≤ t ≤ 8π,

      

   3. x(t) = (1 - t2) / (1 + t2), y(t) = 2t / (1 + t2), donde -π ≤ t ≤ +π,

      

   4. x(t) = a*cos(t) + b*cos(at/2), y(t) = a*sen(t) - b*sen(at/2), donde 0 ≤ t ≤ 2π,
   Esta curva se denomina hipotrocoide. Pruebe con unos cuantos valores para a y b y con diferentes intervalos de t; por ejemplo,
   

   1. a = 8, b = 5

      

   2. a = 6, b = 5

      

   3. a = 6, b = 2

      

   4. a = 12, b = 8

      

   5. a = 14, b = 8,6

      

   Elija las restricciones y la resolución que más convengan para cada caso.

Observaciones: Al usar ecuaciones paramétricas, el parámetro t sirve para calcular la pareja de valores (x, y) que realmente es (x(t), y(t)) en el plano cartesiano. Es decir, t no es representado en el trazado de tales ecuaciones, sino que sirve de "ayudante" para calcular los posibles valores de x e y. En los anteriores ejercicios, nos basábamos en los valores incrementales de x_p. Sin embargo, ahora tenemos un valor en unidades cartesianas, t, que regula la iteración. Los incrementos de los valores de t no son fácilmente visible. Intente seguir esta fórmula para definir el incremento de t para cada iteración:
delta_t = |tf - ti| / n,
donde t_i y t_f son los valores inicial y final de t, respectivamente. n es el número de muestras o valores de t, esto implica que cuanto mayor sea n, más coordenadas tendremos y por lo tanto más precisos serán nuestros cálculos. Esta precisión conlleva a una curva más curva (valga la redundancia).