Bien, vamos a seguir trabajando con imágenes en Processing y en este vídeo vamos a aprender
a trabajar con imágenes y con Arrays. Vamos a empezar con ejemplos sencillos y, bueno,
vamos a ir complicándolos un poco más. Tenemos aquí un sketch en blanco y vamos
a guardarlo en nuestro escritorio. Voy a llamarlo code1102. Bien, y tenemos aquí un par de
carpetas de imágenes. Vamos a empezar a trabajar con las mismas que en el vídeo anterior y
lo que voy a hacer es utilizar, en esta ocasión, vamos a utilizar la A y la B. Así que vamos
a coger las dos imágenes, las arrastramos sobre nuestro sketch y, bueno, estas imágenes
ya están aquí en nuestra carpeta Data. Bueno, lo primero para utilizarlo tenemos que crear
un objeto PImage. Vamos a llamarlo A y directamente vamos a cargar nuestra imagen. Y entre comillas
tenemos que poner el nombre de nuestro archivo. Uno se llama ajpg y el B se llama b.jpg. Vale,
ya tenemos cargadas estas dos imágenes en memoria. Vamos a hacer directamente un tamaño
de pantalla. Este sketch no va a tener animación. Voy a decirle que sea de 1000x1000. Bueno,
una cosa que debéis saber es que directamente en nuestro background nosotros podemos cargar,
además de color, podemos cargar una variable de imagen y vamos a verlo ahora mismo. Si
le damos al play, fijaos que ya directamente nos carga la imagen A. Si aquí le pusiésemos
B, bueno, nos cargaría la imagen B. ¿Qué sucede cuando nuestro tamaño de pantalla
es diferente a la imagen que estamos cargando? Bueno, pues directamente nos da un error,
así que para cargar en el background una imagen debe de ser de exactamente el mismo
tamaño en píxeles que nuestro sketch. Si no, nos da un error. ¿Vale? No sucede lo
mismo cuando cargamos una imagen. De vez en cuando, al mostrar una imagen, como ya vimos
en el vídeo 6.2, podemos elegir alterar su apariencia. Podemos hacerlo con la función
tint, que tint esencialmente es el equivalente de imagen a la función fill de color y funciona
exactamente igual. Si, por ejemplo, le damos un solo parámetro y cargamos nuestra imagen,
vamos a cargarla A, vamos a decirlo que lo ponga en el 00 y vamos a ver qué pasa. Bueno,
directamente nos ha oscurecido la imagen. Si lo ponemos a 255, aparecerá con el máximo
brillo o con el brillo original que tiene nuestra imagen. Esto es con un solo parámetro. Si usamos dos parámetros,
lo que va a suceder con tint es que va a hacer una transparencia y nos deja ver tanto el
background, que en este caso sería la B, como la imagen semitransparente de la A. Cuanto
mayor sea el valor del segundo parámetro, menos transparente se verá y más cubrirá
nuestra imagen. ¿Qué sucede si le metemos otros valores? Bueno, si le metemos, por ejemplo,
a ver que me he equivocado aquí, y esto lo voy a poner a 0, bueno, a 0 no, a 255, nos
va a tintar la imagen A de color rojo. Tint lo que va a hacer es, como los programas se
leen de arriba a abajo, bueno, pues background lo va a dibujar tal y como viene la imagen
original, pero a partir de tint lo que va a hacer luego con las siguientes imágenes
es dibujarlas o tintarlas del color que nosotros le apliquemos por parámetros. Aquí si queremos
modificar el color, bueno, simplemente podemos ir modificando estos parámetros para cambiar
el color. Voy a ponerlo a 155 para verlo un poco mejor. Aquí, súper tintado, 155. Dependerá
de cada imagen. Bueno, pues esta como es verde, no le estamos dando nada de verde, pues pierde
mucha luz. Bueno, aquí ya estamos utilizando dentro de nuestro sketch dos imágenes. Podríamos
desear cargar, bueno, todas las imágenes. Tenemos en total seis. Y bueno, una solución
para esto sería utilizar un Array. Entonces, ¿cómo haríamos este ejercicio pero con Arrays?
Bueno, pues vamos a crear un nuevo sketch, uno nuevo. Lo vamos a cerrar, lo vamos a guardar
y está igual, lo vamos a salvar en nuestro escritorio. Vale, empezamos con un sketch
en blanco. Ya tenemos aquí la carpeta. Vamos a arrastrar todas las imágenes a nuestro
sketch. Vamos a crear lo primero un P-Image. ¿Y cómo creamos un Array? Bueno, pues usando
estos corchetes. Lo primero creamos un Array de imágenes y le decimos New P-Image. Y aquí
debemos decir el tamaño. ¿Qué tamaño va a tener nuestro Array? Pues nuestro Array
va a ser de 6. Esto lo podemos meter en una variable, así que podemos poner que máximo
imagen va a ser a 6. Entonces aquí podemos poner este valor va a ser máximo imagen.
Y luego nos podemos venir a hacer un Setup, Void Setup. Vamos a hacer ya un Void Draw.
¿Y qué hay que hacer aquí? Bueno, lo primero vamos a definir un tamaño de ventana de visualización
de 1000x1000. Y aquí podemos empezar a ir cargando todas nuestras imágenes. Los Arrays
empiezan por cero y vamos metiéndolo a imagen. ¿Qué imagen queremos cargar? La primera se
llama AJPG. Vamos a hacer un corta pega para ir rápido. Hacemos 1, 2, 3, 4 y 5. Y aquí
vamos a cargar la A, la B, la C, la D, la E y la F. Vale, pues ya tenemos nuestro Array
con todas las imágenes cargadas. ¿Cuál es el siguiente paso? Bueno, pues para que
se muestren en la ventana de visualización debemos utilizar la función Image, porque
aunque estén cargadas no las estamos llamando. ¿Cómo podemos hacerlo? Bueno, pues llamamos
a nuestro Array y aquí le vamos a definir el número, el índice de nuestro Array que
queremos que muestre. Si queremos que muestre la A, bueno, pues tendríamos aquí un cero.
Y si vamos a reproducir, bueno, pues ya nos muestra la A. Si queremos que nos muestre
la D, bueno, pues usaríamos un 3. En este caso nos muestra la D. Si queremos que muestre
la C, pues la C. Vale, esto funciona, pero bueno, en realidad no es muy elegante. Imaginaos
que tenemos que cargar 100 imágenes. Bueno, esto sería un poco problemático. Hay un
par de soluciones que podemos utilizar. La primera de ellas podría ser usar un Array
de String, un Array de cadenas de texto, donde vamos a guardar los nombres de archivo. ¿Y
esto cómo lo vamos haciendo? Bueno, pues simplemente, entre comillas, ponemos el nombre
de archivo y separado por comas vamos poniendo todos los nombres de archivo. Vale, pues ya
tendríamos nuestro Array con todos los nombres de archivo. Y el paso siguiente sería crear
un bucle. Vale, vamos a borrar todo esto, porque el bucle lo que va a hacer en realidad
es ahorrarnos un poco todo ese texto. Bueno, in i es igual a cero. Si i es menor que filenames.blend,
pues sumamos uno a i. Y aquí debemos decirle que imágenes, bueno, pues el índice es igual
a loadImage. ¿Qué es lo que vamos a cargar aquí como nombre de archivo? Bueno, pues
vamos a cargar filenames y aquí le metemos el índice en i. De esta manera, bueno, cargaríamos
todos los nombres de archivo, vale, y sería un poco más elegante. Ahora, si ponemos,
por ejemplo, cuatro aquí, bueno, vemos que esto funciona exactamente igual. Si ponemos
cinco, pues funciona exactamente igual. Habría un sistema que sería un poco más efectivo
y es modificando el nombre de lo que son nuestros archivos. Si los enumeramos del cero en adelante,
bueno, podemos utilizar un bucle for sin necesidad de guardar todo ello en un string, porque
esto, hacer esto, al final es igual de trabajoso que tener que ir asignando a cada una de las
variables con su nombre de imagen. Entonces, ¿cómo podríamos hacer esto? Vale, pues
cogemos i más dos y arrastramos estas seis imágenes. Si nos vamos aquí al código,
vamos a tener duplicado, vale, así que para que no nos liemos vamos a borrar las que están
nombradas desde la A a la F, vale, nos quedamos solo con letra cero, uno, dos, tres, cuatro
y cinco. Vale, entonces esto lo vamos a borrar y aquí vamos a modificar este bucle for.
En realidad necesitamos saber imágenes, o sea, la cantidad de imágenes, y aquí le
vamos a decir que la imagen va a ser igual a letra guión bajo más i más entre comillas
la extensión jpg. De esta manera, sin necesidad de ir nombrando de nuevo o llamando con un
string a todas las imágenes, bueno, pues nombrándolas de una manera un poco más inteligente
no necesitamos escribir tanto código. De esta manera esto vuelve a funcionar perfectamente.
Para hacer esto un poco más interactivo vamos a decir aquí, bueno, pues que vamos a crear
una nueva variable, vamos a decir que image index es igual a cero y aquí le vamos a decir
que void mouse preset. Vamos a cambiar cada vez que pulsemos el ratón, vamos a cambiar
la imagen que se está mostrando. Esto lo vamos a hacer con imagen index, que es esta
variable que hemos creado aquí, que está inicializada a cero. Vamos a decirle que va
a ser igual a un random, vamos a meter un número aleatorio, que va a contener todas
las imágenes que estén guardadas en nuestro array. Aquí nos falta, nos da un error porque
el random nos va a sacar números aleatorios, entonces lo que debemos hacer aquí es convertir
estos números aleatorios en números enteros y esto lo conseguimos poniendo aquí int y
encerrando todo esto entre paréntesis. Estos números aleatorios que nos va a devolver
Processing en realidad los va a convertir en números enteros. De esta manera ya se
van a quedar asignados a imagen index. Vale, pues ahora lo que vamos a hacer es coger esta
variable y utilizarla aquí como parámetro de índice de lo que son nuestras imágenes.
Entonces ahora, cada vez que pulsemos el ratón, van a ir saltando de manera aleatoria por
todas nuestras imágenes. ¿Cómo podríamos hacer que esto fuese correlativo? Bueno, pues
esto sería cuando el ratón ha sido pulsado. Bueno, pues decimos que imagen index que le
sume 1. Vale, voy a comentar un momento esta línea y aquí le decimos que si imagen index
es mayor o igual que imágenes.len, en ese caso imagen index es igual a 0. Vamos a ver
si esto funciona. Empezamos por la A, B, C, D, E, F, A. Y vuelve otra vez el ciclo al
ciclo inicial. Bueno, pues hasta aquí llega este breve tutorial. Espero que hayáis podido
aprender algo con nosotros. Nos vemos muy pronto en el siguiente vídeo. Muchas gracias
y hasta luego.
ARoom, Escuela de Nuevas Tecnologías para Mentes Creativas.
ARoom, Escuela de Nuevas Tecnologías para Mentes Creativas.

Texto extraído del video original PROCESSING: 11.1 Array de Imágenes [En español]https://www.youtube.com/watch?v=ttWyc2A1puE Utilizando Whisper de openAI - https://github.com/openai/whisper