H3stogram: Histograma de Color 3D Interactivo (ES)

h3stogram post 01 1024x550 H3stogram: Histograma de Color 3D Interactivo (ES)

H3stogram es una pequeña aplicación web para el navegador que representa tridimensionalmente el histograma de color de una imagen y permite interactuar con él. Por un lado pretende ser una prueba de concepto para una herramienta interactiva que ayude a los fotógrafos y otros profesionales en la comprensión de la estructura de color de una imagen. Por otro lado es tambien un experimento lúdico y estético basado en una tecnología muy reciente, WebGL, que trae gráficos tridimensionales e interactivos al navegador web.

Puedes abrir H3stogram si dispones de un navegador que implemente el estándar WebGL. También puedes interactuar con otros experimentos 3D en tu navegador en la página de Three.js y en la de Chrome Experiments.  Aviso:  la compatibilidad de smartphones y tablets con WebGL es todavía limitada. Consulta si tu navegador funciona con WebGL en Can I Use y actualízalo si te hace falta y es posible para tu combinación de dispositivo y navegador. Si te interesa saber más sobre la idea que hay detrás de H3stogram, sigue leyendo.

 Qué es el histograma de color

En los campos de la Fotografía y Procesado de Imagen, un histograma de color es una representación de la distribución estadística de colores de una imagen. Según el artículo Color histogram en Wikipedia:

In image processing and photography, a color histogram is a representation of the distribution of colors in an image. For digital images, a color histogram represents the number of pixels that have colors in each of a fixed list of color ranges, that span the image’s color space, the set of all possible colors.

No voy a entrar en más detalles aquí pero recomiendo hacer una búsqueda de imágenes para “color histogram” en google.

Usando H3stogram

Veamos qué podemos hacer con H3stogram. El funcionamiento básico es como sigue:

  1. Seleccionamos una imagen de la franja inferior. La imagen se cargará en la zona de la izquierda de la página, y también su histograma 3D, en el centro.
  2. Navegamos el histograma en tres dimensiones: podemos circunnavegar el cubo de color, acercarnos y alejarnos a él usando el ratón. En la sección “puntos de vista” (viewpoints) de la columna derecha de controles podemos seleccionar puntos de vista privilegiados y la cámara automáticamente se colocará en ellos.
  3. Interactuamos con los controles de la columna derecha para modificar la visualización (el aspecto geométrico de los elementos que conforman el histograma y su resolución).
h3stogram snapshot 05 1024x524 H3stogram: Histograma de Color 3D Interactivo (ES)
Cómo usar H3stogram

Algunos ejemplos

En la galería de imágenes de H3stogram puedes ver algunos ejemplos con observaciones sobre cada imagen y su estructura de color.

La idea

La idea de trabajar en una visualización tridimensional de la estructura de color de una imagen surgió hace unos años mientras leía el libro “Professional Photoshop” de Dan Margulis, subtitulado como “La guía clásica para la corrección de color”.   En el segundo capítulo el autor presenta una de las herramientas fundamentales usadas para la corrección de color: las curvas.

Una curva de edición de color es una herramienta que forma parte de una aplicación de edición de imágenes (como el comando curva en Gimp, por ejemplo) permite transformar el valor de la luminosidad de cada pixel en otro valor diferente, de acuerdo a lo que indica un “mapa” de conversión. Este mapa no es más que una función que representada gráficamente tiene el aspecto de una línea curva. Dicha función o “mapa” se puede aplicar a los valores de intensidad en una imagen monocroma. En el caso de las imágenes en color, cada canal (rojo, verde, azul) es procesado de forma independiente por una funcion distinta para cada uno. Y es aquí donde los problemas comienzan. Es relativamente fácil ganar una intuición del efecto de una curva en una imagen monocromática y en su histograma. Sin embargo, con la imagen en color no es tan sencillo. Por un lado tenemos tres curvas aplicadas a tres histogramas diferentes, uno para cada canal (rojo, verde, azul). Por otro lado, cada uno de los histogramas de cada canal nos da un resumen confuso de la estructura de color de la imagen: para un canal determinado se recogen valores de todos los puntos de la imagen, y todos los punto de la imagen suelen tener componentes de color de los otros dos canales. En definitiva, el siginificado del histograma de cada canal y el efecto de la correspondiente de cada curva sobre la imagen puede ser bastante confuso.

h3stogram post 03 1024x566 H3stogram: Histograma de Color 3D Interactivo (ES)
Histograma 3D: las regiones de la imagen se corresponden con zonas en el histograma
h3stogram post 03 2D H3stogram: Histograma de Color 3D Interactivo (ES)
Histograma tradicional: ¿cómo conectamos áreas de la imagen con zonas del histograma?

Volviendo al capítulo del libro de Margulis, según profundizaba sobre las ideas que contenía fui construyendo el siguiente mapa mental que me ayudó a entender mejor la esencia de lo que el proceso con curvas significa para la imagen en color.

  • Representamos tridimensionamente la distribución de colores de la imagen, enmarcada en cubo y donde los tres ejes de coordenadas representan los valores de los canales (R,G,B). De esta forma, dos de los vértices del cubo, separados por una diagonal mayor, representan el blanco y el negro; tres de los vértices representan los colores primarios en el espacio RGB (rojo, verde, azul), y los tres vértices restantes representan los colores secundarios (amarillo, cian, magenta).
  • Para cada color, que no es más que una combinación de los valores de los tres canales, hacemos un recuento de las veces que aparece en todos los píxeles de la imagen.
  • Representamos las ocurrencias como puntos de una nube dentro del cubo RGB. La nube será más densa en las regiones correspondientes a colores que más aparecen en la imagen.

Esto es conceptualmente lo que hace H3stogram. Mostrar la distribución de colores de la imagen en relación a su posición dentro del cubo de color RGB. Ahora bien, las operaciones que se pueden realizar con la herramienta Curvas, sobre las que Margulis instruye en su libro, se pueden asociar a las siguientes acciones sobre el cubo de color:

  1. Dilatar elásticamente el histograma tridimensional para que los puntos de máximas luces y sombras se aproximen a los vértices del blanco y el negro. Con esto  se aprovecha al máximo el rango dinámico (contraste global) de colores de la imagen.
  2. Dilatar elásticamente el histograma para que los puntos alejados de la diagonal principal que representa la escala de grises se aproximen a las caras y los vértices coloreados del cubo. Con esto conseguimos acentuar la saturación de la imagen.
  3. Dilatar elásticamente porciones cúbicas dentro del cubo de color (donde hay acumulación de puntos en la nube). Con ello aumentamos el detalle (microcontraste) para las zonas de la imagen que tienen un rango de color determinado. Hay que tener en cuenta que esto produce que otras regiones del cubo de contraigan, perdiendo detalle en ellas.
  4. Trasladar elásticamente porciones cúbicas dentro del cubo de color. Con esto corregimos el valor de ciertos colores de la imagen..

La idea que surgió de este mapa mental fue la posibilidad de desarrollar una herramienta con la que se pudiera hacer esas manipulaciones directamente sobre el histograma representado tridimensionalmente. Mentalmente siempre me he imaginado esas transformaciones como manipulaciones que hago con mis propias manos sobre un cubo de color que es de un material elástico o gelatinoso. Para llevarlo a la práctica habría que pensar en algún sistema de interacción con el ratón, deslizadores y lineas desilzantes en la pantalla u otros métodos interactivos como cámaras o detectores 3D.

La herramienta H3stogram es por el momento sólo una prueba de concepto inicial en la que se representa el histograma de color de forma interactiva pero que invita a idear formas de manipularlo para conseguir transformar la imagen original. Como objectivo menos ambicioso también invita a adquirir una comprensión intuitiva de las transformaciones de color habituales, visualizando sus efectos en el histograma tridimensional.

Otros histogramas tridimensionales

Investigando sobre el estado del arte en este campo (representación tridimensional del histograma de color) he encontrado las siguientes aplicaciones.

3dhistogram

3dhistogram es “una aplicación para producir y modelar un histograma de color tridimensional a partir de una imagen Desarrollada para ayudar a visualizar, entender y hacer mejor uso del color en sus proyectos”.

Permite procesar una imagen que se carga desde nuestro ordenador en el servidor a través del navegador web. Nos da como resultado una imagen bidimensional en forma de nube de puntos de color. No es interactiva.

Color Inspector

ColorInspector de Kai Uwe Barthel, es una aplicación en java que permite:

  • visualizar el histograma de color de una imagen en nuestro ordenador en forma de nube de puntos y histograma de esferas de color,
  • cambiar los parámetros de la visualización y navegar por ella interactivamente,
  • realizar transformaciones de color (curvas, brillo, saturación, contraste, rotación de color) y ver su efecto simultáneamente en la imagen y su histograma tridimensional.

Al ser una aplicación java es necesario descargar y ejecutar un fichero .jar en nuestro ordenador (y tener instalado el entorno de ejecución de java).

También existe una versión reducida (que sólo permite una visualización no interactiva) en forma de extensión para Firefox.

Drawing Color Histograms and Color Clouds

Drawing Color Histograms and Color Clouds es un programa escrito en MatLab por Chaitanya Sai Gaddam para dibujar histogramas y nubes de color.  Es necesario estar registrado en MatLab Central para conseguir el código y además, tener MatLab instalado en tu ordenador. Sin embargo, puedes echar un vistazo a algunas muestras aquí.

Comparación con H3stogram

Tanto 3dhistogram como la herramienta de Chaitanya Sai Gaddam son representaciones bidimensionales no interactivas del histograma tridimensional de color. En cambio, Color Inspector presenta una visualización interactiva tridimensional que puede ser navegada  y además mejora a H3stogram en aspectos como:

  • Permite realizar transformaciones de color (curvas, contraste, saturación, brillo) y ver el resultado inmediatamente tanto en la imagen original como en el histograma.
  • Permite seleccionar con el cursor un punto de la imagen original y señala la situación de su color en el histograma.

H3stogram en cambio presenta la ventaja de integrarse en navegador (siempre que admita WebGL) y no necesita una instalación previa del entorno de ejecución de java o de un plugin en el navegador.

 La tecnología: WebGL y Threejs

H3stogram se basa en el estándar WebGL, tecnología que posibilita los gráficos en 3D en el navegador web. Explicado de una forma sencilla, WebGL permite al navegador hablar directamente con la tarjeta gráfica (GPU) del ordenador en su lingua franca OpenGL Esto permite delegar tareas complejas y costosas de dibujado de formas tridimensionales en la propia tarjeta gráfica, aliviando al procesador principal del ordenador (CPU) y, en definitiva, traduciéndose en una experiencia fluida de gráficos tridimensionales e interactivos.

Para interactuar con las funciones WebGL una vez que el navegador está actualizado y las implementa, hace falta programar en javascript. La programación directa en WebGL suele ser compleja para los programadores web que no venimos del área de la programación de videojuegos y OpenGL, por lo que se están desarrollando herramientas que nos falicilitan esta labor. Threejs es una de estas herramientas, posiblemente la más popular en este momento. Cito el fichero README del repositorio de Threejs en github:

The aim of the project is to create a lightweight 3D library with a very low level of complexity — in other words, for dummies.

Usuarios interesados y próximos pasos

H3stogram puede crecer con más ideas. Al publicar el prototipo inicial, las siguientes ideas se quedan en el tintero (por ahora):

  • hacer click en un punto de la imagen y que se destaque la zona del histograma que corresponde al color de ese píxel (como en la herramienta ColorInspector de Kai Uwe Barthel).
  • Incluir en el panel de control de los parámetros de visualización ciertas transformaciones habituales en el procesado de imagen (contraste, saturación, etc) para procesar la imagen con su histograma simultáneamente y observar los cambios en tiempo real.
  • Posibilidad de cargar una imagen del usuario.
  • Posibilidad usar la webcam como fuente.
  • Mostrar el histograma en el espacio de color LAB.

Como ya he comentado, el objetivo más ambicioso es el de investigar formas de interacción con el histograma para producir cambios en la estructura de color de la imagen.

Si estás interesado en H3stogram como usuario o si te interesa hacer crecer la aplicación o usar el código, no dudes en ponerte en contacto conmigo para intercambiar ideas a través de este blog o de github. El código de H3stogram está publicado en github bajo la licencia MIT que te permite emplearlo de la forma más flexible.

Leave a Reply

%d bloggers like this: