Gráficos isométricos con HTML5 y JavaScript

Isomer es una fantástica biblioteca escrita con JavaScript y que funciona de manera conjunta a HTML5 para la creación de gráficos isométricos de manera sencilla y rápida.

Este proyecto se encuentra liberado bajo licencia MIT lo que significa que podemos utilizarlo de manera gratuita tanto en proyectos comerciales como personales. Sin embargo el autor brinda la opción de comprar una licencia por solo 10 dólares, pero esto simplemente lo hace a modo de apoyo, así que si te gusta esta iniciativa puedes contribuir con ella no solo desde el código sino desde lo económico comprando una de estas licencias.

graficos isometricos con javascript

La compatibilidad de este proyecto es bastante amplia, funciona perfectamente en los navegadores modernos y en todos aquellos que soporten las propiedades HTML5 básicas, en especial las relacionadas a Canvas.

Un punto interesante, y que lo diferencia a otras alternativas similares, es que el peso de la biblioteca completa es de apenas unos 7KB en su versión simplificada.

Utilizar este proyecto es de lo más sencillo, basta con agregar la biblioteca a nuestro sitio y luego construir nuestros gráficos mediante unas pocas lineas de programación.

Por ejemplo podemos construir un cubo con el siguiente código:

var Shape = Isomer.Shape;
var Point = Isomer.Point;

iso.add(Shape.Prism(new Point(0, 0, 0)));

Isomer es muy fácil de usar, ademas el sitio oficial del proyecto cuenta con una documentación con varios ejemplos de uso para que podamos aprovechar al máximo esta biblioteca.

Además de las opciones básicas para construir nuestros distintos escenarios podemos animar los distintos elementos combinando funciones básicas de JavaScript con los mecanismos provistos por este proyecto para escalar, girar, y rotar los diferentes elementos.

Si Isomer les parece una iniciativa interesante les sugiero visitar el apartado que tiene en CodePen para jugar un poco con esta fantástica herramienta.

Categorizado en: