Wextensible

Gráficas de funciones matemáticas con puntos HTML y Javascript (o CANVAS)

Trazador de gráficas (con canvas)

Aplicación

Trazando...
x=0
y=0
1.234
 Función Opciones I/O HTML/IMG
Modo:
Modo trazado
Medidas plano
Zoom
Mover plano
Color de la gráfica
Ejes y subejes
Graduaciones
Títulos ejes
Título gráfica
Otras opciones Los nodos e iteraciones máximas se multiplican por 10 cuando se use canvas.
 
Con canvas obtenemos una imagen y los datos de la misma serializados. Con HTML obtenemos el literal de los nodos que forman la gráfica.


Introducción

Un trazador de gráficas de funciones matemáticas online no es algo nuevo, por supuesto. Mi propuesta es un trazador que usa puntos confeccionados con elementos HTML e insertados en el DOM de la página con Javascript. Y esto tampoco sé si existe aunque supongo que sí, pero en lo indagado hasta ahora no lo he encontrado. Funciona totalmente en el lado del cliente y el navegador no tiene necesidad de usar ningún tipo de complemento como hacen otros trazadores (Java o Flash por ejemplo).

Aunque en este sitio he adquirido el compromiso de explicar las partes del diseño de cada documento, en este caso se trata de una versión en pruebas y, al mismo tiempo, una simple curiosidad que no está directamente relacionada con el desarrollo web. Por lo tanto sólo me limitaré por el momento a esta única página explicando como usarlo y algunos detalles sobre el objeto Math de Javascript.

El trazador lo he probado con las versiones que tengo actualizadas en Agosto 2011 de Explorer 8.0 (IE), Google Chrome 12.0 (CH), Firefox 5.0 (FF), Safari 5.0 (SA) y Opera 11.5 (OP). En versiones anteriores no sé que pasará, pues en general no testeo las páginas de este sitio con versiones antiguas de exploradores.

Ayuda para usar el trazador de gráficas

En el área de texto podemos escribir una o más funciones separadas por el caracter "#". Si la opción de usar un color para cada gráfica está activada, se aplicarán colores diferentes. Una función puede ser declarada en coordenadas cartesianas, como por ejemplo y=3*sin(x) o incluso especificando un rango en el eje X como x=0..PI/2; y=3*sin(x). Otro ejemplo, la ecuación de la circunferencia en cartesianas necesitará dos funciones para trazar ambos lados de la función raíz cuadrada:

y=sqrt(1-pow(x,2)) # y=-sqrt(1-pow(x,2))

Pero también puede expresarse en coordenadas polares, que tiene un mejor rendimiento en el trazado:

t=-PI..PI; r=1; x=r*cos(t); y=r*sin(t)

Hay unos limitadores para evitar el número excesivo de nodos o de iteraciones en el muestreo automático. Se fijan en 3000 nodos y 5000 iteraciones. Si se llega a alguno de estos límites nos preguntará si seguimos trazando. En cuanto a las iteraciones no tiene más carga que la del tiempo. Si estamos dispuestos a esperar para ver una gráfica más precisa entonces podemos ir aceptando los avisos. Pero en cuanto al número de nodos hay que entender que 3000 es una cantidad que soporta bien mi ordenador con Windows XP y 1GB de RAM. Con otros recursos se podrán variar estos limitadores.

El trazador puede saltarse de forma automática las discontinuidades de las funciones, pero genera más nodos. Por ejemplo, la función y = sin(1/x) es tal que cuando x tiende a cero la función no tiene un límite pues será cualquier valor entre 1 y -1. Esto hace que la gráfica vaya "apretándose" a medida que se acerca al origen. El sistema de muestreo automático activado con la casilla de remarcar hace que se busquen los puntos de X tal que dos puntos consecutivos de Y resulten adyacentes. Si la aplicamos a una función con esos puntos especiales, el número de nodos puede resultar muy alto. En estos casos conviene separar la gráfica en dos partes para reducir el número de nodos

x=-3.8..0;y=sin(10/x) # x=0..3.8;y=sin(10/x)

La precisión es un número real no negativo y está relacionada con el grosor del punto (valor fijo de 2px). Esto nos dará el paso de muestra inicial de los valores del eje X:

pasoMuestraInicial = gruesoPunto/(1+precision)

Si el plano está configurado con las dimensiones 400x400 píxeles y sin la opción de remarcado y con precisión cero, entonces el paso de muestra inicial es de 2/(1+0) = 2px. Es decir, en este caso el paso de muestra es el grosor del punto. Por lo tanto para un ancho del plano de 400px tendremos 200 muestras, por lo que cualquier función no tendrá más de 200 puntos. En definitiva, si no se activa la casilla de remarcar y se pone una precisión de cero, entonces se trazarán puntos sueltos. El remarcado hace que se active el muestreo automático que dije antes, aunque a veces es suficiente con sólo incrementar la precisión pues produce un paso de muestra más pequeño. En algunos casos hacen falta ambas opciones lo que puede llegar a incrementar notablemente el número de nodos o de iteraciones de muestreo automático.

Para algunas gráficas complejas hay que buscar los valores adecuados con el zoom y actuando sobre el marcado y la precisión. Este trazador lo he probado con los navegadores señalados más arriba con resultado satisfactorio, aunque el grosor del punto de 1 píxel sólo funcionaba en Explorer y Firefox, pues en Safari, Chrome y Opera no se veía el trazado. Es algo que intenté arreglar, pues con 1px se consigue un detalle más fino en el trazado. La razón de esto creo que se debe a que el punto lo dibujo usando un elemento sin contenido y con un color de fondo, pero dándole un {padding} (o relleno) para el grosor. Así un grosor 2 equivale a un padding de 1px, pero con un grosor de 1px significa que ese relleno debe ser de 0.5px y sólo funciona como dije en Explorer y Firefox. Al final en una segunda versión decidí dejar un único grosor de 2px fijo para evitar estas diferencias.

Otras utilidades y cuestiones de seguridad

En la pestaña I/O (abreviando input/output) podemos exportar la función y todas las opciones a una cadena de texto para guardarla manualmente en algún soporte de texto. Si en un momento posterior copiamos ese texto y lo pegamos en el cuadro, podemos importar esa función con todas sus opciones.

La pestaña HTML/IMG nos sirve para extraer todos los nodos de la gráfica como un literal HTML o como una imagen si estamos usando canvas. En este caso también podemos obtener la imagen en base64. Con el menú del navegador podemos descargar esa imagen para otros usos. O bien usar el valor del data:image/png;base64 que contiene la imagen serializada.

Sobre el tema de la seguridad hay que tener en cuenta que toda la ejecución se encarga al módulo Javascript y, por lo tanto, se ejecuta en el navegador. El script hace uso de la función eval() para poder obtener el resultado de las funciones matemáticas del objeto Math. He aplicado algunas limitaciones para impedir poner cualquier cosa en las funciones. Sólo se permite declarar variables de una sóla letra del conjunto de letras [a-z]. Por otro lado las únicas funciones permitidas serán las del objeto Math de Javascript, incluidas sus constantes así como las funciones complementarias, es decir, todo lo que hay en los dos cuadros desplegables para insertar funciones.

En toda función tiene que haber al menos la variable independiente x que siempre se declara aunque el usuario no lo haga expresamente. La variable y es la que se calcula en el script y puede ser función de x como en las coordenadas cartesianas o de cualesquiera otras variables, como cuando usamos coordenadas polares. En todo caso podemos usar cuantas variables intermedias necesitemos. Al final toda esa expresión separada por puntos y comas no es otra cosa que instrucciones de código Javascript para obtener el punto (x,y).

El objeto Math de Javascript

Hay tres desplegables para insertar funciones. El primero contiene las constantes y funciones básicas del objeto Math de Javascript. El segundo contiene algunas funciones complementarias basadas en las anteriores. El último desplegable nos sirve para presentar algunos ejemplos de funciones que extraje con la utilidad de exportación.

El objeto Math tiene constantes en mayúsculas y funciones:

Operadores Javascript

A continuación relaciono los operadores de Javascript que pueden usarse:

En cuanto a los recursos para controlar el flujo de las instrucciones, tenemos los siguientes:

Referencias de trazadores gráficos y otros recursos

Hay numerosos sitios que ofrecen trazadores de gráficas online. Con sólo mirar un par de las primeras páginas de los resultados de consulta en Google nos aparece:

Las versiones que usan complementos requieren que estos estén instalados y actualizados en el navegador. Las que se confeccionan en el servidor y se envían al navegador como imágenes son más lentas y con menor poder de posterior manipulación por el usuario. Hasta el momento no he visto ninguna aplicación basada en puntos HTML sin requerir ningún otro complemento, pero sólo he podido indagar en unas pocas.

Para aprender más sobre gráficas de funciones y buscar ejemplos:

Y por supuesto en Wikipedia, por ejemplo en la parte de Commons.wikemedia.org encontraremos otras tantas.