Desde Processing podemos abrir imágenes de mapas de bits (.jpg, .png) y dibujarlas en el canvas.
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.
Estas funciones de Processing permiten abrir/cargar y mostrar imágenes.
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'
loadImage("foto del día.jpg");
foto = }
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);
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
.
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" );
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.
Cambia las dimensiones de la imagen original a w
pixeles de ancho y h
pixeles de alto.
// redimensiona la imagen a 640x480
resize( 640, 480);
foto.// a partir de aquí, la imagen medirá 640x480
image(foto, 50, 50);
image(foto, 0, 0);
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
get(0, 0);
color esquina = foto.
// 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)
get( mouseX, mouseY ); color picker = foto.
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
get(0, 0, 100, 100); PImage recorte = foto.
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);
// variable con nuestra foto
PImage foto;
void setup(){
size( 640, 480 );
// carga una imagen
loadImage( "mi foto.jpg");
foto =
// redimensiona la imagen al tamaño del canvas
resize( width, height );
foto.
}
void draw(){
// dibuja la imagen en el lienzo
image( foto, 0, 0 );
}
// variable con nuestra foto
PImage foto;
PImage recorte1;
PImage recorte2;
void setup(){
size( 640, 480 );
// carga una imagen
loadImage( "mi foto.jpg");
foto =
// redimensiona la imagen al tamaño del canvas
resize( width, height );
foto.
// obtén la mitad izquierda de la foto
get(0, 0, 320, 480);
recorte1 = foto.
// obtén la mitad derecha de la foto
get(320, 0, 320, 480);
recorte2 = foto.
}
void draw(){
// dibuja la mitad izquierda del lado derecho:
image( recorte1, 320, 0);
// ... y la mitad derecha del lado izquierdo
image( recorte2, 0, 0);
}
// variable con nuestra foto
PImage foto;// variable para el "pincel"
PImage recorte;
void setup(){
size( 640, 480 );
// carga una imagen
loadImage( "mi foto.jpg");
foto =
// obtén un recorte de la imagen
get( 0, 0, 100, 100);
recorte = foto.
// 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");
} }
mouseX, mouseY
. No muestres la imagen original.for
.