Tuesday, January 04, 2011

Reflexiones sobre una mesa de cristal


Un efecto gráfico interesante, que puede verse en muchos sitios web, es el de una imagen reflejada como si estuviese sobre una mesa de cristal. Creo que Apple fue quien empezó con este tipo de diseño en su página web y por lo bonito fue copiado inmediatamente. Por ejemplo, los iconos del iPod Touch/iPad y iPhone están diseñados de esta manera. Sin duda los diseñadores gráficos de Apple hacen las cosas con sobriedad y buen  gusto.


Pues bien, se me ocurrió pensar en cómo hacer el efecto de reflexión sobre una mesa de cristal. Aparentemente no puede ser muy difícil. Antes de sentarme a programar nada llegué a la conclusión que se necesita una imagen fuente, es decir, la imagen que voy a procesar. Una segunda imagen, la cual es la imagen original invertida (no rotada, porque entonces la reflexión no se cumple). Y después, un proceso que genere el efecto sobre la segunda imagen, la cual se pegará bajo la primera.

Pero ¿cuál es ese efecto? en un principio pensé que se trataba del efecto brillo. Éste es simple, se le suma un valor a cada color de cada punto de la imagen (pixel) y el resultado es una imagen más brillante o menos brillante, de acuerdo el valor que sumemos (o restemos). Hice algunas pruebas pero no me convenció. Quizás no era ése el filtro.

Analizando con detalle, terminé hallando que se trata de cambiar la transparencia de la imagen a procesar (la imagen dos, la invertida de la original). Pero curiosamente,hay que darle un efecto de degradado, porque el efecto de reflexión sobre un cristal se pierde. Así, la reflexión debe ser gradual, el cambio de transparencia no es constante, sino que cada vez es menor.

Una vez entendido esto, puse manos a la obra. De pronto hallé que era realmente latoso hacer todos los cálculos de la reflexión y entonces supuse que ya había llegado alguien a compartir esta parte del código. Y sí, hallé que un buen programador, cuyo sitio es éste (IrSoft), tuvo la amabilidad de compartir esta parte del proceso, la cual francamente es latosa.

Con esto a la mano el programa salió en una hora más aproximadamente. El efecto final es interesante y muy agradable a la vista.


El programa tiene limitaciones. Imágenes muy grandes no pueden ser procesadas, pero para fines prácticos, el programa es útil. Igualmente, el software no salva aún las imágenes creadas, pero ya estoy trabajando en esto. Mientras tanto, puede copiarse el resultado final con cualquier software que capture parte de la pantalla.

A quien le interese el programa, escríbame a morsa@la-morsa.com y se los mandaré vía correo electrónico.

2 comments:

:tadeo.X: said...

excelente reflexión sobre la reflexión :)

feliz año
T

Francisco said...

No entiendo la imagen del ajedrez.
Parece tener dos reflexiones. Debajo de cada pieza se ve una imagen que parece lo que uno esperaria de una mesa de cristal, con la base de esa imagen "pegada" a la base del objeto fuente. Hasta aqui no tengo problema.
Pero tambien se ve otra reflexion que mas bien parece como sobre un espejo: (las bases de las imagenes reflejadas estan "despegadas" de los objetos fuente). Esta no la entiendo. Creo que se veria mejor sin esta segunda imagen. Se ve como si hubiera un espejo colocado justo adelantito del primer peon.