---
title: "Imágenes: Abrir, mostrar, leer"
---

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

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


# Funciones

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

## loadImage( )

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

```java
// declara variable de tipo PImage
PImage foto;

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

## 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`)

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

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

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

```java
save( "composición.png" );
```


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

## .resize( w, h ) 

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

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

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

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

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

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

## .width, .height

Atributos que corresponden al ancho y alto de la imagen.

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

# Ejemplos

## Carga y muestra una imagen

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

## Recortes

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

![](/img/img-ejemplo-recortes.jpg)

## Imagen como pincel, con tecla para guardar resultado

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

![](/img/img-ejemplo-pincel.jpg)

## Algunas otras ideas

* Dibuja con un círculo que siga al mouse y que obtenga su color del pixel en `mouseX, mouseY`. No muestres la imagen original.
* Realiza varios recortes y reacomódalos.
* Alterna recortes de dos imágenes distintas.
* Desfasa recortes.
* Toma un pequeño recorte de imagen (por ejemplo de 1 pixel de ancho) y repítelo varias veces con un ciclo `for`.
