Paper.js: gráficos vectoriales con HTML5 y JavaScript

En algunas de sus aplicaciones, Flash está lejos de desaparecer a pesar del avance de HTML5. Sin embargo, a medida que este nuevo estándar es adoptado surgen nuevas herramientas que, en otros casos, vuelven su uso más conveniente que el de la popular plataforma de Adobe.

HTML5 incorpora el elemento Canvas, que funciona como un lienzo para dibujar gráficos vectoriales a través de un lenguaje de scripting. Casi siempre, el elegido es JavaScript. Aunque no reemplazan a las fotografías, los gráficos vectoriales sí son ideales cuando se desea insertar dibujos simples o elementos geométricos que no se pixelen al cambiar de tamaño. Además, Canvas implementa esta tecnología sin recurrir al formato SVG, no soportado por algunas versiones recientes de navegadores móviles.

Para facilitar la creación de gráficos a través de esta combinación existen varias herramientas. Una de las más conocidas es Paper.js, un framework para crear animaciones y gráficos interactivos a partir de Canvas y JavaScript. Es la evolución de Scriptographer, un plugin para Adobe Illustrator que permite crear y modificar gráficos a partir de funciones en JavaScript.

Paper.js ofrece grandes características:

  • La posibilidad de crear gráficos interactivos con entrada a través de mouse, teclado o contacto dactilar.
  • Un fácil manejo de curvas y segmentos.
  • Una fuerte base de geometría que permite trabajar más fácilmente con posiciones, movimientos y vectores.
  • PaperScript, una extensión que permite ejecutar múltiples scripts separando adecuadamente sus ámbitos.
  • Herramientas para agregar increíbles efectos sobre archivos de imagen, como si estuviéramos usando un editor visual en línea.

El sitio oficial del proyecto cuenta con una asombrosa galería de ejemplos, donde podemos desplazar objetos guiándolos con el mouse o el teclado, realizar dibujos sobre la pantalla, distorsionar formas a voluntad o, disfrutar de animaciones psicodélicas. A pesar de todo, hay que recordar que algunos navegadores antiguos no soportan el elemento Canvas, por lo que no son compatibles con esta tecnología.