lunes, 30 de julio de 2007

Tutorial sobre el efecto Droste según Escher

En este tutorial voy a explicar cómo hacer las imágenes de la entrada anterior. Necesitamos una forma de aplicar las matemáticas que hay detrás del efecto a cualquier imagen. Esto se puede hacer "a mano", escribiendo un programa que lo haga, o aprovechar las herramientas que otra gente ha desarrollado. Estas herramientas aparecieron en el foro del grupo de Flickr Escher's Droste Print Gallery. El primero en compartir su código fue breic y después ha sido desarrollado por Josh Sommers (Pisco Bandito), que de momento sigue publicando versiones del mismo en el foro de debate del grupo de Flickr.

Para utilizar el código en cuestión hay que instalar dos programas, afortunadamente los dos son software libre y están disponibles para Windows (a partir del 98), Linux y Mac OSX, aunque no lo he probado en esta última plataforma. El primer programa es Gimp (inglés). Para los que no lo conozcan, Gimp es un programa de retoque fotográfico con el que esencialmente se puede hacer lo mismo que con Photoshop. Hay una página de usuarios en español, desde donde se puede descargar. La instalación es bastante sencilla, en Windows se baja un ejecutable y se siguen las instrucciones y en Linux está incluido en la mayoría de las distribuciones, si no está ya instalado, desde el disco del sistema o mediante el sistema de actualización en línea de la distribución se puede encontrar fácilmente.

El siguiente programa que necesitaremos es MathMap, un complemento (plug-in) para Gimp, que permite realizar manipulaciones matemáticas de las imágenes. Para la versión del código que voy a utilizar necesitamos versiones iguales o posteriores a 1.2.o en Linux y 1.1.3 en Windows. En el primer caso están disponibles los paquetes RPM y deb, que se instalan por los métodos habituales. En el caso de Windows se instala de forma manual. Una vez bajado el paquete mathmap-1.1.3-win32.zip, se descomprime y dentro encontramos otros dos zip. El primero, plug-ins.zip, hay que descomprimirlo en el directorio plug-ins de Gimp, que se puede encontrar en: C:/Documents and Settings/[NOMBRE DE USUARIO]/.gimp-2.2/plug-ins. El otro paquete zip (mathmap.zip) contiene el directorio MathMap que hay que extraer en C:/Documents and Settings/[NOMBRE DE USUARIO]/.gimp-2.2/.

Una vez que tenemos los programas instalados ya podemos pasar a jugar con ellos. Empezaré con el efecto en una flor, por ejemplo ésta:
El primer paso es aplicar una máscara a la flor y eliminar todo lo que hay alrededor de la flor, dejándolo como transparente.

Esto se puede hacer tanto con Gimp como con Photoshop o el programa que más os guste. Aquí aparece como blanco porque es una imagen jpg, pero para realizar el efecto se pueden descargar las imágenes en formato tif en este paquete zip. Una vez que tenemos esto abrimos el MathMap dentro de Gimp yendo a Filtros -> Genérico -> MathMap -> MathMap. En la pestaña Expression quitamos lo que haya y pegamos este código. Obtendremos algo como esto:
Si ahora le damos a Preview obtenemos lo siguiente:
Todavía no es lo que queremos, pero vemos que el efecto funciona. En caso de que des a Preview y obtengas una pantalla negra o algo raro lo más probable es que haya un problema con el idioma. El problema está en cosas como el separador de decimales, que en español (y otros idiomas) es la coma, mientras que en inglés es el punto. El código está hecho interpretando que con el punto como separador de decimales. Para arreglar eso debemos cambiar estas características del idioma. En el caso de Windows debemos ir a Panel de Control -> Configuración regional y de idioma -> Opciones regionales -> Personalizar. Una vez allí Cambiamos el símbolo decimal de coma (,) a punto (.); el símbolo de separación de miles de punto (.) a espacio ( ) y el separador de listas de punto y coma (;) a coma (,). Damos a aceptar y reiniciamos el Gimp. Para el linux podemos iniciar el Gimp desde un Terminal, exportando primero la variable LC_ALL=C. Para ello en bash usamos
export LC_ALL=C.
Después iniciamos el Gimp en el mismo terminal con
gimp&.

Si no hay ningún problema ahora obtendremos la imagen anterior. Después nos pasamos por Settings y desactivamos la casilla Auto Preview. Si no lo hacemos cada vez que hagamos cualquier modificación se actualizará la imagen de la izquierda automáticamente. Dependiendo del tamaño de la imagen esto es puede tardar mucho, especialmente en Windows, donde el MathMap es muuucho más lento que en Linux.

Ahora vamos a la pestaña User Values y ya sólo queda jugar con las distintas opciones para obtener la imagen deseada. En este caso podemos usar lo siguiente (pongo sólo lo que hay que cambiar):
RadioInterior: 47
Brazos: 0
DesplX: -8
DesplCentroY: -7
TransparenciaExterna: activada

Dando a Aceptar se pondrá a funcionar el MathMap. Después de un rato (mucho más en Windows) obtendremos la siguiente imagen:

Para no tener que copiar el archivo cada vez, se puede guardar en el MathMap con la opción Save As. A partir de entonces podremos acceder directamente al código del efecto Droste con Filtros -> Genérico -> MathMap -> [NOMBRE CON QUE LO HEMOS GUARDADO].

Otro ejemplo es la imagen con la que empecé la entrada anterior. Para ese ejemplo se puede usar la imagen tutorial_ejemplo1.tif que está en el paquete zip anterior y usar los siguientes valores:
RadioInterior: 24
Zoom: 6
Rotar: 41
DesplY: -25
DesplCentroX: -8
DesplCentroY: -50
NivelInicio: 2

Como vemos hay muchas más opciones que se pueden cambiar. Jugando con ellas se pueden obtener muchos de los efectos que aparecen en el grupo de Flickr, especialmente las de Pisco Bandito, autor del código. Al principio del mismo podemos encontrar una pequeña explicación de las opciones. Pasando por el foro de debate del mismo grupo se pueden obtener versiones actualizadas del código.

Gracias a Josh Sommers por su trabajo y por permitirme hacer este tutorial. Él realizó uno en inglés que se puede encontrar aquí.

14 comentarios:

Anónimo dijo...

Sobre el error "parse" que se genera cuando no tienes el gimp en ingles, hice lo que escribiste y no tube problema con tu codigo traducido, pero cuando trate de usar el código original me volvia a dar el mismo error, pero lo pude solucionar abriendo el gimp en el terminal asi:

LANG=en gimp
(en linux, claro)

si estas en windows puedes abrir el NotePad y escribir:

set lang=en
cd c:\Program Files\GIMP2.0\bin
GIMP-2.2.exe


guardarlo como gimp-en.bat y acceder a el cuando quieras entrar en ingles.

Si estan en mac tendran que acceder a las preferencias del sistema->internacional->lenguaje y cambiar a ingles

lo lei de aqui http://docs.gimp.org/en/gimp-fire-up.html#gimp-concepts-running-language (hay otros metodos en el url)

asi no trendrán problema al tratar de utilizar futuras versiones del código original, espero que a alguien le sirva!

Roberto dijo...

Gracias por el comentario, a veces estas cosas dependen un poco de la configuración concreta. Igual yo hice algo más que no recuerdo. Espero que entre lo que cuentas tú y lo que puse yo la gente interesada pueda usar el código, que es lo que importa.

AOF dijo...

Otra manera de soslayar el error en Windows es configurar el teclado con el idioma Español pero de México, el problema básicamente reside en que los idiomas españoles para teclado (salvo el de mexico) sustituyen el punto por la coma en el separador de decimales y el Math Map necesita los decimales sparados por puntos en su interpretación matemática.
Excelente tutorial, yo ensayé uno hace un tiempo en mi blog pero este es mucho mejor.
Saludos

Roberto dijo...

Gracias Maguila, lo de poner el Español de México parece bastante más fácil. Saludos.

Popewan dijo...

Yo estoy intentadolo con los de la camara de fotos, pero creo que tienen que tener una relacion el ancho y alto de la imagen con el del recorte, que es la parte que no entiendo porque soy alergico a las matematicas, si alguien me puede aclarar este aspecto estaria muy agradecido.

Roberto dijo...

Pope, si tiene la misma proporción, es más fácil de ajustar, pero si no la tiene también se puede hacer. Tienes que jugar con todos los parámetros que hay: los radios, los desplazamientos, el zoom... Saludos.

Unknown dijo...

Saludos señores.
Excelente tutorial felicidades.
Mi caso es que me sale un error, a ver si ustedes saber porque?.
Rogaria se explicaran sin muchas palabras tecnicas, pues solo soy un aficionado novato.

Gracias por vuestro tiempo.

http://img207.imageshack.us/img207/5688/errorpk7.jpg

Anónimo dijo...

Estoy investigando resultados pero tengo la siguiente duda ¿la pregunta es si sabes como hacer animaciones y poder hacer videos?

alex

Roberto dijo...

Alex, he visto vídeos con este efecto, pero no sé cómo se hacen.

Saludos.

Diseño Web dijo...

Muy buen tutorial. Nos fue de ayuda justo para un trabajo nuestro.

Diseño Web dijo...

Alguien sabe de otro tutorial con este efecto?....porque no me salio siguiendo los pasos....debe ser porque no se usar bien la herramienta entonces necesitaria un tutorial más fácil.

Muchas gracias!!

Anónimo dijo...

El código que hay que pegar en la pestaña Expression ha desaparecido del enlace facilitado por el autor del artículo.

Javier S. dijo...

El link para el código está roto!!!!! donde lo podemos ver???? GRACIAS

Anónimo dijo...

Puedes volver a poner el link con el código, esta roto.
Excelente tutorial, gracias.