Ejercicio para la próxima semana: Subir al blog un sketch + imagen realizado con todos o algunos de los contenidos que se verán a continuación. Se pueden combinar con lo visto anteriormente.

Carga y edición de imágenes bitmap en Processing

En la primera clase en que usamos Processing, utilizamos la función loadImage() que cargaba una imagen jpg dentro de una variable del tipo PImage. PImage es entonces un tipo de dato como lo es int (para almacenar enteros), float (para almacenar decimales), boolean (para almacenar los valores verdadero o falso), char (para almacenar caracteres alfanuméricos), etc. PImage es un tipo de dato para almacenar imágenes.

En esta sesión, se profundizará un poco más en el uso de este tipo de variable y la manipulación de imágenes bitmap (o raster).

Como ya se sabe, la imagen digital está compuesta por pixeles. Si una imagen es de 1280 x 1024 pixeles, tendrá entonces un total de 1.310.720 pixeles, es decir, 1,3 Megapixeles.

Otro aspecto importante de una imagen digital es la profundidad de color (color depth). Si la profundidad de color de una imagen es de 1bit, cada pixel puede tener el valor de 1 ó de 0, normalmente esto representa a blanco o negro. Si la profundidad de color es 4, cada pixel puede tener uno de 16 valores. Si la PdC es de 8 bits, entonces el pixel puede tener uno de 256 valores.

Cuando se habla de una imagen de 24 bits, normalmente se está hablando de una imagen que tiene 8 bits en el canal rojo, 8bits en el verde y 8 bits en el azul (imagen RGB). Esto da como resultado 24 bits en total. Más información acerca de espacios de color y profundidad de color:
http://en.wikipedia.org/wiki/Color_depth
http://es.wikipedia.org/wiki/Profundidad_de_color
http://www.cambridgeincolour.com/tutorials/bit-depth.htm
http://www.cambridgeincolour.com/tutorials/digital-camera-pixel.htm
http://en.wikipedia.org/wiki/Pixel
http://es.wikipedia.org/wiki/P%C3%ADxel

Al trabajar con imágenes bitmap en Processing, recuerda que el archivo de imagen debe estar localizado en una carpeta con el nombre “data” dentro de la carpeta del Sketch que la esté llamando.
También es importante recordar que el archivo de la imagen puede ser importado a través del menú “Sketch” –> “Add File”. De esta manera, el archivo de imagen quedará localizado donde corresponde para ser llamado por la variable del tipo PImage de tu sketch.

Las extensiones de archivo de imagen aceptados por Processing son:
– jpg (profundidad de color soportada: hasta 24bits, no soporta transparencia)
– gif (profundidad de color soportada: hasta 8bits con transparencia de 1bit)
– png (profundidad de color soportada: hasta 24bits, con transparencia de 8bits)
Recuerda optimizar la imagen en cuanto a su tamaño y resolución antes de usarla en Processing. De esta forma, no se estará sobre exigiendo al procesador.

Otra función que se utiliza al trabajar con imágenes bitmap, es image(), gracias a esta, la imagen se visualiza.

Tenemos entonces, por ahora, tres elementos importantes al momento de usar imágenes bitmap en Processing:

PImage: Tipo de dato para cargar imágenes en el programa
loadImage(): Función que carga la imagen en una variable del tipo PImage. El parámetro que va dentro de loadImage es el nombre del archivo que está cargando. Éste debe ser exáctamente igual, cuidando las mayúsculas, minúsculas y espacios entre caracteres.
image(): Función que expone (display) la imagen, la hace visible. Los parámetros que van dentro de image(), son el nombre de la variable, la ubicación x y la ubicación y. También se puede agregar a continuación el ancho y el alto, pudiendo modificar las dimensiones de la imagen original.

Quedará la estructura básica así:

Luego un ejemplo de carga de imagen que cambia su tamaño según la posición del mouse:

tint() y noTint()
A través de la función tint(); se puede cambiar el color de los pixeles en una imagen. Para hacer que una línea o bloque no sea afectado por tint, se debe escribir noTint();
En el siguiente ejemplo se puede ver la comparación entre dos imágenes, una con tint y la otra sin.

Para dar transparencia a una imagen sin cambiar el color, habrá que ajustar el primer parámetro de tint() a 255 que correspondería a blanco en el modo de color por defecto de Processing y el segundo parámetro ajustará el valor del canal alfa o transparencia.
A continuación un ejemplo que combina el uso de la función tint() para cambiar la transparencia de la imagen y la repetición de esa imagen por medio de un ‘ciclo for’.

Cómo se mencionó antes, las imágenes png y gif pueden guardar transparencia, por lo que si se carga una imagen con estas características en Processing, la transparencia será respetada:

get() y set()
Cuando un programa de Processing se inicia, la ventana se abre al tamaño requerido en size(). El programa gana control sobre el área de pantalla y ajusta cada valor de color para cada pixel.
La función get() puede leer el color de cada pixel en la ventana de display. Puede también tomar como referencia la ventana completa o una porción de esta. Existen tres versiones de esta versión:

get()
get(x,y)
get(x, y, width, height)

En el siguiente ejemplo sólo se usa get() sin parámetros. Esto hace que se haga una copia en la memoria de la ventana de visualización completa, como cuando uno hace un pantallazo (ImprPant) de la ventana del computador en Windows.

 

Podemos repetir este mismo sketch, pero con una imagen jpg:

 
A continuación un sketch en donde se toma el color de un pixel específico de la imagen bitmap cargada. En el ejemplo que se muestra a continuación, el cuadrado que aparece en la esquina superior izquierda, contiene el color del pixel ubicado en las coordenadas x=20 e y=30.

 
Otro ejemplo que agrega interactividad al ejemplo anterior, es rellenar con el color en donde esté ubicado el puntero del mouse. Esto es a través de mouseX() y mouseY():

 

Podemos también integrar la lectura de pixeles con un ciclo for. En el ejemplo a continuación, se está tomando la línea de pixeles en base a la ubicación de mouseY. Se agregó además la función constrain() que posibilita restringir la cantidad de valores de muestra en el eje “y” que tomará mouseY. También aparece en este sketch el tipo de dato “color”.