Gestión del color

Hasta el momento hemos definido los colores de relleno y contorno de varias formas:

//un número del 0 al 255 produce un tono de gris
background(125); 
//podemos usar el código hexadecimal de un color
background(#996633);
//o tres valores, uno para cada canal RGB
background(20,50,255);


Para obtener el código hexadecimal de un color podemos usar la herramienta Color selector en el menú Tools.

Si empleamos tres valores del 0 al 255 separados por comas, Processing los interpreta como valores para los canales R, G y B. Si añadimos un cuarto valor, se interpreta como canal alfa (transparencia). Podemos cambiar eso:

//En setup() declaramos:
colorMode(RGB, 100)

Esto establece la gradación de canales en 100 unidades (en lugar de 255)

colorMode(HSB, 255, 100, 100)

Cambia los canales RGB (rojo, verde y azul) por canales HSB (tono, saturación y brillo), y gradúa en diferentes escalas cada canal

Practiquemos:

//n será un valor incremental
float n = 0;
//declaramos las variables para:
//tono
float h = 0;
//saturación
float s = 0;
//brillo
float b = 0;
 
void setup(){
  //modo de color
  colorMode(HSB, 100);
}
 
void draw(){
  //pintamos el fondo
  background(h, s, b);
  //el tono asume el valor de n
  h = n;
  //la saturación, un valor aleatorio entre 50 y 100
  s = random(50, 100);
  //y el brillo, valores variables pero cercanos entre 0 y 100
  b = noise(n/50)*100;
  //n aumenta en 1 en cada ciclo 
  n++;
 
  //si n alcanza el valor máximo
  if(n == 100){
    //vuelve a cero
    n = 0;
  }
}

Documentación:

Leave a Comment.