Processing/JS

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)

color selector

Ejemplo para dibujar rectángulos que variamos su posición y su transparencia con for:

Color

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().

Color

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.

Color

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:

Color

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:

Color

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:

COLOR

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);