Unidad 5 -Processing

 1. Agregar una imagen

Los formatos más conocidos de imágenes son los JPG y PNG. En Processing, generalmente utilizamos imágenes de tipo PNG para poder aprovechar la transparencia, pero también admite las de GIF, JPG y TGA.

Por defecto, Processing busca las imágenes en una carpeta llamada data que tenés que crear dentro de la carpeta donde se guarda el sketch.

Para añadir una imagen al sketch debés utilizar una variable de tipo PImage, la función loadImage() para vincular una imagen y la función image() para mostrarla en pantalla.

Si la imagen está almacenada en la carpeta data, basta con escribir su nombre y extensión entre comillas como argumento de la función loadImage(); es decir, de esta forma:

Si la imagen no se encuentra en esa carpeta, deberás especificar la ruta. Por ejemplo:

C: > Users > Usuario > Desktop > imagen.png

Por otro lado, en la función imagen() tenés que especificar (en este orden y separados por ,):

Nombre de la variable PImage que querés mostrar,

Posición en x.

Posición en y.

ImageMode(CORNER); //valor por defecto.

ImageMode(CENTER); //utiliza los valores x,y como centro de la imagen.

Por defecto, los valores ingresados en los campos de la posición en x,y, que recibe la función, se utilizan para ubicar la esquina superior izquierda de la imagen. Para cambiar esto podés recurrir a la función imageMode(), como se ve a continuación.

Otra forma de visualizar la imagen es utilizarla como fondo solo si el tamaño de la ventana coincide con el tamaño de la imagen. En ese caso se usa la función background() y entre paréntesis, en vez de colocar un color, se inserta la variable de tipo imagen:

Podés descargar la imagen que se utilizó en los programas acá

2. Mover una imagen

Para mover una imagen utilizá las mismas técnicas de las unidades anteriores, como se ve en el siguiente ejemplo:

3. Cambiar el tamaño de una imagen

En Processing, existen métodos para obtener el tamaño de una imagen:

Para obtener el ancho: nombreDeLaVariableImagen.width,

Para obtener el alto: nombreDeLaVariableImagen.height.

Lo mismo podés imprimir en la consola con el método visto en la segunda unidad:

Para cambiar el tamaño de una imagen tenés dos opciones:

Especificarlo en la función image(),

O utilizar la función resize().

En la función image(), luego de los valores de la posición en x,y, se agregan dos valores más, que se corresponden con el ancho y alto en que se mostrará. En este caso, se debe prestar atención al tamaño de la imagen original para que no se deforme.

Por ejemplo la imagen destello.png tiene un tamaño de 300px x 300px, por lo que los valores deben coincidir como en estos casos:

No es recomendable mostrarla en un tamaño mayor que el de la imagen porque comenzará a pixelarse. 

Por otro lado, la función resize() tiene ventajas si no deseás hacer cuentas y querés mantener las proporciones.

Para utilizar esta función, tenés que escribir el nombre de la variable de tipo imagen, un punto antes de la función y entre paréntesis especificar el ancho y el alto deseados:

nombreDeLaVariable.resize(ancho, alto);

Si en uno de los argumentos colocás un 0, a diferencia de la opción anterior, la imagen no tendrá un ancho o alto de 0, sino que tomará el ancho o alto especificado y adaptará el restante manteniendo las proporciones.

4. Filtros

Si bien es posible programar filtros de forma manual, Processing trae algunos ya incorporados que se 

pueden utilizar de la siguiente forma: 

nombreDeLaVariable.filter(NOMBREDELFILTRO);

Mientras que estos filtros pueden utilizarse como los anteriores o agregando algún valor: 

THRESHOLD (umbral): convierte la imagen a blanco y negro a partir de un valor de umbral que por defecto es 0.5. Los valores están entre 0 y 1.

 

Y finalmente, en el caso del filtro POSTERIZE (posterizar), además del nombre se debe especificar un valor entre 2 y 255. En este caso, se van reduciendo la cantidad de colores de la imagen como se ve a continuación.

Dato: si utilizás más de una instrucción, podés aplicar más de un filtro a una misma imagen. Por ejemplo:

  imagen.filter(BLUR);

  imagen.filter(GRAY);

También es posible tener más de una variable de tipo imagen en un mismo programa.

5. Instalar librería (video)

Antes de agregar un video o la imagen de una cámara que ya esté en la computadora, es necesario instalar una librería en el entorno. Para ello, guiate con este tutorial:

6. Reproducir video

Una vez que instalaste la librería, podés incorporar videos al sketch. A continuación, te mostramos cómo. En este caso utilizamos el video de los ejemplos de la librería instalada y, al igual que las imágenes, debe estar en la carpeta data. 

De modo que tanto para incorporar videos como imágenes de una cámara web, se utiliza la función image(variableImagen,x,y), por lo que también se pueden usar en estos casos todos los filtros para las imágenes. 

8. Desafío 5

Finalmente, en este desafío te invitamos a que incorpores un video o varias imágenes a tu programa. 

Si vas a utilizar arreglos, te recomendamos que uses imágenes, dado que al cargar varios videos se puede dificultar la visualización final.

Recordá que incluir muchos filtros o imágenes de gran tamaño puede ralentizar la ejecución del programa.

Volver a Processing