algorithm - Valor como representación de color

colors rgb

Question

La conversión de un valor a un color es bien conocida, entiendo los siguientes dos enfoques (muy bien descrito en el cambio de los valores de color rgb para representar un valor )

1. Valor como tonos de gris
2. Valor como brillo de un color base (p. Ej., Brillo de azul )

Pero, ¿cuál es el mejor algoritmo cuando quiero usar el rango de color completo ("todos los colores"). Cuando uso "grises" con valores RGB de 8 bits, de hecho tengo una representación de 256 tonos (blanco a negro). Pero si uso todo el rango, podría usar más tonos. Algo como esto También esto sería más fácil de reconocer.

Básicamente, necesito el algoritmo en Javascript, pero supongo que todos los códigos como C #, Java, pseudocódigo también lo harían. La leyenda en la parte inferior muestra la codificación, y estoy buscando el algoritmo para esto.

Entonces, teniendo un rango de valores (por ejemplo, 1-1000), podría representar 1 como blanco y 1000 como negro, pero también podría representar 1 como amarillo y 1000 como azul. Pero, ¿hay un algoritmo estándar para esto? Mirando el ejemplo aquí , se muestra que usan intervalos de color. No solo quiero usar grises o cambiar el brillo, sino usar todos los colores.

Esta es una demostración visual (se requiere Flash). Dados los valores a representados en un esquema de color, mi objetivo es calcular los colores.

Tengo un rango de color lineal, por ejemplo, de 1-30000

- Actualización -

Aquí encontré que aquí hay algo llamado LabSpace:

El espacio de laboratorio es una forma de representar colores donde los puntos que están cerca uno del otro son los que se parecen entre sí a los humanos.

Entonces, lo que necesitaría es un algoritmo para representar los valores lineales en este espacio de laboratorio.

Answer 1

Depende de los propósitos de tus conjuntos de datos.
Por ejemplo, puede asignar un color a cada rango de valores (0-100 - rojo, 100-200 - verde, 200-300 - azul) cambiando el brillo dentro del rango.

Answer 2

Hay dos formas básicas de especificar colores. Una es una lista predefinida de colores (una paleta) y luego su valor de color es un índice en esta lista. Así es como funcionaban los viejos sistemas de color de 8 bits y cómo funcionan las imágenes GIF. Hay listas de colores seguros para la Web, por ejemplo, http://en.wikipedia.org/wiki/Web_colors , que normalmente se ajustan a un valor de 8 bits. A menudo, colores similares son adyacentes, pero a veces no. Una paleta tiene la ventaja de requerir una pequeña cantidad de datos por píxel, pero la desventaja es que está limitado en la cantidad de colores diferentes que pueden estar en la pantalla al mismo tiempo.

La otra forma básica es especificar las coordenadas de un color. Una forma es RGB, con un valor separado para cada color primario. Otro es Tono / Saturación / Luminancia. CMYK (cian, magenta, amarillo y a veces blacK) se utiliza para imprimir. Esto es lo que típicamente se conoce como color verdadero y cuando usa una frase como "todos los colores" parece que está buscando una solución como esta. Para degradados y tal HSL puede ser una opción perfecta para usted. Por ejemplo, un gradiente de un color a gris simplemente reduce el valor de saturación. Si todo lo que desea son colores "puros", entonces corrija los valores de saturación y luminancia y cambie el tono. Casi todos los sistemas de dibujo requieren RGB, pero la conversión de HSL a RGB es sencilla. http://en.wikipedia.org/wiki/HSL_and_HSV

Si no puede usar los 24 bits completos por color (8 bits por color, el color de 32 bits es el mismo pero agrega un canal de transparencia), puede usar un color de 15 o 16 bits. Es lo mismo, pero en lugar de 8 bits por color obtienes 5 cada uno (15 bits) o 5-6-5 (16 bits, el verde recibe la parte extra porque nuestros ojos son más sensibles a los tonos de verde). Eso encaja en un entero corto.

Answer 3

Horst,

El ejemplo que diste no crea gradientes. En su lugar, usan N colores preestablecidos de una matriz y eligen el siguiente color a medida que Umbr señala. Algo como esto:

a = { "#ffffff", "#ff00ff", "#ff0000", "#888888", ... };
c = a[pos / 1000];

fueron pos su valor de 1 a 30,000 yc es el color que desea usar. (Necesitaría definir mejor el índice que pos / 1000 para que esto funcione bien en todas las situaciones).

Si desea un efecto de degradado, puede usar las matemáticas simples que se muestran en la otra respuesta que señaló, aunque si desea hacer eso con cualquier número de puntos, tiene que hacerse con triángulos. Tendrá mucho trabajo para determinar los triángulos y definir correctamente cada punto.

En JavaScript, será perro lento. (con OpenGL sería instantáneo y ni siquiera tendría que calcular los gradientes, y eso sería "más rápido que en tiempo real").

Answer 4

Lo que necesitas es una función de transferencia.
dado un número flotante, una función de transferencia puede generar un color.

mira esto:

http://http.developer.nvidia.com/GPUGems/gpugems_ch39.html

y esto:

http://graphicsrunner.blogspot.com/2009/01/volume-rendering-102-transfer-functions.html

el segundo artículo dice que la isovaloración está entre [0,255]. Pero no tiene por qué estar en ese rango.

Normalmente, escalamos cualquier número flotante al rango [0,1] y aplicamos la función de transferencia para obtener el valor del color.