Pixel

Processing permite facilmente leer o ajustar valores de un pixel, independiente o en grupo.

get(), set()

Una imagen es un grid rectangular de pixel en el cual cada elemento es un número que especifica el color. El valor del color de un pixel individual puede ser leído y cambiado.

Leyendo pixels

Cuando un programa de Processing comienza, La ventana de visualización se abre en el tamaño fijado con size(). El programa asigna el valor de color a cada pixel.

La función get() puede leer el color de cualquier pixel en la ventana de visualización. Hay tres versiones de esta función, una para cada uso.

get()
get(x, y)
get(x, y, width, height)

Si get() se usa sin parámetros devuelve una copia de toda la ventana de visualización como una PImage. La version con dos parametros devuelve el valor de color del pixel localizado en las coordenadas x e y. Si se emplean los parámetros width y height es para seleccionar un área.

SI get() graba la ventana entera o una sección de la ventana los datos se asignan con el tipo de variable PImage. Estas imágenes pueden ser redibujadas en la pantalla en diferentes posiciones y tamaño.

En este ejemplo se dibuja un aspa con dos líneas:

strokeWeight(8);
line(0, 0, width, height);
line(0, height, width, 0);
PImage cross = get(); // get, coge la imagen completa
image(cross, 0, 50); //Dibuja esta imagen en una nueva posición

en este ejemplo graba la imagen y le cambia el tamaño.

smooth();
strokeWeight(8);
line(0, 0, width, height);
line(0, height, width, 0);
noStroke();
ellipse(18, 50, 16, 16);
PImage cross = get(); // get, coge la imagen completa
image(cross, 42, 30, 40, 40); //Dibuja esta imagen y la reescala en una nueva posición

En este ejemplo coge una sección de la imagen.

strokeWeight(8);
line(0, 0, width, height);
line(0, height, width, 0);
PImage slice = get(0, 0, 20, 100); // get, coge una sección de la imagen
set(20, 0, slice);
set(40, 0, slice);

La función get() siempre graba los pixels de la ventana de salida de la misma manera-

En los ejemplos anteriores la function get() se dibujan unas líneas que son convertidas a pixels en la pantalla. El siguiente ejemplo una imagen primero se lee y después se graba con get() y se presenta en otra posición.

size(400, 536);
PImage trees;
trees = loadImage("10.jpg");
image(trees, 0, 0);
PImage crop = get(); // Get, coge la ventana completa
image(crop, 50, 50); // Dibuja la imagen en una nueva posición
image(crop, 100, 100); // Dibuja la imagen en una nueva posición

Cuando se usan coordenadas x e y, la function get() function devuelve unos valores que podrian ser asignados a una variable de datos de color. Estos valores se pueden usar como parámetros para usar con fill() o stroke(). En el siguiente ejemplo el color de uno de los pixels se usa para colorear un rectángulo.

size(400, 536);
PImage trees;
trees = loadImage("10.jpg");
noStroke();
image(trees, 0, 0);
color c = get(20, 20); // Get color at (20, 30)
fill(c);
rect(20, 20, 50, 50);

Los valores del ratón se pueden usar como parametros de la función get(). En el siguiente ejemplo se usa esto para dibujar un rectámgulo del color de la selección.seleccionar el color del rectángulo de la derecha.

PImage trees;
void setup() {
size(400,536);
noStroke();
trees = loadImage("10.jpg");
}
void draw() {
image(trees, 0, 0);
color c = get(mouseX, mouseY);
fill(c);
rect((mouseX-25), (mouseY-25), 50, 50);
}

La función get() se puede usar con una estructura for para grabar la información de muchos pixels. En el siguiente ejemplo los valores de color de los pixels de una fila son empleados para colorear las líneas de la derecha, con el ratón modificamos la línea de pixeles de los que tomamos el color.

PImage trees;
int y = 0;
void setup() {
size(400,536);
trees = loadImage("10.jpg");
}
void draw() {
image(trees, 0, 0);
y = constrain(mouseY, 0, 536);
for (int i = 0; i < 200; i++) {
color c = get(i, y);
stroke(c);
line(i+200, 0, i+200, 536);
}
stroke(255);
line(0, y, 200, y);
}

Cada variable PImage tiene su propia función set() function que escribe pixel directamente en la imagen. En el siguiente ejemplo los pixels son grabados directamente desde la imagen y no de la pantalla, de esta forma podemos leer la imagen y no las dos líneas blancas que se dibujan.

size(400, 500);
PImage trees;
trees = loadImage("10.jpg");
stroke(255);
strokeWeight(12);
image(trees, 0, 0);
line(0, 0, width, height);
line(0, height, width, 0);
PImage treesCrop = trees.get(100, 200, 200, 200);
image(treesCrop, 100, 200);

Escribiendo pixels

Los pixels en la ventana del Processing pueden ser escritos directamente  con la función set(). Hay dos versiones de esta function cada una de ellas con tres parametros.

set(x, y, color)
set(x, y, image)

Cuando el tercer parámertro es un color, set() cambia el color y cuando el tercer parámetro es una imagen, set() escribe una imagen en las coordenadas x e y.

color black = color(0);
set(20, 80, black);
set(20, 81, black);
set(20, 82, black);
set(20, 83, black);
for (int i = 0; i < 55; i++) {
for (int j = 0; j < 55; j++) {
color c = color((i+j) * 1.8);
set(30+i, 20+j, c);
}
}

La función set() puede escribir unas imagen en cualquier localización. Usar set() para dibujar una imagen es más rápido que usar image() porque los pixels son copiados directamente. Sin embargo, las imagenes dibujadas con set() no pueden ser teñidas o reescaladas, y no se ven afectadas por las funciones de transformación.

PImage trees;
void setup() {
size(400, 400);
trees = loadImage("10.jpg");
}
void draw() {
int x = constrain(mouseX, 0, 200);
set(x, 0, trees);
}

Cada variable PImage tiene su propia función set() function que escribe pixel directamente en la imagen.

En el siguiente ejemplo, cuatro pixels blancos se escriben dentro de la variable de imagen trees, y la imagen se dibuja entonces en la ventana.

PImage trees;
trees = loadImage("10.jpg");
background(0);
color white = color(255);
trees.set(0, 50, white);
trees.set(1, 50, white);
trees.set(2, 50, white);
trees.set(3, 50, white);
image(trees, 20, 0);