Filter

Processing permite realizar técnicas de filtrado, mascaras… con las imágenes.

filter(), blend(), blendColor(), copy(), mask()

Las imágenes digitales pueden ser facilmente combinadas con otras imágenes.  Cada pixel de la imagen es una serie de números que fácilmente pueden ser sumados, multiplicados, restados… algunos cálculos son simples y otros serán más complejos pero es interesante el resultado final.

Filtering

Processing facilta para filtrar y mezclar imagenes en la ventana de salida. Cada uno de esas funciones lo que hace es modificar el valor de los pixels. La función filter() tiene dos parámetros:

filter(mode)
filter(mode, level)

Existen ocho diferentes opciones para elk parámetro mode parameter: THRESHOLD, GRAY, INVERT, POSTERIZE, BLUR, OPAQUE, ERODE, o DILATE. Algunos de estos requieren el parámetro level. Por ejemplo, el modo THRESHOLD convierte cada pixel de la imagen en blanco y negro.

La function filter() afecta solamente a lo que está dibujado y no a lo que se dibuja después.

size (200, 200);
PImage img = loadImage("vg.jpg");
image(img, 0, 0);
filter(BLUR, 3);
strokeWeight(5);
line(0, 100, 200, 100);

El parámetro del valor del filtro puede cambiarse y el resulatdo es una animación.

float fuzzy = 0.0;
void setup() {
size (200, 200);
PImage img = loadImage("vg.jpg");
image(img, 0, 0);
}
void draw() {
if (fuzzy < 16.0) {
fuzzy += 0.05;
}
filter(BLUR, fuzzy);
}

La clase PImage tiene un método filter() que puede filtrar una imagen, sin afectar a al totalidad de la ventana.

size (200, 200);
PImage img = loadImage("vg.jpg");
image(img, 0, 0);
img.filter(INVERT);
image(img, 100, 0);

Blending

La función blend() mezcla pixels de diferentes maneras según el parámetro del modo. Tiene dos versiones.

blend(x, y, width, height, dx, dy, dwidth, dheight, mode)
blend(srcImg, x, y, width, height, dx, dy, dwidth, dheight, mode)

El parámetro mode puede ser BLEND, ADD, SUBTRACT, DARKEST, LIGHTEST, DIFFERENCE, EXCLUSION, MULTIPLY, SCREEN, OVERLAY, HARD_LIGHT, SOFT_LIGHT, DODGE,y BURN. Los parámetros x e y son las coordenadas de la region a copiar. El ancho y el alto el tamaño del área de origen.  Los parámetros El dx y dy son las coordenadas x e y del área de destino. dwidth y dheight son el ancho y alto del area de destino. La mezcla blend entre dos imagenes genera una imagen en la ventana, una segunda imagen puede usarse como parámetros srcImgr. Si el origen y destino son de diferentes tamaños, los pixels son reescalados autiomáticamente.

En el siguiente ejemplo se usa el modo ADD sobre una misma imagen.

size (200, 200);
PImage img = loadImage("vg.jpg");
image(img, 0, 0);
blend(img, 0, 0, 100, 200, 100, 0, 100, 200, ADD);

El modo DARKEST en dos imágenes diferentes.

size (200, 200);
PImage img = loadImage("vg.jpg");
PImage img2 = loadImage("sp.jpg");
img.blend(img2, 0, 0, 100, 200, 0, 0, 100, 200, DARKEST);
image(img, 0, 0);

Una imagen blanco y negro sobre una imagen y el filtro DARKEST, es una máscara.

size(200, 200);
PImage img = loadImage("vg.jpg");
background(0);
stroke(255);
strokeWeight(24);
smooth();
line(100, 0, 24, 200);
line(0, 100, 200, 44);
blend(img, 0, 0, 200, 200, 0, 0, 200, 200, DARKEST);

La función blendColor() se emplea para mezclar colores.

blendColor(c1, c2, mode)

color g1 = color(102);
color g2 = color(51);
color g3 = blendColor(g1, g2, MULTIPLY);
noStroke();
fill(g1);
rect(50, 0, 50, 100);
fill(g2);
rect(20, 25, 30, 50);
fill(g3);
rect(50, 25, 20, 50);

Copiar pixels

La función copy() tiene dos versiones, con los siguientes parámetros.

copy(x, y, width, height, dx, dy, dwidth, dheight)
copy(srcImg, x, y, width, height, dx, dy, dwidth, dheight)

La version de copy() con ocho parámetros copia una región de pixels a otra área.

La versión con nueve parámetros copia todo o una porción de la imagen especificada por el parámetro srcImg.

size(200, 200);
PImage img = loadImage("vg.jpg");
image(img, 0, 0);
copy(0, 0, 200, 100, 0, 100, 200, 100);

PImage img1, img2;
void setup() {
size(200, 200);
img1 = loadImage("vg.jpg");
img2 = loadImage("sp.jpg");
}
void draw() {
background(255);
image(img1, 0, 0);
int my = constrain(mouseY, 0, 200);
copy(img2, 0, my, 200, 33, 0, my, 200, 33);
}

Masking

El método mask() de la clase PImage utiliza los valores de una imagen sobre los contenidos de una imagen. La máscara sólo emplea los valores de gris y debe ser del mismo tamaño.

Si la imagen no es de escala de grises se puede convertir con la función filter().

las dos imágenes son:

el resultados es:

size(200, 200);
background(255);
PImage img = loadImage("vg.jpg");
PImage maskImg = loadImage("grad.jpg");
img.mask(maskImg);
image(img, 0, 0);