jardínBit

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

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

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.

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.

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.

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

// "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

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

Imágenes: Abrir, mostrar, leer