Color 2

En esta unidad veremos las funciones para leer los componentes de un color y abordar las técnicas para crear paletas dinámicas de color.

red(), blue(), green(), alpha(), hue(), saturation(), brightness()

Los colores se almacenan como números. Cada color se define por sus valores RGB, Hay tres números que se guardan como components RGB o HSB y un valor opcional, un cuarto número que almacena el valor de la transparencia.

Extraer el color

El tipo de datos del color en Processing son valores int, y pueden usarse como cualquier otra variable int del programa. Los datos de color son valores que van de 0 a 255.

Las funciones red(), green(), y blue() fse usan para leer los components de un color.

color c1 = color(0, 126, 255, 220); // Crea un color
float r = red(c1); // Asigna 0.0 a r
float g = green(c1); // Asigna 126.0 a g
float b = blue(c1); // Asigna 255.0 a b
float a = alpha(c1); // Asigna 220.0 a alpha
println(r + ", " + g + ", " + b); // escribe "0.0, 126.0, 255.0"

La function get() se usa para leer los components de un color.

En el siguiente ejemplo, se usa para acceder al valor del color del cursor. Extraemos el valor del componente rojo y se lo restamos a 255, cuando el cursor esta sobre negro, el valor es 0 y 255-0 es 255, blanco y cuando esta sobre el rojo es 255 y 255-255 es 0, negro.

void setup() {
size(100, 100);
smooth();
fill(204, 0, 0);
}
void draw() {
background(0);
noStroke();
ellipse(66, 46, 80, 80);
color c = get(mouseX, mouseY);
float r = red(c); // Extrae el componente rojo de la imagen
stroke(255-r); // dibuja una línea del color del componente rojo
line(mouseX, 0, mouseX, height);
line(0, mouseY, width, mouseY);
}

Dibujamos rectángulos rgb del color del pixel de la imagen

PImage wall;
void setup() {
size(400, 536);
wall = loadImage("10.jpg");
stroke(255);
}
void draw() {
background(wall);
color c = get(mouseX, mouseY);
float r = red(c); // Extrae el rojo
float g = green(c); // Extrae el verde
float b = blue(c); // Extrae el azul
fill(r, 0, 0);
rect(32, 20, 12, 60); // componente rojo
fill(0, g, 0);
rect(44, 20, 12, 60); // componente verde
fill(0, 0, b);
rect(56, 20, 12, 60); // componente azul
}

Los valores que extraemos con las funciones red(), green(), y blue() se pueden usar de muchas maneras. Los números se pueden usar para conrolar los aspectos del movimiento o el flujo del programa.

En el siguiente ejemplo el 400 puntos que se mueven en la pantalla. Cada punto se mueve en la pantalla de izquierda a derecha. Los valores del pixel de la imagen tiene las coordenadas del punto y se mueve a la velocidad del brillo. El punto se mueve mas suave si es de las zonas oscuras y más rápido si es de las zonas claras.

int num = 800;
float[] x = new float[num];
float[] y = new float[num];
PImage img;
void setup() {
size(400, 400);
img = loadImage("10.jpg");
for (int i = 0; i < num; i++) {
x[i] = random(width);
y[i] = random(height);
}
stroke(255);
}
void draw() {
background(0);
for (int i = 0; i < num; i++) {
color c = img.get(int(x[i]), int(y[i]));
float b = brightness(c) / 255.0;
float speed = pow(b, 2) + 0.05;
x[i] += speed;
if (x[i] > width) {
x[i] = 0;
y[i] = random(height);
}
point(x[i], y[i]);
}
}

Paletas de color dinámicas

Es posible manipular dinámicamente los colores, en el siguiente ejemplo, hay dos colores el olive y el gray que no varian y otros dos, yellow y orange que con el valor mousey del cursor.

color olive, gray;
void setup() {
size(100, 100);
colorMode(HSB, 360, 100, 100, 100);
noStroke();
smooth();
olive = color(75, 61, 59);
gray = color(30, 17, 42);
}
void draw() {
float y = mouseY / float(height);
background(gray);
fill(olive);
quad(70 + y*6, 0, 100, 0, 100, 100, 30 - y*6, 100);
color yellow = color(48 + y*20, 100, 88 - y*20);
fill(yellow);
ellipse(50, 45 + y*10, 60, 60);
color orange = color(29, 100, 83 - y*10);
fill(orange);
ellipse(54, 42 + y*16, 24, 24);
}

Una buena técnica para crearcomplejas paletas de color es usar directamente el color de la imagen.

De una imagen se puede leer los valores de color de sus pixels con la función get(). Leemos los diferentes valores de color de los primeros pixeles de una imagen y creamos rectángulos.

PImage img;
void setup() {
size(200, 200);
noStroke();
img = loadImage("10.jpg");
}
void draw() {
int ix = int(random(img.width));
int iy = int(random(img.height));
color c = img.get(ix, iy);
fill(c, 102);
int xgrid = int(random(-2, 5)) * 50;
int ygrid = int(random(-2, 5)) * 50;
rect(xgrid, ygrid, 50, 50);
}

Leer los colores de una imagen dentro de una array abre nuevas posibilidades. Ya en el array pueden ser fácilmente reordenados o modificados.

En el siguiente ejemplo se guardan en un array y se reordenan por su brillo. La función sortColors() toma el array de color como una entrada y los ordena según su luminosidad y pone esos colores en un nuevo array.

En el siguiente ejemplo, usamos los valores almacenados en el array para determinar el grosor I punto central del par de líneas dibujados en la ventana.

Cada par de líneas por un intervalo de 10 pixels, y un valor aleatorio que accede a un color de la imagen con el array imageColors[].

PImage img;
color[] imageColors;
void setup() {
size(200, 200);
frameRate(0.5);
smooth();
noFill();
img = loadImage("vg.jpg");
imageColors = new color[img.width*img.height];
for (int y = 0; y < img.height; y++) {
for (int x = 0; x < img.width; x++) {
imageColors[y*img.height + x] = img.get(x, y);
}
}
imageColors = sortColors(imageColors);
}
void draw() {
background(255);
for (int x = 10; x < width; x += 10) {
int r = int(random(imageColors.length));
float thick = ((100-r) / 4.0) + 1.0;
stroke(imageColors[r]);
strokeWeight(10);
line(x, height, x, height-r+thick);
//line(x, 0, x, height-r-thick);
}
}
color[] sortColors(color[] colors) {
color[] sorted = new color[colors.length];
int num = 0;
for (int i = 0; i <= 255; i++) {
for (int j = 0; j < colors.length; j++) {
if (int(brightness(colors[j])) == i) {
sorted[num] = colors[j];
num++;
}
}
}
return sorted;
}