domingo, 15 de mayo de 2011

Animación Interactiva de Gráficos Vectoriales con RaphaëlJS

Animación Interactiva de Gráficos Vectoriales
con RaphaëlJS

A continuación les contaré mi experiencia con RaphaëlJS, una librería de JavaScript que pretende simplificar el manejo de gráficos vectoriales (SVG). Trataré de resumir lo que aprnedí de tres prácticas secillas de animación interactiva con gráficos vectoriales, los resultados los pueden ver aquí.

Recomiendo que se descargarguen el código, para practicar y/o modificarlo, pero recuerden cumplir con ésta licencia.


Indice

  • Justificación
  • Preparación
  • Conocimientos Previos
  • Materiales
  • Conceptos Básicos
  • Pasos A Seguir
  • Introducción a RaphaëlJS
  • Ballz
  • John Key
  • Mr. Bézier
  • Resultados Esperados
  • Ideas A Futuro
  • Referencias


  • Justificación

    Desde pequeño me interesé por el arte, pasé muchos años escribiendo, dibujando y tocando guitarra, con pocas guías a la mano. Gracias a que usé por un tiempo Adobe Photoshop, cuando entré al mundo de la programación mis familiares y amigos me animaban a aprender Adobe Flash. En mi opinión, el uso de Flash para los sitios web es obstrusivo, lento y de poco fiar, además que si buscamos encontraremos artículos interesantes que respaldan éste tipo de opiniones. Pero lo que me hizo decidir que Adobe no era mi camino para seguir fue el nacimiento de HTML5, que llegó para afinar los estándares web y simplificar el proceso de crear aplicaciones enriquecidas par la web (RIA).

    Buscando como entrar al mundo de HTML5, encontré a la librería RaphaëlJS, que con todos sus ejemplos de gráficos vectoriales interactivos, y su lema "Everyone Can Draw" me enamoró inmediatamente.

    Mi primer paso con esta librería fue hacer un pequeño juego en primera persona para sobrevivir al apocalipsis zombi, el cual conecté con el api de twitter para que los seguidores del usuario fueran los zombies que aparecen. A ese juego lo llamé The Twitting Dead. A pesar de que gracias a esa práctica aprendí muchísimas cosas, me faltó por utilizar gran parte del potencial de RaphaëlJS, el cual quise descubrir con una serie de prácticas que realicé entre enero y abril del presente año (2011), y que quiero contarles en este documento.


    Como el codigo excede el limite de 1 MB de Blogger, pueden visualizar el tutorial completo en mi sitio web


    Ideas a Futuro

    Pensé en trabajar en un plugin para RaphaëlJS, pero tengo mucho interes en investigar sobre las librerías three.js, d3.js y processing.js, cualquier cosa seguiré publicando mis avances por aquí. ¡Gracias por leerme! ^^


    Autor:
    Daniel Rodriguez
    @sadasant en Twitter

    No hay comentarios:

    Publicar un comentario