jardínBit

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

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);
   }
  }
}

Imágenes: Transformación de pixeles

1 Fundamentos: cuadrícula