Visualizacion avanzada: color y bloom
Haciendo visible la belleza matematica invisible
El arte de visualizar el caos
Un atractor extrano es un objeto matematico de extraordinaria complejidad geometrica. Vive en un espacio de fases multidimensional, tiene dimension fractal no entera, y contiene una cantidad infinita de orbitas. Representarlo en una pantalla bidimensional es un acto de traduccion que requiere decisiones deliberadas: que informacion codificamos en el color, en el brillo, en la transparencia.
La visualizacion no es solo estetica. Cada eleccion de mapeo visual revela diferentes propiedades del sistema. Colorear por velocidad muestra donde la dinamica es rapida o lenta. Colorear por tiempo muestra el orden de la trayectoria. Desvanecer por edad muestra la estructura instantanea del atractor. Cada modo de color es una pregunta diferente que le hacemos al sistema, y el sistema responde con una imagen diferente.
En esta leccion exploraremos las tecnicas de visualizacion que transforman datos numericos en arte matematico. No se trata de decorar: se trata de codificar informacion de manera que el sistema visual humano — el procesador de patrones mas potente que conocemos — pueda extraer estructura de la complejidad.
Mapeo de color por velocidad
En cada punto de la trayectoria del atractor, podemos calcular la velocidad instantanea como la magnitud del vector de derivadas:
Para el sistema de Lorenz, \(\dot{x} = \sigma(y-x)\), \(\dot{y} = x(\rho-z)-y\), \(\dot{z} = xy - \beta z\). La velocidad varia enormemente a lo largo del atractor: es alta cuando la trayectoria transita entre las dos alas (el "puente" central) y baja cuando orbita lentamente alrededor de un punto de equilibrio.
El mapeo clasico es una rampa termica: azul para velocidades bajas (frio, lento), pasando por verde y amarillo para velocidades medias, hasta blanco incandescente para las velocidades maximas. Este esquema aprovecha la intuicion humana sobre temperatura y energia: los puntos "calientes" del atractor son aquellos donde la dinamica es mas intensa.
¿Que revela este modo? Muestra la distribucion de energia cinetica sobre el atractor. Las regiones de baja velocidad son las que la trayectoria visita mas frecuentemente (pasa mas tiempo alli), mientras que las regiones de alta velocidad se cruzan rapidamente. El color por velocidad convierte el atractor en un mapa de intensidad dinamica.
Mapeo de color por tiempo
Otro mapeo poderoso es asignar color segun el momento temporal en que se genera cada punto. Usamos un gradiente de arcoiris que recorre todo el espectro visible: los primeros puntos son rojos, luego naranjas, amarillos, verdes, azules, y los mas recientes son violetas.
Este modo revela el orden de la trayectoria: podemos seguir visualmente como la orbita navega por el atractor. En el Lorenz, vemos como la trayectoria alterna entre las dos alas, creando bandas de color que se entrelazan. Las transiciones entre alas producen mezclas de colores, mientras que las vueltas estables dentro de un ala muestran gradientes suaves.
El color temporal es especialmente util para detectar casi-periodicidad: si la trayectoria pasa por la misma region en momentos diferentes, veremos colores distintos superpuestos. La cantidad de colores diferentes en una region nos dice cuantas veces la trayectoria ha visitado esa zona del espacio de fases.
Desvanecimiento por edad
En lugar de mostrar toda la historia de la trayectoria con igual intensidad, podemos hacer que los puntos mas antiguos se desvanezcan progresivamente. Si tenemos \(N\) puntos en la trayectoria y el i-esimo punto tiene indice \(i\) (de 0 a \(N-1\)), su opacidad se calcula como:
El exponente cuadratico hace que el desvanecimiento sea gradual al principio pero rapido al final: la mayor parte de la cola vieja es muy tenue, mientras que la punta reciente brilla con intensidad completa. El termino \(0.05\) asegura que incluso los puntos mas antiguos no desaparecen completamente, preservando la "huella" del atractor.
¿Por que usar desvanecimiento cuadratico en lugar de lineal? Porque el sistema visual humano es logaritmico: percibimos la diferencia entre 10% y 20% de brillo mucho mas que entre 80% y 90%. El desvanecimiento cuadratico aprovecha esta propiedad para crear una sensacion suave de profundidad temporal, como la cola luminosa de un cometa.
Post-procesamiento: bloom
El efecto bloom (florecimiento) simula como las fuentes de luz intensa "sangran" en los pixeles circundantes en una camara real o en el ojo humano. Cuando un punto del atractor es muy brillante, su luz se difunde creando un halo suave a su alrededor.
En Three.js, el bloom se implementa con el UnrealBloomPass, un shader de post-procesamiento que: (1) extrae los pixeles mas brillantes de la imagen, (2) los difumina con un filtro gaussiano a multiples escalas, y (3) los suma de vuelta a la imagen original. El resultado es un resplandor etéreo que da a los atractores una cualidad casi organica.
Los parametros clave del bloom son: strength (intensidad del resplandor), radius (extension espacial del halo), y threshold (brillo minimo para activar el bloom). Un threshold bajo hace que todo brille; uno alto reserva el bloom para los puntos mas intensos, creando un contraste dramatico.
Tone mapping
Cuando combinamos multiples efectos de iluminacion, los valores de color pueden exceder el rango [0,1] que un monitor puede mostrar. El tone mapping comprime el rango dinamico alto (HDR) al rango estandar (LDR) de forma perceptualmente agradable.
El operador de Reinhard es uno de los mas simples y efectivos: mapea un valor de luminancia \(L\) a \(L/(1+L)\). Esto preserva las sombras (valores bajos apenas cambian) pero comprime los highlights (valores altos se saturan suavemente hacia 1). El resultado es una imagen que "respira", con un rango tonal amplio pero sin regiones quemadas.
En Three.js, el tone mapping se configura en el renderer:
renderer.toneMapping = THREE.ReinhardToneMapping.
Combinado con bloom, produce visualizaciones donde los puntos de alta velocidad
brillan con intensidad contenida, las zonas lentas tienen un resplandor sutil, y
el fondo negro proporciona contraste maximo.
Idea clave
La visualizacion no es solo estetica: revela estructura matematica invisible. Cada eleccion de color, opacidad y post-procesamiento es una forma de hacer una pregunta al sistema. El arte de la visualizacion cientifica consiste en elegir las preguntas correctas.
Modos de color y su significado
| Modo de color | Que revela | Cuando usar |
|---|---|---|
| Velocidad | Distribucion de energia cinetica sobre el atractor | Identificar regiones de transicion rapida vs. estancamiento |
| Tiempo | Orden cronologico de la trayectoria | Seguir el recorrido de la orbita, detectar patrones |
| Dimension (z) | Posicion en la coordenada vertical | Distinguir las dos alas del Lorenz, ver estructura 3D |
| Solido | Forma geometrica pura del atractor | Apreciar la estructura fractal sin distracciones |
| Curvatura | Tasa de cambio de direccion | Localizar puntos de inflexion y giros bruscos |
Ejercicios
-
01.
En el LAB de abajo, cambia entre los modos de color "Velocidad", "Tiempo" y "Dimension z". Para cada modo, describe que regiones del atractor son mas brillantes/coloridas y que significado fisico tiene esa diferencia.
-
02.
¿Por que usamos desvanecimiento cuadratico \((\frac{i}{N})^2\) en lugar de lineal \(\frac{i}{N}\)? Pista: piensa en como el sistema visual humano percibe diferencias de brillo (ley de Weber-Fechner).
-
03.
En el modo "Velocidad", identifica visualmente donde esta la velocidad maxima en el atractor de Lorenz. ¿Corresponde a la transicion entre alas o a la orbita dentro de un ala? ¿Por que tiene sentido fisicamente?
LAB: Lorenz con modos de color
Atractor de Lorenz con cuatro modos de color intercambiables. Usa los botones para explorar como cada mapeo de color revela distintas propiedades del sistema. El bloom simula un efecto de brillo cinematografico.