Glitch Gif con Gimp

Desde hace unos años ha crecido de una manera muy importante en la red el interés por el Glitch Art, sobre todo en lo referente al tema de la destrucción de las imágenes pues exige un conocimiento y unos medios más sencillos que, por ejemplo, el tema del video o del hardware; basta un editor de texto y una imagen para realizar un proceso de databend. Por ello han aumentado las páginas de usuarios que muestran sus trabajos de imágenes glitch, las páginas de comunidades y grupos (al pionero grupo de Flickr, Glitch Art, se han sumado otros grupos en el mismo Flickr, Facebook o Tumblr) y también han surgido experiencias en códigos de Processing, Java, nuevos softwares, web pages y apps para IPad que han ampliado considerablemente la capacidad y la inventiva del glitch. Ahora con un par de toque con un dedo sobre tu iPad ya tiene tu imagen Glitch! Yeah…
Por todo este aluvión de new aestetic glitch, digamos que ha surgido una cierta inquietud entre los pioneros artistas de este género en el sentido de que se está desvirtuando el movimiento y se está alejando de sus iniciales planteamientos (investigación, relación entre el pensamiento humano-inteligencia artificial de la máquina, cuestionamiento de la información, de la tecnología como forma de perfección, del poder de los media, etc) para convertirse en una moda, insustancial, vacía, en algo banal con un sentido que va poco más allá del puro entretenimiento. Pero esto exigiría un análisis mayor y no es el objetivo de este post.

Dentro de este barroquismo del glitch un elemento que también ha incrementado su presencia en la red el el gif animado hecho con frames glitch; muchos autores experimentan en este campo y los hay de muy diferentes tipos, desde simples animaciones de píxeles a otras más complicadas hechas con la técnica del Pixelsort o importando frames de una grabación de video.
En este post voy a explicar cómo se hace un glitch gif, aunque la técnica es la misma que se usa para hacer una animación gif normal, de esas que se hacían hace años para animar un botón o algo parecido para una web, algo que hoy ha desaparecido por completo. Los diseños cambian!!!.
Lo primero que tenemos que pensar es qué tipo de imagen y con qué compresión queremos hacer nuestros frames, pues es sabido que no todos los formatos se comportan de la misma manera al realizar el proceso de databending y que tipo de técnica vamos a usar (editor de textos, hexadecimal, Audacity, etc) aunque también es posible mezclar y hacer algunos frames con una técnica y otros con otra.

Para realizar el ejemplo he partido de esta captura de pantalla en formato .JPG que es de es una App para IPad llamada Confabot, con la que puedes conversar a modo de chat y a medida que salen ciertas palabras aparecen diferentes imágenes ( pues eso otra tontería más que la ves la pruebas y dices, bye, bye).

2014-01-29 02.38.58

De esta imagen hice dos copias, una en .GIF y otra en .TIF y utilizando un editor hexadecimal, en este caso 0xED para Mac (es gratuito aunque se puede utilizar también Hex Fiend aunque éste último no te indica el número de caracteres reemplazados, por eso prefiero usar el primero) reemplacé los caracteres FB por F8 dando lugar a las siguientes imágenes y comprobar qué tipo de formato me gustaría usar en mi gif animado. Para ello abrimos el archivo o lo arrastramos a sU icono en el Dock, vamos a Edit->Find y se abre la ventana de reemplazar caracteres. Realizamos la acción y guardamos; los resultados fueron éstos:

JPG
2014-01-29 02.38.58_FB_F8

GIF
2014-01-29 02.38.58_FB_F8_EE_DD2.gif

TIF
2014-01-29 02.38.58_FB_F8cutpaste.tiff

Otra cuestión que hay que tener en cuenta es que no se verán igual nuestras imágenes a las que hayamos realizado nuestro proceso de databend con los distintos visores de imágenes o programas de editar fotos, pues a veces ocurre que una imagen no la podemos abrir en uno de ello ( a veces no da un mensaje de error diciendo que los datos están corruptos) y sin embargo con otro editos si la podremos ver. Como vemos en éstos ejemplos la imagen anterior JPG que ha sido corrompida no se ve igual en Vista Previa, Photoshop CS5 o Gimp.

Vista Previa
v_vistaPrevia

Photoshop CS5
v_Photoshop

Gimp
v_Gimp

Una vez que ya hemos decidido con qué técnica y formato de imagen vamos a hacer nuestra animación gif; en primer lugar tendremos que ir haciendo los diferentes frames los cuales podemos hacer al tamaño y modo (RGB o Indexado) que queramos pues luego los podremos cambiar. En este caso he escogido el formato .JPG y he ido sustituyendo caracteres, cortando y pegando, añadiendo texto, etc hasta conseguir un total de 8 imágenes diferentes. Algunos ejemplos:

confabot25

confabot28

Cuando tengamos todas las imágenes en una carpeta abrimos Gimp y vamos a Archivo-> Abrir como capas; esta es una opción muy interesante y práctica pues nos abre todas las imágenes que seleccionemos directamente en capas diferentes; esta opción no la tiene Photoshop y en éste tienes que ir creando la animación frame por frame añadiéndolas al timeline de la Animación y a la pestaña de capas (Layers) por lo que Gimp es mucho más práctico en este sentido.

Captura de pantalla 2014-02-07 19.58.10

Una vez hecho esto se nos abrirá una ventana y buscamos la carpeta con los archivos que queremos que formen nuestra animación; para seleccionarlos todos y que se importen todos a la vez con el puntero del ratón seleccionamos el último archivo y pulsamos la tecla Shift (o sea la tecla de Mayúsculas)

Captura de pantalla 2014-02-21 20.56.58

Una vez tenemos todos los archivos abiertos como capas podemos modificarlos todos de una vez (tienen que estar todos visibles) para escalarlos a un tamaño óptimo para que la animación sea fluida; un buen tamaño es 480×360. Hay que pensar también dónde los vamos a subir porque algunas webs (como Tumblr) no admiten más de 500k y un tamaño mayor de 500×500 px. También podemos hacer los colores Indexados y escoger la cantidad de colores (256, 128, 64, etc) e incluso podemos modificar la paleta o aplicar un difuminado para el color. Para escalar vamos a Imagen-> Escalar Imagen, y para cambiar el modo de color vamos a Imagen-> Modo.

Captura de pantalla 2014-02-21 20.49.51

Cuando ya estemos satisfechos con todos los cambios podemos ver un preview de la animación por si algo no está bien y poder cambiarlo antes de la exportación. Vamos para ello a Filtros-> Animación-> Reproducción.

Captura de pantalla 2014-02-21 20.50.24

Entonces se nos abrirá una ventana de preview con nuestra animación como ésta.

Captura de pantalla 2014-02-21 20.54.01

Y ya como último paso vamos a realizar el gif animado; vamos a Archivo-> Exportar y se nos abre la ventana de exportación, donde pondremos el nombre del archivo y la extensión .gif; cuando demos a exportar se nos abrirá otra ventana donde marcaremos la opción “Como animación” y en “Opciones como GIF Animado” las podemos dejar las que vienen por defecto, o sea marcar Bucle perpetuo, 100 milisegundos o sea 0,1 segundo para el retraso de cada frame, Usar el retraso introducido más arriba para todos los cuadros y usar el residuo. (En este sentido Photoshop tiene más ventajas que Gimp para la exportación pues nos permite utilizar más opciones de combinaciones entre colores, dither y transparencias de color.)

Captura de pantalla 2014-02-21 20.54.40

Y por fin tenemos nuestro Glitch Gif!!!!

confabot_2_510
_____________________________

Para la siguiente animación partí de esta foto tomada de una mesa de mezclas en un concierto que convertí a .BMP. En Gimp le apliqué un Gradient Map y la imagen quedó del siguen modo.

OLYMPUS DIGITAL CAMERA

live-cables.bmp

Luego en Audacity apliqué el efecto Apple:AU Distortion, Multidecimated 2, con cuatro calidades de render: mínimum, low, médium y high para que hubiera una primera transición suave entre los primeros trames; luego apliqué Tremolo + Equalización con tres picos hasta 6dB y el último frame está hecho con el filtro G Verb configurado para que distorsionara totalmente la imagen con manchas de color que acentué con Saturación en Gimp cuando creé el gif.

live-cables

_____________________________

En el siguiente ejemplo la foto inicial está en formato .JPG a la que apliqué primero varios efectos de Noise y Enhancement y la convertí en .BMP de este modo.

OLYMPUS DIGITAL CAMERA

P1120039_3

En este caso también utilicé Audacity aplicando efecto AU Delay e ir de mayor a menor bajando el tiempo del retraso y el feedback. En otras ocasiones usé Hi Pass y Equalización, pero en vez de exportarlo en su formato original, es decir en .BMP lo exporté como .RAW y lo volví a importar en Audacity para repetir el efecto sin ninguna variación más, así conseguí frames más uniformes por lo que la animación es más pausada y con menos contrastes que en las anteriores. Este es el gif final.

P1120036

_____________________________

Por último para este gif no utilicé como punto de partida una foto sino un degradado editado hecho con Gimp. Los degradados predeterminados que vienen con el programa no se peden editar, para ello se ha de hacer una copia del que que queramos editar y hacerlo en ésta o hacer uno nuevo; luego la imagen la exporté a JPG.

yellow_contrast

El siguiente paso fué utilizar GlitchSort, que es un código de Processing, que a mi me encanta, de Paul Hertz que se basa en la técnica del pixelsort u ordenamiento de los píxeles espacialmente y en cuanto al modo de color. Giré la imagen 90º en sentido contrario a las agujas del reloj después de varios procesos la imagen quedó de este modo y posteriormente la convertí a .GIF usando este formato para realizar el databend de todos los frames.

yellow_contrast_14214714_1

Para corromper todas las imágenes usé el editor hexadecimal 0xED y empecé haciendo sustituciones de texto, pero de dos caracteres (cada carácter representa un bit) dando como resultado alrededor de 20-25 caracteres reemplazados, pues si usaba un sólo carácter o un hexadecimal y se reemplazaban más de 500 caracteres el archivo se rompía; fuí sustituyendo caracteres contiguos, bc_ab, bc_da, bc_de, bc_dg, bh_da, bj_df, bg_ek y ca_df hasta tener toda la secuencia.

yellow_contrast_animation

 

En esta página de Tumblr http://glitchgifts.tumblr.compodemos ver una aproximación general al mundo del glitch gif.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s