Color
El color de los pixels se define con tres valores separados en RGB que van del 0 al 255 o 4 valores si incluimos la tranparencia alpha.
En Processing, colores se definen con parámetros en las funciones de fondo, relleno y línea; background(), fill(), y stroke():
background(valor1, valor2, valor3)
fill(valor1, valor2, valor3, alpha)
stroke(valor1, valor2, valor3, alpha)
Para facilitarnos la selección del color, podemos usar el selector de color (tools >> color selector)
Ejemplo para dibujar rectángulos que variamos su posición y su transparencia con for:
size(200, 200);
background(136, 203, 255);
int x = 0;
noStroke();
for (int i = 0; i <= 255; i += 25) {
fill(2, 60, 104, i);
rect(x, 0, 20, height);
x += 20;
}
Con la función color() se emplea para definir y almacenar un color en un programa, se puede usar en background(), fill(), y stroke().
size(200, 200);
color azul = color(2, 60, 104);
color cielo = color(103, 187, 252);
background(cielo);
noStroke();
fill(azul);
rect(50, 50, 100, 100);
El color se puede definer además de con valoresn RGB, con HSB, en hexadecimal o por uno de los nombres reconocidos por processing:
yellow, red, blue, orange, green, violet.
Para indicar con que modo de color y el rango en el que estamos trabajando usaremos la función colorMode():
colorMode(modo)
colorMode(modo, rango)
colorMode(modo, rango1, rango2, rango3)
Ejemplos:
colorMode(RGB, 255)
Para un rango de valores entre 0 y 255.
colorMode(RGB, 1.0);
Para un rango de valores entre 0.0 y 1.0.
colorMode(HSB, 360, 100, 100).
El matiz (Hue) tomará valores entre 0 y 360.
La saturación y el brillo tomará valores entre 0 y 100.
En este ejemplo vemos la diferencia del resultado cambiando el matiz del color de la línea.
size (200, 200);
colorMode(HSB);
for (int i = 0; i < 200; i++) {
stroke(i*1.275, 255, 255);
line(i, 0, i, 200);
}
La saturación:
size (200, 200);
colorMode(HSB);
for (int i = 0; i < 200; i++) {
stroke(132, i*1.275, 204);
line(i, 0, i, 200);
}
El brillo:
size (200, 200);
colorMode(HSB);
for (int i = 0; i < 200; i++) {
stroke(132, 108, i*1.275);
line(i, 0, i, 200);
}
De esta manera podemos hacer transiciones suaves de color cambiando los valores de color(), fill(), y stroke(). El HSB tiene muchas ventajas sobre el RGB cuando trabajamos con código porque es más intuitivo, sólo se debe cambiar un número para lograr un degradado dejando iguales los otros valores. .
En los siguientes ejemplos se muestran transiciones de verde a azul. Usando el modo RGB oel HSB:
size (200, 200);
colorMode(RGB);
for (int i = 0; i < 200; i++) {
float r = 55 + (i*0.5);
float g = 55 + (i*0.5);
float b = 200 - (i);
stroke(r, g, b);
line(i, 0, i, 200);
}
Puede usarse también, el modo de anotación hexadecimal. En la que se los valores RGB pasa de usar tres dígitos de 0 a 255 a dos usando nomeclatura en base 16 de 0 a 9 y de A a F, se identifica poniendo el #.
background(#818257);