Dibujar Funciones Matemáticas En HTML5 Usando El Canvas De Gnuplot

por | 19 agosto, 2013

Hola Llevo meses intentando solucionar un problema que surgió cuando empecé un proyecto personal para crear una web con contenido matemático. Lo que quería era que al usar la nueva opción del Canvas (Lienzo en inglés) pudiese dibujar gráficas de funciones matemáticas de todo tipo: explicitas, implícitas, paramétricas, bidimensionales, tridimensionales, etc. Por la red de redes encontré interesantes scripts de javascript para poder dibujarlas en 2D, pero nada en 3D. Hasta que un día intentando empaquetar Gnuplot para ROSA vi que el programa permitía establecer como terminal una terminal canvas, investigué sobre ello y vi que era lo que quería.

Me explico mejor sobre qué va todo esto. Con Gnuplot hacemos primero en un fichero nuestros dibujos matemáticos bi y tridimensionales, cuando lo tengamos hecho, y desde Gnuplot efectuamos un par de órdenes (que luego diré) y obtenemos un fichero en lenguaje JavaScript sobre nuestro dibujo. Éste fichero es el que subiremos a nuestro proyecto web, será el código javascript que necesitamos cuando invocamos en HTML5 a la etiqueta Canvas para que en nuestro canvas aparezca el dibujo matemático deseado.

Los motivos de querer hacerlo así son 2: el fundamental es que usando la etiqueta canvas obtenemos una adaptación total entre la gráfica y el html. El otro motivo es que no usamos una imagen para cada gráfica de la función, por el contrario usamos un fichero javascript que ocupa (en la mayoría de los casos) menor memoria que una imagen. Veamos los pasos. Doy por sabido que tienes ya instalado Gnuplot y sabes utilizarlo medianamente. Gnuplot es un proyecto de código libre que lo puedes instalar en Windows, Mac y en cualquier distro linuxera.

Lo primero es obtener unos ficheros javascript necesarios para que te funcione todo perfectamente. Si no te quieres complicar mucho en obtenerlos lo mejor es que te bajes el código fuente desde su web, repito, el código fuente, indistintamente del sistema operativo que utilices.

Una vez lo hayas descargado lo descomprimes (porque será un fichero de extensión .tar.gz) y accedes a la carpeta/directorio js que está en la ruta term/js. De ese directorio debes copiar todos los ficheros de extensión .js en tu proyecto web personal (normalmente en tu proyecto web debes crear una carpeta con nombre js y dentro de ella copiar esos ficheros). En la última versión de ahora de Gnuplot los ficheros son:

canvasmath.js

canvastext.js

gnuplot_common.js

gnuplot_dashedlines.js

gnuplot_mouse.js

gnuplot_svg.js

Para el ejemplo que voy a explicar aquí no los vamos a necesitar todos, sólo los más esenciales. Los otros son para obtener una interacción entre el usuario final y el canvas, pero a mi no me interesa esa faceta por el momento, y está un poco verde para mi gusto.

Muy bien, ahora te crear con tu IDE preferido tu dibujo de la gráfica que quieres para Gnuplot. Para éste ejemplo voy a usar el del artículo anterior. Al fichero le voy a llamar poligononoacotado. Cuando lo tengas listo desde el programa Gnuplot ejecuta los siguientes comandos:

set term canvas name ‘poligononoacotado’
set output ‘poligononoacotado.js’

Con el primer comando nos aparecerá el siguiente mensaje:

Terminal type set to ‘canvas’
Options are ‘ solid butt size 600,400 fsize 10 lw 1 fontscale 1 name “poligononoacotado”‘

Nos informa de las opciones por defecto que va a tener nuestro canvas, si quieres cambiarlas puedes consultar el siguiente enlace:

Con esto obtendremos un fichero javascript con el nombre poligononoacotado.js, éste fichero lo copias dentro de la carpeta js de tu proyecto web.

Bien, ahora desde nuestro fichero html en el que queramos poner nuestra gráfica cargamos los javascript de Gnuplot con los comandos:

  1. <script type="text/javascript" src="js/canvastext.js"></script><script type="text/javascript" src="js/gnuplot_common.js"></script>
  2. <script type="text/javascript" src="js/canvas_math.js"></script>

Después en el html nos situamos donde queramos que aparezca nuestra gráfica y cargamos el fichero poligononoacotado.js y el canvas con los siguientes comandos:

  1. <script type="text/javascript" src="js/poligononoacotado.js"></script>
  2. <canvas id="poligononoacotado" width="600" height="400"></canvas>
  3. <div>No support for HTML 5 canvas element</div>

Fíjate que el identificador (id=’poligononoacotado’) del canvas debe coincidir con el nombre del javascript para que te funcione correctamente.
Finalmente, en la etiqueta body de nuestro html debemos cargar la función, así:

  1. <body onload='poligononoacotado()'>

Si tenemos más de un canvas en el mismo html todo es igual, salvo que en el body los listamos todos separados por punto y coma,por ejemplo, si tenemos un segundo proyecto canvas de nombre rectaplano será:

  1. <body onload='poligononoacotado(); rectaplano()'>

Para que el canvas te funcione en el maricón de IE vas a necesitar un javascript llamado excanvas.js que puedes obtener de la siguiente web:


En tu fichero html lo cargas con el comando:

  1. <!--[if IE]><script src="js/excanvas.js"></script><![endif]-->

Y eso es todo, puedes descargar todos los ficheros de éste ejemplo en el siguiente enlace:


En el ejemplo he utilizado para escribir lenguaje matemático el lenguaje de marcado MATHML junto con MATHJAX. Para que el ejemplo tuviese una vista mejorada he utilizado BootStrap 3.

Gráficas con Canvas


Como puedes ver el software libre es increíble, con ganas de aprender podemos obtener unos resultados profesionales y para todos, ricos y pobres, la educación es un derecho del ser humano.
Saludos

P.D. El ejemplo aquí expuesto ha sido realizado en su totalidad bajo la distribución linuxera ROSA 2012.1 Fresh Edition. ¿Quién dijo que con Gnu/Linux no se puede trabajar con profesionalidad?

3 pensamientos en “Dibujar Funciones Matemáticas En HTML5 Usando El Canvas De Gnuplot

  1. Pingback: Bitacoras.com

  2. Pingback: Dibujar Funciones Matemáticas En HTML5 U...

  3. Pingback: Dibujar Funciones Matemáticas En HTML5 U...

Los comentarios están cerrados.