Color

¿Porqué no se puede imaginar un vidrio blanco transparente —inclusive si en la realidad no lo hay?   ¿En dónde se pierde la analogía con el vidrio transparente coloreado? (Wittgenstein 1994, 176)

El color es una sensación perceptiva cuyo estudio recae en muy distintas disciplinas: psicología de la percepción, física-óptica, fisiología, neurología, filosofía….

Según el enfoque de la disciplina, se le considera como un fenómeno visual vinculado a la luz y localizado físicamente en una porción del espectro electromagnético (espectro lumínico), o como sinestesia ente el sujeto que percibe y el objeto percibido dentro de la psicología, o como un proceso neuro-fisiológico complejo.

Como fenómeno que depende de la luz, el color recoge de ella sus paradojas, llegando a ser un claro ejemplo para mostrar la contradicción entre el mundo tangible y el intangible. Así, todas las relaciones que se establecen entre los componentes del color pigmento (materia tangible)  y el color-luz  (materia intangible) son contrarias.

Color-pigmento

Mezcla sustractiva

La mezcla de sus primarios es negro

Colores primarios Magenta, Cian, Amarillo

Colores secundarios Azul, Verde, Rojo

Magenta + Cian = Azul

Cian + Amarillo = Verde

Amarillo + Magenta = Rojo

Color-luz

Mezcla aditiva

La mezcla de sus primarios es blanco

Colores primarios Azul, Verde, Rojo

Colores secundarios Magenta, Cian, Amarillo

Rojo + Azul = Magenta

Azul + Verde = Cian

Verde + Rojo = Amarillo

Los ordenadores utilizan color-luz porque los materiales de la pantalla o video proyector fosforecen con la mezcla aditiva. Pero existen distintos modelos o  espacios de color;  que son el resultado de sistematizar las  relaciones que se producen entre los componentes o parámetros del color bajo un determinado criterio.

Los tres parámetros del color: tono, saturación y luminosidad, están relacionados de manera distinta en cada modelo, incluso utilizan nombres distintos para esos parámetros. El tono a veces lo encontraremos bajo la denominación de color o matiz; y la luminosidad como valor, brillo o intensidad. El término saturación suele permanecer bastante estable en los distintos modelos. Los modelos más habituales en programación son: RGB, HSB (o HSV) y hexadecimal (principalmente vinculado a la web).

MODELO RGB

El modelo RGB se basa en los colores-luz primarios (Red, Green, Blue – Rojo, Verde, Azul) más otro canal denominado alpha que se ocupa de la transparencia. Cada dato de color RGB+alpha tiene 32 bits, 8 bits por canal y cada uno de estos canales tiene un rango de valores que va de 0  a 255, siendo el valor (0,0,0) el negro, y el valor (255, 255, 255) el blanco.

MODELO HEXADECIMAL

El modelo hexadecimal se utiliza principalmente en la web. Sus parámetros se expresan por una serie alfanumérica (números y letras) de 6 caracteres precedidos por el signo “#”. La función para utilizarlo es of.setHexColor() pero sus parámetros no se inician con el signo #. Ejemplo: of.setHexColor(0e0eb3)

MODELO HSB

El modelo HSB hace referencia a los parámetros (Hue, Saturation, Brightness – Matiz, Saturación, Brillo), es muy semejante al modelo HSV, donde V significa Value (valor) pero en ambos casos, brillo y valor es lo mismo que hemos denominado luminosidad. El tono o matiz recorre el círculo cromático graduándose de 0 a 360º, mientras que los valores de saturación y luminosidad se escalan entre 0 y 100%. El modelo HSB es más afín a la manera en que las personas percibimos el color que el modelo RGB.

La clase of.Color() de openFrameworks puede trabajar con el modelo HSB a través del método :setHsb(), pero el rango de sus valores es el mismo que utiliza el modelo RGB (todos los parámetros van de 0 a 255) y el valor de estos parámetros es el que se utiliza en Lua-Mosaic al incorporar esa clase. Este cambio de modo de color tiene la ventaja de mantener una lógica que se adecua mejor en trabajos con graduaciones de escalas tímbricas de color.

En el primer parámetro, tono (Hue), hay que escalar los 360º a 256 valores. La siguiente imagen clarifica este cambio, desplegado el círculo linealmente y con la conversión de valores que se utilizan en Lua-Mosaic para los colores-luz primarios, secundarios e intermedios.

Los valores 255 y  0 corresponden al mismo color rojo, punto en el que se cerraría el círculo cromático.

Para programar bajo este modelo, el proceso es el siguiente. Primero se vincula una variable global con la clase:

nombreVariable = of.Color()

Y en el bloque function draw() esa variable establece el puente o traducción de un sistema a otro a través del método :setHsb(). Todos los métodos de las clases van precedidos de dos puntos “:”

nombreVariable:setHsb(valorHue, valorSaturation, valorBrightness) -- Todos de 0 a 255

Después se pone la función habitual para definir el color, pero en sus parámetros se vincula la variable: of.setColor(nombreVariable.r, nombreVariable.g, nombreVariable.b)

Los siguientes ejemplos utilizan la clase of.setColor()  para pasar al modelo HSB. En el primero, además, la función  of.setCircleResolution(valor) permite generar distintos polígonos concéntricos con una estructura for.

--[[
 Lua-Mosaic          E-4-3
 --------------------------
 estructura for y color HSB
 creado por mj
]]

radio = 100
radioMax = 250
radioInc= 40
posX = 1280/2     -- configurar objeto Output window a ese tamaño 1280 x 720
posY = 720/2
grosor = 10
lados = 3

c = of.Color()    -- clase color de openFrameworks

function setup()
    of.enableSmoothing()
end

function draw()
    -- draw background first 
    mosaicBackground(255,255,255,255) -- fondo blanco sin transparencia

    of.noFill()
    of.setLineWidth(grosor)
    lados = 3
 
   j = 0             -- variable local para dividir la escala cromática	
   for i=0, 6  do                       -- el for da 7 vueltas													
       of.setCircleResolution(lados)
       c:setHsb((j/8)*255,255,255)      -- aplica el método de cambiar el modo RGB a HSB 
       of.setColor(c.r,c.g,c.b)	        -- parametros para pasar de RGB a HSB
       of.drawCircle(posX, posY, radio+(i*radioInc))

       j = j+1.                -- incrementa j para el siguiente color	
       c:setHsb((j/8)*255,255,255)
       of.setColor(c.r,c.g,c.b)
       of.drawCircle(posX, posY, radio+(i*radioInc) + (grosor-1))
       lados = lados + 1       -- incrementa cada vuelta un lado más al polígono
  end 
end

El último ejemplo también utiliza el modelo HSB  para asignar color a una forma, pero este color varía según su posición vertical, para ello el valor del parámetro Hue  se mapea con la función of.map(). Esta función tiene 5 parámetros: of.map(valor, inputMin, inputMax, outputMin, outputMax). El primero es el dato que se utiliza para mapear, en este caso será la el valor de la variable posy (posición y del centro del círculo). El segundo y tercer parámetro corresponde al valor mínimo y máximo que puede alcanzar ese primer dato de entrada. El cuarto y quinto parámetro son el valor mínimo y máximo que queremos obtener de salida, en el ejemplo irá de 0 a 255, porque queremos aplicarlo al color.

--[[
 Lua-Mosaic     E-4-8
 ---------------------
 Mapear color HSB

]]


c= of.Color()
tono = 0

radio = 60
posx = of.random(200, 1280) -- configurar objeto Output window al tamaño 1280 x 720
posy = of.random(0, 720/6)
vx = 0
vy = 0
gx= of.random(-0.18326,0.44326)
gy = 0.0184562 * radio	

function setup()
end

function update()
     posx = posx + vx                 -- posición X más velocidad	
     posy = posy + vy                 -- posición Y más velocidad	
     vx = vx + gx                     -- velocidad de X más gravedad	
     vy = vy + gy                     -- velocidad de Y más gravedad
 
     if posx < radio or posxx > OUTPUT_WIDTH-radio then
   	vx = vx * -0.9876             -- invierte velocidad al tocar los bordes en X	
     end

     if posy+radio  > OUTPUT_HEIGHT then	
   	vy = vy * -0.9876             -- invierte velocidad al tocar los bordes en Y		
     end
																																																						
     tono = of.map(posy,0,OUTPUT_HEIGHT,0,255) -- mapea valor color según el de posy		
end																											
                                                        
function draw()																							
     -- draw background first 
     mosaicBackground(255,255,255,25)  -- fondo blanco con transparencia
     c: setHsb(tono, 255, 255)         -- utiliza los valores mapeados del tono			
     of.setColor(c.r, c.g, c.b)        -- código para usar color HSB							
     of.drawCircle(posx, posy, radio)	
end