Imágenes: Transformación de pixeles
1 Fundamentos: cuadrícula
Podemos considerar a una imagen como un arreglo de pixeles en dos dimensiones.
A cada pixel lo podemos ubicar con un par de coordenadas x,y correspondientes al número de columna y de fila respectivamente.
Partiendo del concepto de ciclos anidados para dibujar una cuadrícula, el siguiente ejemplo hace que cada celda tenga un color aleatorio.
void setup() {
size( 640, 480);
}
void draw() {
background(255);
randomSeed( 400045 );
// dibuja varias filas:
for (int y=0; y<height; y=y+10) {
// dibuja una fila:
for (int x=0; x<width; x=x+10) {
fill( random(255) );
rect( x, y, 10, 10);
} // cierra for x
} // cierra for y
} // cierra draw¿Qué pasa si en lugar de tener colores aleatorios, cada celda tomara su color de una estructura organiada como un arreglo?
1.1 Cargar y mostrar imagen
En las siguientes notas hay ejemplos de cómo cargar y mostrar una imagen en Processing: * [Imágenes: Abrir, mostrar, leer]
PImage foto; // declarar variable
void setup(){
size( 640, 480);
foto = loadImage("trajinera.jpg"); // carga imagen
}
void draw(){
background( 0 );
// dibuja la foto en un rectángulo en 0,0, con ancho 320 y alto 240
image( foto, 0, 0, 320, 240);
}En los ejemplos siguientes cargaremos la imagen pero no la dibujaremos con image( ), sino que más bien leeremos y transformares la información contenida en ella.
2 Imagen como fuente de colores
Este par de ejemplos muestran cómo utilizar el método .get(x,y) de las imágenes para obtener el color de un pixel dado, y utilizarlo para colorear a cada círculo.
2.1 Cuadrícula
En este ejemplo las coordenadas x,y con obtenidas a partir de ciclos anidados que corresponden a una cuadrícula de círculos:
PImage foto; // declarar variable
void setup(){
size( 640, 480);
foto = loadImage("trajinera.jpg");
foto.resize( width, height);
}
void draw(){
background( 0 );
for( int y=0; y<height; y=y+20){
for( int x=0; x<width; x=x+20){
// obtiene el color en el pixel x,y
color pixel = foto.get(x, y);
fill( pixel );
ellipse( x, y, 20, 20);
}
}
} // cierra draw()2.2 Aleatorios
Saliendo de la cuadrícula, en este ejemplo se dibuja a un círculo con posición aleatoria con cada cuadro de enimación. Esa posición aleatoria se utiliza para obtener el color del pixel correspondiente en la imagen.
PImage foto; // declarar variable
void setup(){
size( 640, 480);
foto = loadImage("trajinera.jpg");
foto.resize( width, height);
}
void draw(){
float x = random(width);
float y = random(height);
color pixel = foto.get( int(x), int(y) );
fill( pixel, 180 );
noStroke();
ellipse( x, y, 20, 20);
}2.2.1 Más círculos
Si quisiéramos que aparecieran más círculos en cada cuadro de animación, podemos utilizar un ciclo for que repita la operación múltiples veces:
PImage foto; // declarar variable
void setup(){
size( 640, 480);
foto = loadImage("trajinera.jpg");
foto.resize( width, height);
}
void draw(){
noStroke();
// repite 10 veces:
for( int i=0; i<10; i++){
float x = random(width);
float y = random(height);
color pixel = foto.get( int(x), int(y) );
fill( pixel, 180 );
ellipse( x, y, 20, 20);
} // cierra for
} // cierra draw()3 Transformación
El siguiente ejemplo usa el brillo de una imagen para convertirlo al diámetro de cada círculo ordenado en cuadrícula:
PImage foto; // declarar variable
void setup(){
size( 640, 480);
foto = loadImage("trajinera.jpg");
foto.resize( width, height);
}
void draw(){
background( 0 );
for( int y=0; y<height; y=y+12){
for( int x=0; x<width; x=x+12){
// obtiene el color en el pixel x,y
color pixel = foto.get(x, y);
// obtiene el brillo:
float brillo = brightness( pixel );
fill( 255 );
// asigna un diámetro proporcional al brillo
circle( x, y, brillo/20);
}
}
}