jardínBit

Imágenes: Abrir, mostrar, leer

Desde Processing podemos abrir imágenes de mapas de bits (.jpg, .png) y dibujarlas en el canvas.

1 Preparación

Es necesario tener nuestro sketch de código guardado, y colocar las imágenes que queremos utilizar dentro de la carpeta donde se encuentra el archivo .pde de nuestro sketch, ya sea por sí solas o dentro de una carpeta llamada data.

Por ejemplo, si guardamos nuestro sketch dentro de la carpeta sketchbook con el nombre estudioImagenes, hay que colocar nuestras imágenes en la carpeta sketchbook/estudioImagenes o en sketchbook/estudioImagenes/data.

Alternativamente, podemos arrastrar (drag) nuestras imágenes desde nuestro navegador de archivos hacia la ventana del código. Al soltarlas veremos cómo aparece un mensaje de que el archivo fue añadido con éxito.

2 Funciones

Estas funciones de Processing permiten abrir/cargar y mostrar imágenes.

2.1 loadImage( )

Carga una imagen que esté en el sistema de archivos (ver arriba, Preparación) y regresa un objeto de tipo PImage.

// declara variable de tipo PImage
PImage foto;

void setup(){
    // carga la imagen dentro de la variable 'foto'
    foto = loadImage("foto del día.jpg");
}

2.2 image( )

Dibuja una imagen en el lienzo.

Hay dos versiones, una con tres parámetros (PImage, float, float) y otra con cinco (PImage, float, float, float, float)

// dibuja la imagen de la variable 'foto'
// con esquina superior izquierda en (200,300)
// y a su tamaño original 
image( foto, 200, 300);

// dibuja la imagen de la variable 'foto'
// con esquina superior izquierda en (200,300)
// y dimensiones de 640x480
image( foto, 200, 300, 640, 480);

2.2.1 imageMode( )

El significado de los argumentos numéricos de image( ) puede cambiarse con la función imageMode( ), que se comporta como rectMode( ) con los posibles valores de CORNER, CORNERS y CENTER.

[Dibujo con figuras]

2.3 save( n )

Guarda el canvas actual con el nombre de archivo dado por String n, dentro de la carpeta donde está el sketch.

El nombre de archivo ha de ser .png, .jpg, .tiff o .tga

save( "composición.png" );

3 Métodos y atributos

Los siguientes son métodos y atributos de la clase PImage. Esto implica que le pertenecen y actúan sobre la imagen en cuestión.

3.1 .resize( w, h )

Cambia las dimensiones de la imagen original a w pixeles de ancho y h pixeles de alto.

// redimensiona la imagen a 640x480
foto.resize( 640, 480);
// a partir de aquí, la imagen medirá 640x480
image(foto, 50, 50);
image(foto, 0, 0);

3.2 .get( x, y ) - pixel!

Obtén el color del pixel que se ubica en las coordenadas x,y de la imagen.

Regresa un valor de tipo color.

// obtén el color de la esquina superior izquierda
color esquina = foto.get(0, 0);

// obtén el color sobre el cual se ubica el mouse
// (siempre y cuando la esquina superior izquierda
// de la imagen esté en 0,0 del canvas)
color picker = foto.get( mouseX, mouseY );

3.3 .get( x, y, w, h ) - recorte!

Obtén una imagen “recorte” de la original: un rectángulo de w pixeles de ancho, h de alto, con esquina superior en x,y.

Regresa un valor de tipo PImage.

La imagen original no se modifica.

// "recorta" el cuadrado de 100x100 pixeles
// correspondiente a la esquina superior izquierda (0, 0)
// de la imagen original
PImage recorte = foto.get(0, 0, 100, 100);

3.4 .width, .height

Atributos que corresponden al ancho y alto de la imagen.

// "imprime" en la consola los valores de ancho y alto:
println( foto.width, foto.height );

// dibuja un rectángulo con las mismas dimensiones que la foto:
rect( 10, 10, foto.width, foto.height);

4 Ejemplos

4.1 Carga y muestra una imagen

// variable con nuestra foto
PImage foto;

void setup(){
    size( 640, 480 );

    // carga una imagen
    foto = loadImage( "mi foto.jpg");

    // redimensiona la imagen al tamaño del canvas
    foto.resize( width, height );
}

void draw(){
    // dibuja la imagen en el lienzo
    image( foto, 0, 0 );
}

4.2 Recortes

// variable con nuestra foto
PImage foto;
PImage recorte1;
PImage recorte2;

void setup(){
    size( 640, 480 );

    // carga una imagen
    foto = loadImage( "mi foto.jpg");

    // redimensiona la imagen al tamaño del canvas
    foto.resize( width, height );

    // obtén la mitad izquierda de la foto
    recorte1 = foto.get(0, 0, 320, 480);

    // obtén la mitad derecha de la foto
    recorte2 = foto.get(320, 0, 320, 480);
}

void draw(){
    // dibuja la mitad izquierda del lado derecho:
    image( recorte1, 320, 0);

    // ... y la mitad derecha del lado izquierdo
    image( recorte2, 0, 0);
}

4.3 Imagen como pincel, con tecla para guardar resultado

// variable con nuestra foto
PImage foto;
// variable para el "pincel"
PImage recorte;

void setup(){
    size( 640, 480 );

    // carga una imagen
    foto = loadImage( "mi foto.jpg");

    // obtén un recorte de la imagen
    recorte = foto.get( 0, 0, 100, 100);

    // cambia el modo de dibujo de imagen
    // para que las coordenadas x,y sean las del centro
    imageMode( CENTER );
}

void draw(){
    // dibuja el recorte con su centro en mouseX, mouseY
    image( recorte, mouseX, mouseY );
}

void keyPressed(){
    // guarda 'resultado.png' al presionar la tecla 'g'
    if( key == 'g' ){
        save("resultado.png");
    }
}

4.4 Algunas otras ideas