Era finales del año 2008 cuando estaba por terminar mi tercer ciclo de carrera en la FCFM; en aquel entonces cursaba la materia “Programación Orientada a Objetos” haciendo uso del lenguaje JAVA y una de nuestras asignaciones finales era la de construir una pequeña aplicación donde se implementaran los temas del curso.

Mi aplicación básicamente trataba de un pequeño applet de JAVA que evaluaba y graficaba funciones matemáticas.

Hoy en día decir algo como “construiré un applet para implementarlo en la web” suena como “Te envío un SMS”… ¿Qué diablos es un SMS?. Así que he intentado explorar algunas alternativas…

Warning: El código siguiente solo funciona para explicar la idea de los pasos a seguir. El código completo se puede encontrar en este gist; es demasaido feo y necesita refactorizarse, solo debe tomarse como un prueba de concepto.

Canvas HTML5

Canvas es un elemento de HTML5 que nos sirve para dibujar “lineas” vía scripting (Javascript) en un navegador web. Al acceder a este elemento podemos hacer uso de un conjunto de métodos que nos ayudan a trazar elementos como lineas, cuadros, circulos, etc.

En w3schools podemos encontrar un tutorial completo para el manejo de canvas.

- Contexto

Primeramente necesitamos construir nuestro elemento en el HTML; a este elemento le asignamos propiedades básicas (id, ancho y alto), así como un pequeño mensaje en caso de que el navegador no tenga soporte para HTML5:

Con nuestro elemento canvas en el HTML, podemos acceder al contexto:

- Transformación

Un punto importante a mencionar es el trabajo con las coordenadas del canvas; desde el punto de vista del elemento canvas, visto como un rectángulo, el sistema de coordenadas tiene el punto orgien en el vértice superior izquierdo. Sin embargo, para el plano cartesiano requerimos que se encuentre en el centro. Asi que necesitamos trasladar este punto al centro.

En adelante, todos los puntos evaluados en la función deben ser calculados a partir del origen.

- Evaluar

Una vez con el contexto en memoria, se debe evaluar cada punto en la función a graficar. Los puntos a evaluar serán todas las x transformadas al origen del canvas.

Cada iteración del ciclo for evalua la x en la función f. Suponiendo que se desee evaluar una función , para valores :

Cada será el valor del eje y con esto generamos un conjunto de puntos:

- Trazar

A partir de este punto, podemos hacer uso de los métodos para el trazado. Para los fines, básicamente necesitamos los siguientes métodos:

• beginPath(): Begins a path, or resets the current path.
• moveTo(): Moves the path to the specified point in the canvas, without creating a line.
• lineTo(): Adds a new point and creates a line to that point from the last specified point in the canvas
• stroke(): Actually draws the path you have defined

El listado completo de métodos y propiedades, lo podemos encontrar en w3schools.

Agregando al código anterior los métodos para el trazado, se inicializa el contexto y en cada iteración construimos la línea del punto actual:

- Implementación

Como se puede ver en el último fragmento de código, para calcular la real se debe invocar el método f. Este método, se puede enviar como parámetro a la función que se encarga de generar la iteración, para tenerlo como parámetro a la hora de ser implementado. Algo como lo siguiente:

De este modo, plot será la función encargada de inicializar la gráfica; se le envía la función a evaluar y el rango sobre el cual se desea trabajar en el conjunto de las .

- Test

A este ejemplo le he hecho un ligero ajuste para animar la gráfica utilizando el método requestAnimationFrame, su documentación se encuentra aquí.

Conclusión

Definitivamente con javascript son muchísimas líneas de código menos que en JAVA y es un primer buen acercamiento con el trazado de formas en la web utilizando canvas. Aún así, me parece que da mejores resultados implementar este tipo de situaciones con SVG, quizá para un futuro post =)