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?
En las siguientes notas hay ejemplos de cómo cargar y mostrar una imagen en Processing: * [Imágenes: Abrir, mostrar, leer]
// declarar variable
PImage foto;
void setup(){
size( 640, 480);
loadImage("trajinera.jpg"); // carga imagen
foto =
}
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.
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.
En este ejemplo las coordenadas x,y
con obtenidas a partir de ciclos anidados que corresponden a una cuadrícula de círculos:
// declarar variable
PImage foto;
void setup(){
size( 640, 480);
loadImage("trajinera.jpg");
foto = resize( width, height);
foto.
}
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
get(x, y);
color pixel = foto.fill( pixel );
ellipse( x, y, 20, 20);
}
}
// cierra draw() }
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.
// declarar variable
PImage foto;
void setup(){
size( 640, 480);
loadImage("trajinera.jpg");
foto = resize( width, height);
foto.
}
void draw(){
float x = random(width);
float y = random(height);
get( int(x), int(y) );
color pixel = foto.fill( pixel, 180 );
noStroke();
ellipse( x, y, 20, 20);
}
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:
// declarar variable
PImage foto;
void setup(){
size( 640, 480);
loadImage("trajinera.jpg");
foto = resize( width, height);
foto.
}
void draw(){
noStroke();
// repite 10 veces:
for( int i=0; i<10; i++){
float x = random(width);
float y = random(height);
get( int(x), int(y) );
color pixel = foto.fill( pixel, 180 );
ellipse( x, y, 20, 20);
// cierra for
}
// cierra draw() }
El siguiente ejemplo usa el brillo de una imagen para convertirlo al diámetro de cada círculo ordenado en cuadrícula:
// declarar variable
PImage foto;
void setup(){
size( 640, 480);
loadImage("trajinera.jpg");
foto = resize( width, height);
foto.
}
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
get(x, y);
color pixel = foto.// obtiene el brillo:
float brillo = brightness( pixel );
fill( 255 );
// asigna un diámetro proporcional al brillo
circle( x, y, brillo/20);
}
} }