gifs manuales con processing.js

[pase el mouse o el dedo de izquierda a derecha sobre la imagen]


(descargar código)



Hace un tiempo pensé que sería interesante poder manejar un gif manualmente con el mouse, simplemente usando la técnica cuadro a cuadro de un gif.

Sigo aprendiendo processing, así que bueno, una vez más me apoyo en este fiel amigo para el experimento que creo salió bastante bien y que simplemente consiste en separar la animación en imágenes individuales, cargar estas imágenes en un arreglo e irlas llamando dependiendo del movimiento del mouse.

En el código dejo dos opciones: la primera va avanzando en las imágenes si el mouse se mueve hacia la derecha, con opción de hacerle ‘rewind’ moviendo el mouse a la izquierda. La segunda, que es la del gif de arriba, simplemente avanza en la imagen independientemente de en qué dirección se esté moviendo.

En la opción que tiene rewind usé map() para cargar los índices del arreglo dependiendo de la posición del mouse. Ya para saber en la otra opción si el mouse se está moviendo o no usé pmouseX, que guarda la posición inmediatamente anterior de donde estaba, de tal manera que si se le resta a la posición actual -mouseX- y da más de uno -o menos de menos uno en el caso de izquierda a derecha- entonces sabemos si el usuario ha hecho algún movimiento.

Aún tengo algunos problemas con la versión web de esto, siento que a veces se traba demasiado, pero no siendo más aquí dejo lo que logré. Descarguen el código, o si quieren ver cómo estoy haciendo para que funcione en móviles y iPad revisen el código de esta entrada en mi repositorio de github!