R&D LAB Diseño computacional Entregado Instrumento de imagen

Tessera-Mosaic

Entra una imagen, sale una lámina para pintar

Cualquier imagen se descompone en zonas planas de color, cada zona recibe un número y sale una lámina vectorial imprimible con leyenda, sin que la imagen salga de la pestaña.

  • 96colores como máximo, libre desde 12
  • 12etapas en la cadena
  • 0,8 stiempo de cálculo más largo de esta página
  • 0peticiones de red
Una lámina con zonas numeradas y una leyenda de muestras, números, nombres y valores hex

La lámina imprimible, aquí sobre la imagen de muestra que la aplicación dibuja al arrancar sin archivo alguno: 46 zonas, 25 colores. Contornos de línea fina, un numeral en cada zona, y debajo la leyenda con muestra, número, nombre de color más cercano, valor hex y porcentaje de superficie.

Por qué se publica

El paso de una imagen a algo que alguien sostiene de verdad no es un filtro: es una cadena de decisiones con restricciones: segmentar, fusionar, simplificar, etiquetar. Tessera-Mosaic es la prueba de que construimos esa cadena y la comprobamos contra sus propias restricciones, en lugar de mostrar una imagen al final y confiar.

Una lámina para pintar por números parece un filtro y no lo es. El número en una zona presupone que la zona es lo bastante grande para pintarse, que no es tan fina que no quepa un pincel, que tiene un lugar donde el numeral cabe entero y que el color contiguo se distingue de sus vecinos. Tessera-Mosaic es la cadena de pasos que satisface esas cuatro condiciones a la vez, y tres vistas en las que usted puede juzgar el resultado antes de comprar pintura.

Una fotografía no tiene zonas

Tiene degradados, ruido y bordes que no empiezan en ningún punto exacto. Una lámina para pintar necesita lo contrario: zonas cerradas, cada una lo bastante grande para un pincel, cada una de un color que se pueda comprar y volver a encontrar. Entre ambas cosas no hay un ajuste, hay una cadena.

Cuatro condiciones tienen que cumplirse a la vez o la lámina no sirve. Una zona necesita superficie suficiente. No puede ser tan estrecha que no quepa un pincel. Necesita un lugar donde el numeral quepa entero. Y su color debe seguir siendo distinguible de sus vecinos. Cada condición por separado es fácil, juntas son el problema.

La lámina de al lado está calculada a partir de una fotografía de paisaje de dominio público, 914 x 1280 píxeles, reducida a 714 x 1000 píxeles de trabajo. Salieron 239 zonas en 24 colores, 10,9 m de contorno, 0,8 s de cálculo. El pie de página nombra cada uno de esos números antes de que nadie imprima.

Una lámina calculada a partir de una fotografía de paisaje, con 239 zonas y 24 colores
239 zonas, 24 colores, par más cercano a 5,9 dE. La leyenda de debajo lleva cada color con número, nombre y valor hex.

Toda la cadena corre en un worker

Doce etapas, leídas en seis pasos

  1. 01 A un espacio donde la distancia significa algo El sRGB pasa a CIELAB. Solo allí una distancia pequeña entre dos colores significa también que un ojo apenas los separa, y solo allí el aviso de paleta es un número real y no una sensación.
  2. 02 Fuera el ruido, quedan los bordes Un filtro bilateral separable de radio 0 a 4 suaviza superficies y deja los bordes en pie, para que el paso siguiente no ascienda el grano a color propio.
  3. 03 Calcular la paleta k-medias ponderado en Lab, siembra k-means++, 32 iteraciones de Lloyd y dos semillas ancladas en los percentiles 1 y 99 de luminosidad para que luz y sombra no se promedien. La asignación es exacta y sin difuminado: un difuminado aquí no sería un efecto, sería una zona imposible de pintar.
  4. 04 Los píxeles pasan a ser zonas Un filtro de mayoría de tres por tres elimina el moteado, y luego se etiquetan las componentes 4-conexas. Desde aquí la cadena ya no trabaja con colores sino con superficies.
  5. 05 Fusionar lo demasiado pequeño o fino Union-find hasta el punto fijo, con la carta de distancias recalculada entre rondas. Demasiado fino es la condición que casi todas las herramientas pasan por alto: una banda larga y estrecha supera cualquier prueba de área y aun así no admite pincel.
  6. 06 Borde, contorno, numeral Los bordes se construyen como aristas y cadenas, cada cadena se suaviza una vez (Douglas-Peucker, Chaikin, Douglas-Peucker), se ensamblan los contornos, se renumeran los colores por superficie pintada y solo entonces se colocan los numerales.

La cadena construye un mosaico

Grabación de pantalla, unos quince segundos: de la silueta al mosaico terminado de una obra de dominio público, con los contadores de teselas y paleta en marcha. Sin sonido.

La única decisión

Un número en coma flotante decidía si una imagen era pintable

Tres de los cinco niveles de paleta no entregaron durante mucho tiempo lo que decía su nombre. Rich 40, Deep 56 y Full 72 devolvían un puñado de zonas y una fracción de los colores pedidos, y tanto peor cuantos más colores se pedían. La misma lámina que daba 24 colores y 574 zonas en Medium volvía en Deep con 8 colores y 9 zonas.

La causa cabía en una línea de la fusión. El array que guarda el grosor de cada zona es un Float32Array, el radio mínimo con el que se compara es un double. Cuando una zona absorbía a una vecina, el grosor de la unión era desconocido, así que el código escribía en él el radio mínimo, como afirmación: esta zona ya cuenta como pintable. Un double guardado en un Float32Array se redondea, y cerca de la mitad de los valores redondea hacia abajo.

Si redondeaba hacia abajo, la unión seguía siendo demasiado fina según su propia prueba. Así que absorbía otra vez, y otra, hasta que del cuadro quedaban unas pocas decenas de manchas. Hacia dónde redondea depende del valor exacto del radio mínimo, y ese valor se deriva del tamaño de paleta y del formato de papel, de modo que cambia con cada combinación. El valor de Medium redondeaba hacia arriba y funcionaba. Rich, Deep y Full compartían un valor que redondeaba hacia abajo.

La prueba era incómodamente clara: un cambio de cuatro millonésimas en el radio mínimo hacía saltar la misma lámina entre 574 y 79 zonas, y comparar el valor con su propio redondeo Float32 predecía la rama obtenida en doce de doce muestras.

La decisión fue no reparar la comparación sino eliminarla. La afirmación vive hoy como un indicador propio junto a la zona, el array de grosor conserva el máximo honesto, y una zona ya fusionada se salta la prueba de finura. Ningún número en coma flotante lo decide ya. Desde entonces cada nivel entrega su paleta exacta sin un solo reintento: Rich 40 con 633 zonas, Deep 56 con 618, Full 72 con 874. A cambio una lámina de esa imagen tarda de 1,0 a 2,2 s en lugar de 0,6 a 1,0 s, porque sobreviven muchas más zonas.

Un número puesto como afirmación se releía como una medición.

Lo que 24 colores hacen de una fotografía

La versión posterizada de la misma fotografía de paisaje, hecha de zonas planas de color
La misma descomposición mostrada como imagen y no como lámina. Un clic en una fila de la leyenda aísla ese color en toda la imagen.

Esta vista existe para una sola pregunta: si la paleta sirve, antes de comprarla. Son las mismas 239 zonas y 24 colores que la lámina de más arriba, solo que sin numerales y sin líneas finas.

Cada entrada de paleta conoce su distancia a la más próxima. Ese único número mueve la lectura bajo el deslizador, el reintento y la negativa cuando una imagen no soporta los colores pedidos. Aquí hay 5,9 dE entre el par más cercano, y la misma fotografía soporta también los 72 colores, entonces con 3,7 dE. Un gráfico vectorial plano, en cambio, se satura sobre los 50 a 60 colores y lo dice.

Lo que entra, lo que sale

La fotografía

  • 914 x 1280 píxeles, reducidos a 714 x 1000 para el cálculo.
  • Millones de valores de color, ninguno con nombre.
  • Degradados sin borde: dónde acaba el follaje es cuestión de umbral.
  • Ningún detalle mínimo. Una rama puede medir un píxel de ancho.
  • Nada en ella dice cuánto se tardaría en pintarla.

La lámina

  • 239 zonas cerradas, exactamente un numeral en cada una.
  • 24 colores, cada uno con muestra, nombre más próximo, valor hex y porcentaje de superficie.
  • Cada zona de al menos 2,4 mm de ancho en A4, o ha sido fusionada.
  • 10,9 m de contorno, 0,8 s de cálculo, unos 32 minutos estimados a mano.
  • Una página A4 en vectorial, sin una sola referencia externa.

El mismo encuadre, dos paletas

Menos colores no significa menos zonas

La misma lámina con solo quince colores y 273 zonas

15 colores273 zonas, par más cercano a 7,9 dE, unos 36 minutos estimados a mano. Son más zonas que con 24 colores, no menos: una paleta gruesa deshilacha la frontera entre follaje y cielo en vez de simplificarla.

Las otras dos vistas

Rellenado color por color, uno de cinco órdenes: color por color, fondo primero, de oscuro a claro, por número o disperso. La pincelada crece hacia fuera desde el numeral. Retroceder repinta idéntico píxel a píxel a reproducir hacia delante, y eso no es un detalle: una línea de tiempo que muestra imágenes distintas hacia delante y hacia atrás es una animación que se hace pasar por un estado.
La vista previa con la imagen de muestra posterizada, un paisaje de zonas planas
La vista previa sobre la muestra procedural con la que arranca la aplicación sin archivo alguno: 42 zonas, 24 colores, par más cercano a 6,0 dE.
La misma lámina a medio pintar, con la línea de tiempo visible
La misma lámina en el segundo 9,5 de 45,0, ahora en el número 5. Al final no queda blanco, y eso se mide en vez de afirmarse.

Dónde encaja

  • Todo lo que deba traducir una imagen en algo fabricable: corte, aplique, taracea, azulejo, vinilo.
  • Productos en los que un cliente aporta su propia fotografía y espera un resultado físico realmente factible.
  • Cualquier problema cuya restricción sea un tamaño mínimo y una anchura mínima, y no solo un número de colores.
  • Herramientas que por protección de datos no pueden subir nada y aun así deben funcionar en un navegador.

Créditos: cada captura muestra nuestra propia aplicación. Cinco de ellas muestran un resultado calculado a partir de una fotografía de dominio público: Limestone quarry landscape de Rosendahl, vía Wikimedia Commons. El resto usa la imagen de muestra dibujada por la propia aplicación.

Por qué se publica

Lo que esto significa para su proyecto

Más del laboratorio

¿Necesita convertir una imagen en algo fabricable, con restricciones reales? Ese es nuestro tipo de problema.

Contactar

Grace Hopper

“La frase más dañina del idioma es: siempre se ha hecho así.”