8. Multimedia

8.3. Imágenes

Una vez que ya sabemos cómo lidiar con archivos externos en P5, trabajar con imágenes nos resultará muy sencillo. Al igual que sucedía con las tipografías externas, podemos enlazar en nuestro sketch imágenes que tengamos en nuestro propio sistema.

Para cargar imágenes desde nuestro propio sistema, debemos seguir el mismo proceso que al cargar fuentes. P5 acepta distintos formatos, entre los que encontramos los habituales JPG, PNG, GIF e incluso SVG. En el caso de las imágenes en PNG, GIF o SVG también podremos usar imágenes que tengan transparencia.

Lo primero que debemos hacer es obtener la URL de la imagen que queramos utilizar de la misma manera que lo hicimos con la tipografía. Una vez que la tengamos, la usaremos dentro del método loadImage() para cargarla en nuestro sketch y posteriormente utilizaremos image() para dibujarla en el canvas. Con las imágenes nos enfrentamos al mismo problema que con las tipografías o con cualquier otro archivo externo: al tener que ser descargadas por el navegador, debemos poner el código que las descarga dentro de la función preload() para que el programa no se ejecute hasta que la imagen se haya descargado por completo.

let img;

function preload() {
  img = loadImage("/filemanager/source_repo/ccasadom/croissant.jpg");
}

function setup() {
  createCanvas(400, 400);
}

function draw() {
  background(200);
  image(img, 0, 0);
}

Los parámetros que le pasamos a image() son, en primer lugar, la imagen que hayamos cargado con loadImage() y, a continuación, las coordenadas x e y donde queramos dibujar la imagen. Esta coordenada será la esquina superior izquierda de la imagen. Por defecto, el tamaño de la imagen será su tamaño original.

Si queremos redimensionar la imagen, podemos hacerlo añadiendo otros dos parámetros para establecer el ancho y el alto con el que queremos que se muestre la imagen. Debemos tener en cuenta que de esta manera podemos alterar la ratio de aspecto de la imagen, estrechándola o alargándola. Para evitar esto, podemos hacer uso de las propiedades width y height, que podemos extraer de cualquier imagen para conocer su anchura y altura y luego multiplicar estos valores por un único valor para asegurarnos de que mantenemos sus proporciones originales.

Atributos de las imágenes

Para cambiar el modo como se muestran las imágenes, podemos utilizar varios atributos. Podemos, como también puede hacerse con círculos, arcos y rectángulos, cambiar el punto desde el que dibujamos la imagen usando imageMode(), que acepta los parámetros CORNER (el modo por defecto), CORNERS y CENTER.

También podemos cambiar el «tinte» de la imagen con el método tint(), al que le pasamos como parámetro el color con el que queremos tintar la imagen. Este color puede tener transparencia, por lo que si queremos que nuestra imagen tenga transparencia, podemos usar un tint() con blanco y el alpha que queramos. Para volver a los valores por defecto, podemos utilizar noTint().

Filtros

P5 también nos ofrece una serie de filtros que podemos aplicar a nuestro canvas mediante el método filter(), que acepta como primer parámetro el filtro que queremos aplicar y en función de cuál elijamos podremos añadir un segundo parámetro para controlar el efecto. Las opciones de filtros que tenemos son: THRESHOLD, GRAY, OPAQUE, INVERT, POSTERIZE, BLUR, ERODE y DILATE. En la referencia de filter() se puede encontrar qué hace cada uno de los filtros y si tiene un parámetro opcional para controlarlo. Algunos de estos filtros suponen una considerable carga de computación para ejecutarse en tiempo real, por lo que es aconsejable que los usemos con moderación. En muchas ocasiones, podremos procesar la imagen en algún software de retoque fotográfico antes de subirla a nuestro sketch para alcanzar el resultado deseado. También debemos tener en cuenta que estos filtros se aplican a todo el canvas, no solo a la imagen en sí.

Modos de fusión

En P5 también encontramos diferentes modos de fusión para nuestro canvas, que funcionan de manera muy similar a los modos de fusión que podemos aplicar a las capas de softwares como Photoshop o Gimp. Para cambiar el modo de fusión utilizaremos el método blendMode(), que acepta como parámetro las siguientes opciones: BLEND (por defecto), ADD, DARKEST, LIGHTEST, DIFFERENCE, EXCLUSION, MULTIPLY, SCREEN, REPLACE, REMOVE, OVERLAY, HARD_LIGHT, SOFT_LIGHT, DODGE, BURN y SUBTRACT. Todos funcionan de la misma manera que sus homónimos en otros softwares. Del mismo modo que los filtros, se aplican a todo el canvas.

Información de color

Las imágenes que cargamos en nuestros sketches pueden servirnos para otros propósitos distintos al de simplemente dibujarlas en nuestro canvas. También nos pueden servir para extraer su información de color y utilizarla de manera creativa. El método get() aplicado a cualquier imagen nos permite establecer qué color tiene la imagen en las coordenadas (x, y) que le pasemos como parámetro.

En la figura 112 cargamos una imagen y en el draw() utilizamos get() para extraer la información de color de esta en la posición actual del ratón, con el fin de utilizarla como relleno de un círculo que dibujamos en el centro de la pantalla.

No es necesario que dibujemos la imagen, con cargarla en el sketch es suficiente. Veamos un par de ejemplos en los que hacemos uso de esta información de manera creativa incorporando conceptos que ya hemos visto anteriormente en la asignatura: bucles for, aleatoriedad e interacción.

Utilizando bucles podríamos crear nuestro propio efecto para «pixelar» una imagen. Primero, deberemos crear un par de bucles anidados que recorran el canvas en horizontal y vertical. A continuación, en cada paso del bucle extraemos la información de color del punto concreto en el que nos encontremos y, por último, utilizamos esta información de color para dibujar un cuadrado relleno del color presente en esa coordenada.

En el ejemplo de la figura 113 también se ha añadido un elemento interactivo: el desplazamiento en x e y en cada paso del bucle y el tamaño del cuadrado que dibujamos viene determinado por la posición en el eje x del ratón. De esta manera, creamos un efecto interactivo en el que los píxeles serán mayores o menores según la posición de nuestro ratón.

Veamos otro ejemplo del uso de la información de color, pero esta vez usando aleatoriedad.

En este ejemplo hemos cargado una imagen y en cada frame estamos eligiendo un punto al azar de la imagen para extraer la información de color y dibujar un círculo en esa posición con el fin de crear un efecto puntillista. Para darle mayor organicidad al proceso de dibujado, se ha establecido un tamaño aleatorio de cada círculo. Según vaya pasando el tiempo y se vayan acumulando los círculos, la imagen se irá conformando.

Siguiendo en la línea del efecto puntillista, podríamos crear un «pincel» que nos permitiera ir revelando la imagen según el movimiento del ratón:

En esta ocasión lo que hacemos es que en cada frame creamos, a través de un bucle for, cinco círculos en posiciones aleatorias cercanas a la posición de nuestro ratón (utilizando mouseX y mouseY a los que sumamos un valor aleatorio que en este caso tiene un rango que va de –20 a 20). A continuación, extraemos la información de color de esos cinco puntos y dibujamos círculos de tamaños aleatorios en esas coordenadas.