Generalmente cuando reviso webs y blogs termino con una pieza que me digo a mi mismo: "y este man como hizo esto?" Bueno con esta seccion del blog intento responderle esa pregunta a los usuarios de mi web, ojalá les sirva de alguna manera, intentare ser lo menos nerd posible para que así no sepas nada de photoshop, illustrator, maya, etc, al menos entiendas como fue hecho.

The Making of : zero-sum

La illustracion (y splash screen de zero-sum ) es en resumen el resultado de empujar lineas con otra imagen. El como empezó todo esto requiere un viaje al pasado, cuando vi este video hace un par de años.

NIN - Only

Cuando vi el video me pregunte y este man como cuernos hizo eso? le pregunte a mi buen amigo Andrés y me dijo: no se chorch, "melscript" seguramente (melscript es el lenguaje de programacion del MAYA) pero ni idea como lo hizo. Bueno así quedo durante algún tiempo un legítimo ni idea. Pasó el tiempo y me había olvidado totalmente del tema aun que en mi mente se quedo el algún día quisiera hacer algo así. Un día vino el "enano" vocalista de "vedette" y me dijo loco acola con los visuales de mi concierto. A lo que yo después de pensarlo un rato accedí ya que había estado quejando de la mediocridad de los vjs en ecuador e intentando empezar un proyecto como vj yo mismo. (me pareció una perfecta oportunidad por que haga lo que haga, el "enano" no se iba a quejar). Realice algunas visualizaciones siempre con la idea que reaccionen en tiempo real a la música del concierto, (y otras amagaban que lo hacían) hasta que me topé con "Final de agujas" una canción muy obscura y distorsionada, por alguna razón eso me recordó al video de "only" y el concierto LITS de NIN y le propuse al enano llevar las visualizaciones de su concierto al siguiente nivel.

La idea era simple proyectar la cara del "enano" en la pantalla del concierto y hechar filtros y filtros hasta que se vea como lineas distorsionadas. y que la iluminación de la imagen la de la música. Lo mas lejos que llegue fue a esto

Era mejor que la mayoria de visualizaciones de conciertos en el ecuador so, estaba feliz... Obviamente como buen ecuatoriano estaba haciendo eso a altas horas de la mañana so termine usando mi vieja filmadora con nigthshot, y la respuesta vino a mi como arte de magia.

El nigthshot funciona enviando luz infraroja desde la cámara y leyendo esa señal de luz cambiando el límite del rango visible en la cámara (pueden googolearlo, deley encuentran una mejor explicación) lo que con extremas situaciones de poca luz genera una imagen que de cierta manera recuerda a una versión verde de un z-chanell( un canal z es la información de profundidad que genera un programa de 3d cuando hace "render") siendo lo que esta mas adelante mas claro y lo mas obscuro mas lejano. Al tener información de "profundidad" el único lío era distorsionar las líneas con esa información.

La solución fue mucho mas simple de lo que uno esperaba y a continuación expongo paso a paso como se creó la imagen/visualisacion en tiempo real para el concierto.

Nota: Las computadoras mac vienen con una pequeña maravilla que se llama "quartz composer" que es un compositor de imágenes en tiempo real con arquitectura que te permite crear miniprogramas llamados "plug-ins" y asi expander su capacidad y es el programa que se utilizó para crear esto

1. Primero importo la imagen al Quartz Composer usando el firewire de la cámara
2. Transformo la imagen a blanco y negro
3. Un poco de blur para eliminar detalles innecesarios
4. Cambiamos los niveles para que haya mas contraste
5. Aquí esta la magia, un poco de matemáticas y java para transformar la imagen en blanco y negro a un "normal map" (un normal map guarda información tridimensional en los canales RGB de una imagen así: X para Rojo, Y para Verde y Z para azul, es muy usado en videojuegos para generar mas detalle del que realmente hay) pude usar la imagen en BYN como un "bump map" (que representa profundidad, ósea el canal z, pero aparentemente al tener información tridimensional los resultados mejoran).
6. Utilizo esa información para empujar a la imagen original en sentido de profundidad.
7. Cambio la manera de como se ve de imagen completa a "wireframe" ósea lineas (es un check en el quartz composer)
8. Finalmente Cambio el color para resaltar la forma tridimensional y que vaya con el resto de visuales y la canción.
9. Lo último fue conectar el input de audio del micrófono al paso 4, asi mientras mas alto el volumen mas clara es la imagen.

Aqui hay una foto de la situacion en prueba de campo durante el concierto de vedette

La ilustración de zero-sum, no es mas que un pic de una versión ligeramente modificada de la composición de quartz. usando una imagen (sacada de un render z de maya) envés de video




Jorge2k: Mechanical Human Prototype