Anuncios‎ > ‎

Dibujando con matemáticas (HTML5)

publicado a la‎(s)‎ 1 sept. 2015 18:41 por Jorge Girbau   [ actualizado el 1 sept. 2015 18:53 ]
Pues sí, aunque parezca de locos, ahora la tendencia es hacer los gráficos con figuras geométricas y efectos calculados con algunas ecuaciones matemáticas. De esta forma los gráficos pueden crearse, redimensionarse o transformarse de acuerdo a las necesidades del requerimiento, e inclusive pueden hacerse animaciones, si la velocidad del procesador del cliente lo permite.

Para esto el nuevo HTML-5 viene con 2 herramientas simples, pero muy poderosas:
SVG y CANVAS
Cual de las 2 es mas poderosa?, es una pregunta irrelevante, porque aunque ambos son objetos de HTML5 y sus funciones parecen casi equivalentes, hay una diferencia clave, que las hace a cada una muy práctica, para propósitos muy distintos. Y no se dejen engañar por lo complicado que suena la idea, es realmente una de las mas poderosas herramientas del nuevo HTML-5.

Termometro



SVG: este objeto está basado en un formato tipo XML, que nos permite dejar un fuente transportable, que inclusive ahora existe como un objeto separado. Pueden salvarlos en un fuente aparte, con extension ".svg" y luego este archivo fuente puede ser contenido de un objeto de imagen. Por ejemplo <img src="fire.svg" />
También puede ser modificado con javascript, de hecho tiene parámetros para definir algunas acciones de animación, pero es un poco más limitado que las canvas en este sentido.

CANVAS: Este objeto , también es para dibujar, pero funciona como un lienzo en blanco, en el cual se puede dibujar con instrucciones desde javascript. Es decir que el dibujo es literalmente creado cada vez que se muestra. Si adicionalmente colocamos estas instrucciones en una funcion que pueda ser disparada cada cierto tiempo (Interval), entonces realmente el procesador está creando cada cuadro de nuestra animación y allí las posibilidades son infinitas. 

De forma que las aplicaciones prácticamente definen cuál herramienta es mejor candidata para cada utilidad. Si necesitan un control dinámico para ser ejecutado y manipulado por sus aplicaciones, la respuesta es CANVAS. Ahora si necesitan un gráfico portable y que tenga un fuente que puedan guardar, su respuesta es SVG.

Si aun estan nuevos con estos conceptos, les recomiendo que empiecen con SVG, porque es mas facil de entender la idea, pues el grafico es mas palpable. Pero cuando sean verdaderos expertos van a adorar más les CANVAS y sus aplicaciones gráficas estarán llenas de CANVAS.

Siempre me preguntan, y donde puedo aprender mas de eso, y como todo lo de la WEB, la respuesta siempre conduce a W3Schools.com. Yo siempre recomiendo este lugar para aprender cualquier nueva tecnología WEB. En este caso pueden visitar:


Pero la base de esta programación, nos lleva a nuestra geometría básica, así que ahora van a tener que programar con la "Geometría y Trigonometría de Baldor" debajo de brazo. Espero que hayan sido bueno en matemática aplicada, geometría, cálculos con ángulos (radianes), senos, cosenos, tangentes, cálculos de áreas, hipotenusa, perímetros. Todas estas herramientas que no estudiabamos desde que salimos de la universidad ahora vuelven a ser muy importantes (como siempre pasa). Si lo aprender a usar bien, les aseguro que sacarán provecho de la herramienta Math de JavaScript como nunca antes.

Mientras más figuras geométricas y cálculos asociados puedan manejar, mayor será su potencial como programador, así que tal vez pronto veamos algún anuncio de empleo buscando un programador-diseñador WEB, con talento para las matemáticas aplicadas. Si te gusta la computacion y tambien las matemáticas, tal vez esta es una nueva profesión con futuro.

Espero que se diviertan dibujando con su calculadora científica y javascript.
Comments