Este artículo describe el proceso iterativo de Amanda Hinton para crear una visualización única de la distribución de colores en una imagen, llamada Spectrimage. El objetivo era ir más allá de una simple representación de colores y mostrar la frecuencia y el rango tonal de cada color presente. El proceso comenzó con el algoritmo de 'Median Cut', una técnica de compresión de imágenes que divide los colores en cubetas para reducir la paleta. Sin embargo, Hinton descubrió que este método priorizaba la igualdad de tamaño de las cubetas sobre la representación precisa de la frecuencia de los colores, lo que resultaba en una visualización inexacta.
Posteriormente, se exploró el uso de un histograma de matiz (Hue Histogram), que ordenaba los colores por matiz y mostraba la frecuencia de cada uno. Aunque esto mejoró el orden y la representación de la frecuencia, la agrupación de píxeles en amplios rangos de matiz (5 grados) resultaba en una pérdida de detalle y una mezcla de tonos similares. Para solucionar esto, se implementó un ordenamiento a nivel de píxel, pero esto introdujo artefactos de 'barcode' debido a las diferencias sutiles en el brillo entre píxeles con matices muy cercanos.
Las iteraciones posteriores se centraron en refinar el ordenamiento, primero por matiz y luego por brillo dentro de cada matiz. Estas técnicas también generaron problemas de discontinuidad y artefactos. Finalmente, Hinton adoptó un enfoque radical: el uso de un lienzo HTML para renderizar la visualización directamente, eliminando la necesidad de elementos DOM y permitiendo un suavizado de los colores.
La solución final, y la más efectiva, fue una visualización bidimensional donde el eje X representa el matiz (en orden ROYGBIV) y el eje Y representa el brillo (desde tonos oscuros en la parte inferior hasta tonos claros en la parte superior). La altura de cada columna es proporcional a la cantidad de píxeles de ese matiz en la imagen. Esta representación crea una forma de onda que comunica la distribución de colores, su frecuencia y su rango tonal. Para imágenes en blanco y negro, el eje se invierte para mostrar la distribución del brillo. El proceso implica convertir la imagen a HSL, agrupar los píxeles por matiz (en segmentos de 2 grados), ordenar cada grupo por brillo y luego renderizar el resultado en un lienzo, promediando los colores de los píxeles para suavizar la visualización.