1. Tratamiento de imágenes de mapa de bit
Primero recordaremos algunos conceptos generales sobre imágenes digitales:
- Una imagen de mapa de bits esta formada por pixels.
- Si es una imagen de 1280 x 1024 tiene 1,310.720 pixels (1,3 Mpixels).
- La profundidad de color es el número de valores que definen cada pixels, 2 valores definen el blanco o negro, una profundidad de color de 8 pixels define 256 valores, y una profundidad de color de 24 bits de uso corriente en las tarjetas gráficas actuales define 16,777,216 de colores.
- Processing puede leer los formatos: GIF, JPEG, y PNG.
Formato | Extensión | Profundidad de color | Transparencia |
---|---|---|---|
GIF | .gif | de 1 a 8 bit (máx 256 colores) | 1 bit |
JPEG | .jpg | 24 bit (color completo) | no tiene |
PNG | .png | de 1 a 24 bit (color completo) | 8 bit (256 niveles de transparencia) |
Con Processing se pueden leer las imágenes y cambiar su tamaño, posición, opacidad y color.
Hay un tipo de datos que se llama PImage que almacena las variables de la imagen. Primero es necesario leerla con la función loadImage() asegurándonos de incluir la extensión como parte del nombre (ej.: “coche.gif”, “gato.jpg”, “casa.png”). Debemos asegurarnos que la imagen está en la carpeta data para que pueda ser leída por Processing.
En los siguientes ejemplos copia en el IDE de Processing el código y comprueba el resultado.
Modifica las variables para ver cómo afecta a la visualización.
Cargar la imagen
Para poder utilizar una imagen hay que seguir los siguientes pasos:
- Añadir la imagen a la carpeta data que se crea junto a la ubicación del archivo del programa guardado. Esto se puede hacer de una de las siguientes formas:
- Arrastrando la imagen o imágenes a la ventana de programación.
- En el menú Sketch/ Añadir archivo.
- Colocándola directamente en la carpeta data del proyecto si ya existe.
- Crear una variable PImage para almacenar la imagen.
- Cargar la imagen dentro de la variable con loadIimagen().
- En el void draw incluimos la función:
image (nombre de la imagen, posición x, posición y, dimensión x, dimensión y).
- posición x, posición y es la posición de la esquina superior izquierda de la imagen.
- Si no se pone dimensión x, dimensión y la imagen se muestra con su tamaño por defecto.
Descarga la imagen para realizar el sketch
Dar color
La function tint(). Se usa de manera similar a lo que ya hemos visto para fill() y stroke(), pero afecta exclusivamente a las imágenes.
tint(gris)
tint(gris, alpha)
tint(valor1, valor2, valor3)
tint(valor1, valor2, valor3, alpha)
tint(color)
El efecto se puede anular con la function noTint()
En este ejemplo definimos tres colores que luego asignamos con tint() a la imagen.
Transparencia
En este ejemplo se han asignando valores alpha de transparencia a una imagen jpg.
Imágenes gif y png guardan la información de transparencia cuando las leemos con Processing,
Movimiento
Una forma de animación con imágenes es moverlas.
En el siguiente ejemplo movemos una imagen de izquierda a derecha y de arriba a abajo. Regresa a la izquierda cuando desaparece de la pantalla.
Transformación
Las funciones de transformación también se pueden aplicar a las imágenes. Se pueden trasladar, rotar y escalar. En el siguiente ejemplo una imagen se traslada al centro de la pantalla y se rota alrededor de centro.
Opacidad
Las imágenes también pueden ser animadas cambiando sus atributos de dibujo. En el siguiente ejemplo la opacidad de una imagen se incrementa 0.5 en cada frame con lo que se consigue un efecto fadein.
Lumen dice Un par de trucos
1. Los programas de Processing también se pueden ver en pantalla completa (conocido como “modo de presentación” en Processing). Este está disponible a través de la opción de menú: Sketch→ Presentar (o shift-click en el botón de ejecución). Presentación no cambia el tamaño de la resolución de su pantalla. Si desea que el boceto para cubrir toda la pantalla, debe utilizar sus dimensiones de la pantalla de size().
fullScreen()
2. Esta función es nueva para Processing 3.0. Abre un boceto usando el tamaño completo de la pantalla de la computadora. Esta función debe ser la primera línea en setup() . Las funciones size() y fullScreen() no se pueden usar en el mismo programa, solo se puede elegir una.