---
title: "Imágenes: Transformación de pixeles"
---

# 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.

* [[Ciclos anidados: Repetición en dos dimensiones]](/notas/ciclos-anidados.html)

```java
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?

## 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]](/notas/imagenes-read.html)

```java
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.

# 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.

## 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:

```java
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()
```

## 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.

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

### 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:


```java
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()
```

# Transformación

El siguiente ejemplo usa el brillo de una imagen para convertirlo al diámetro de cada círculo ordenado en cuadrícula:

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