En este miniproyecto vas a crear un reloj donde los números estarán hechos a partir de fotografías de notas adhesivas o Post-it. Para ello, aprenderás a utilizar imágenes en tus programas y almacenarlas en arrays (luego entenderás lo que son). De nuevo, iremos avanzando paso por paso.
-
Añadir imágenes
El primer paso es dar al programa acceso a la imagen. Para ello, primero descarga la imagen aquí. A continuación, debes arrastrar el fichero de la imagen en el IDE de Processing, como muestra la siguiente captura.
La imagen se almacena en una subcarpeta del programa llamada data. Esta captura de pantalla muestra la estructura de los ficheros donde puedes encontrar el archivo de la imagen. También puedes encontrarlo abriendo la carpeta desde el menú ‘Sketch>Mostrar carpeta del Sketch’. -
Mostrando una imagen
En este programa vamos a crear una variable Pimage para mostrar una imagen.
Código: source: http://verkstad.cc/urler/ctc-g-b1-p-2-1
Resultado
Al ejecutar el programa verás que muestra la imagen.
Comandos
- PImage imageName: crea una variable del tipo PImage llamada imageName. Una variable PImage puede almacenar una imagen.
- loadImage(imageFile): Carga la imagen imageFile desde el directorio de datos del programa. imageFile debe escribirse exactamente como se llama el archivo.
- image(imageName, x, y): Muestra la imagen PImage imageName. La esquina superior izquierda de la imagen se sitúa en las coordenadas x e y.
Cómo funciona
- Se crea una variable del tipo PImage llamada im.
- En la función setup(), se establece el tamaño de la ventana a 400 x 400 píxeles. El mismo tamaño que tiene la imagen empleada en el programa.
- La imagen photo.jpg, se carga y almacena en la variable im.
- En la función draw(), se muestra la imagen (im). La esquina superior izquierda de la imagen se sitúa en las coordenadas 0, 0 – la esquina superior izquierda de la ventana del programa. Dado que la ventana del programa y la imagen son del mismo tamaño, la imagen se ajusta perfectamente.
-
Mostrando dos imágenes
En este paso, añadirás otra imagen para mostrar dos, una al lado de la otra.
Descarga las fotos photo.jpg y photo2.jpg
Código: source: http://verkstad.cc/urler/ctc-g-b1-p-2-2
Resultado
El programa mostrará dos imágenes.
Cómo funciona
- Se declara la segunda variable del tipo PImage llamada im2.
- En la función setup() se establece el tamaño de la ventana a 800 x 400 píxeles, el doble de anchura que antes, para que quepan las dos imágenes.
- La imagen photo2.jpg se carga y se almacena en la variable im2.
- En la función draw(), im2 se muestra después de im. La esquina superior izquierda se sitúa en las coordenadas (400, 0) – la mitad superior de la ventana del programa, y a su vez, la esquina superior derecha im.
-
Arrays I
En este paso vamos a modificar el paso anterior y usaremos un array para mostrar dos imágenes. Primero, aprenderás qué es un array.
Un array es como una caja con muchos compartimentos. Cada compartimento puede almacenar varios objetos y todos los objetos de un mismo compartimento tienen que ser del mismo tipo. Cada objeto se puede encontrar referenciando el compartimento dónde está almacenado.
Por ejemplo, un array llamado «FruitContainer» (caja de fruta) tiene 3 compartimentos y puede contener 3 objetos. El compartimento 1 tiene un plátano, el compartimento 2 tiene una cereza y el compartimento 3 tiene una fresa. Si quieres encontrar la cereza, mirarás en el compartimento 2 de la caja. El orden de los arrays siempre empieza en 0, por lo que FruitContainer[0] contiene el plátano, FruitContainer[1] contiene la cereza y FruitContainer[2] la fresa.
Los arrays pueden ser de muchos tipos, como entero (int) o cadena (String). El máximo número de variables que pueden almacenar debe ser declarado con el array – 3 en el ejemplo anterior.
-
Arrays II
En este paso, vas a modificar el programa del paso 3 y usarás un array del tipo PImage para mostrar dos imágenes.
Código: source: http://verkstad.cc/urler/ctc-g-b1-p-2-3
Resultado
Como puedes ver, los cambios en el programa no cambian nada en el resultado.
Comandos
- datatype arrayName[ ] = new datatype[ numberOfElements ]: Declara un array del tipo datatype, con el nombre arrayName. numberOfElements es el número de elementos o compartimentos de datos.
- arrayName[ index ]: Accede al elemento index del array arrayName. El índice del primer elemento es 0, del segundo 1, etc.
- Puedes encontrar más información en inglés aquí.
Cómo funciona
- Se declara un array del tipo PImage para almacenar dos imágenes, en lugar de emplear dos variables del tipo PImage.
- En la función setup(), se carga la foto photo.jpg y se almacena en im[0], también se carga photo2.jpg y se almacena en im[1].
- En la función draw(), se muestra la imagen im[0] con la esquina superior izquierda en las coordenadas (0, 0).
- Se muestra la imagen im[1] con la esquina superior izquierda en las coordenadas (400, 0).
-
Usando dos Arrays
Para simplificar aún más la asignación de las variables imagen, el truco es almacenar los nombres de todas las imágenes en un array de strings (cadenas de texto). Aquí un ejemplo:
Código: source: http://verkstad.cc/urler/ctc-g-b1-p-2-4
Resultado
Como podrás observar cuando ejecutes este programa, el resultado es el mismo. Esta forma de programar te facilitará seguir trabajando ya que añadir más imágenes es muy sencillo.
Cómo funciona
- Se declara otro array de tipo String. Se llama imFile y almacena los nombres de los dos archivos de las imágenes; photo.jpg, y photo2.jpg.
- En la función setup(), se carga la imagen imFile[0] y se almacena en im[0].
- Se carga la imagen imFile[1] y se almacena en im[1].
-
El bucle for()
En este paso aumentarás el número de imágenes que se muestran de dos a cuatro. Todavía utilizarás los dos arrays de los pasos anteriores, pero para hacer el código aún más eficiente, emplearás el bucle for().
Descarga las imágenes one.jpg, two.jpg, three.jpg y four.jpg
Código: source: http://verkstad.cc/urler/ctc-g-b1-p-2-5
Resultado
Al ejecutar el programa, se mostrarán cuatro imágenes.
Comandos
- for(initializer; test; update){ statements }: Permite repetir una parte del código tantas veces como necesites. El bucle se ejecuta siguiendo los siguientes pasos:
- Ejecuta la inicialización: Normalmente, esto se hace con la declaración de una variable tipo entero llamada i.
- Comprueba si la condición en test es verdadera o falsa. Normalmente esto es comprobar si la variable i es mayor que un valor determinado.
- Si la comprobación es falsa, se sale del bucle. Si la comprobación es verdadera, se ejecuta el código entre llaves.
- Ejecuta la actualización. Normalmente esto es incrementar o decrementar la variable i en 1.
- Vuelve a repetir todo desde el paso 2.
Cómo funciona
- Se modifican los cuatro arrays para almacenar 4 elementos cada uno.
- En la función setup(), se establece el tamaño de la ventana a 800 x 800 píxeles para que quepan las cuatro imágenes.
- Se emplea un bucle for para cargar y almacenar los archivos de las imágenes en el array im:
- Se declara la variable i tipo entero y se inicializa a 0.
- Se realiza la comprobación, i<4, y es cierta, 0 es menor que 4.
- Se emplea la variable i para acceder a los elementos de los arrays. En la primera iteración, i es igual a 0, lo que significa que imFile[0] (one.jpg se carga y se almacena en im[0].
- Se ejecuta la actualización, es decir, se incrementa en 1 la variable i, i = i+1.
- Se realiza la comprobación de nuevo y sigue siendo verdadera, 1 es menor que 4.
- Se carga la imagen imFile[1], two.jpg, y se almacena en im[1].
- Se ejecuta de nuevo la actualización.
- Este bucle itera hasta que la variable i es igual a 4, entonces la comprobación será falsa, 4 es no menor que 4.
- En la función draw() las cuatro imágenes se muestran en una cuadrícula.
- for(initializer; test; update){ statements }: Permite repetir una parte del código tantas veces como necesites. El bucle se ejecuta siguiendo los siguientes pasos:
-
Múltiples imágenes
Puesto que el objetivo de este programa es crear un reloj, en este paso, mostrarás las diferentes imágenes que usarás después para representar el tiempo.
Descarga las imágenes que representan los números: 0, 1, 2, 3, 4, 5, 6, 7, 8 and 9.
Código: source: http://verkstad.cc/urler/ctc-g-b1-p-2-6
Resultado
El programa muestra las imágenes de los números 0 al 9.
Cómo funciona
- Se modifican los dos arrays para almacenar cada uno diez elementos.
- En la función setup(), se establece el tamaño de la ventana a 700 x 95 píxeles, para mostrar diez imágenes de 70 x 95 píxeles en fila .
- Un bucle for se ejecuta diez veces para cargar todos los archivos de las imágenes en el array im.
- En la función draw() otro bucle for se ejecuta diez veces para mostrar las imágenes:
- En la primera iteración, cuando la variable i es igual a 0, la imagen en im[0] se muestra con la esquina superior izquierda en las coordenadas (0, 0), ya que 70*0 = 0.
- En la segunda iteración, cuando la variable i es igual a 1, la imagen en img[1] se muestra en las coordenadas (70, 0), ya que 70*1 = 70.
- Esto se ejecuta continuamente hasta que la variable i es igual a 10.
-
El Tiempo
En este paso mostrarás la hora actual.
Código: source: http://verkstad.cc/urler/ctc-g-b1-p-2-7
Resultado
El programa muestra dos imágenes basadas en la hora actual.
Comandos
- hour(): Devuelve la hora actual como un número entre 0 y 23.
Cómo funciona
- En la función setup() se establece el tamaño de la ventana a 140 x 95 píxeles, para mostrar dos imágenes, una junto a la otra.
- En la función draw(), se declaran tres variables nuevas: h, h_dec y h_uni. h se emplea para almacenar la hora actual. h_dec y h_uni se emplean para acceder a las posiciones del array en el que están las imágenes que quieres mostrar.
- Cuando la hora actual es 14:30, se hacen los siguientes cálculos:
- h = hour() = 14
- h_dec = int( h/10 ) = int( 1.4 ) = 1
- h_uni = h-h_dec *10 = 14-1*10 = 14-10 = 4
- Cuando la hora actual es 02:00 se hacen los siguientes cálculos:
- h = hour() = 2
- h_dec = int( 2/10 ) = int( 0.2 ) = 0
- h_uni = h-h_dec *10 = 2-0*10 = 2-0 = 2
- Se muestran las imágenes im[h_dec] y im[h_uni] una junto a la otra.
-
El reloj final
Este es el último paso del proyecto. En este paso añadirás los minutos y los segundos al reloj.
Código: source: http://verkstad.cc/urler/ctc-g-b1-p-2-8
Resultado
El programa muestra seis imágenes, basadas en el tiempo actual en horas, minutos y segundos.
Comandos
- minute(): devuelve los minutos actuales como un valor entre 0 y 59.
- second(): devuelve los segundos actuales como un valor entre 0 y 59.
Cómo funciona
- Una vez que se muestra la hora en la función draw(), se declaran tres variables nuevas, m, m_dec y m_unit para almacenar los minutos.
- Cuando la hora actual es 14:30, se hacen los siguientes cálculos:
- m = minute() = 30
- m_dec = int( m/10 ) = int( 3 ) = 3
- m_uni = m-m_dec *10 = 30-3*10 = 30-30 = 0
- Se muestran las imágenes im[m_dec] y im[m_uni] una junto a la otra, debajo de las imágenes de la hora.
- Se declaran tres variables nuevas, s, s_dec y s_uni, para almacenar los segundos.
- Se muestran las imágenes im[s_dec] y im[s_uni] una junto a la otra, debajo de las imágenes de los minutos.
Sigue experimentando
- Usando las mismas variables de sistema, crea un temporizador para la cocina, por ejemplo un reloj que cuente hacia atrás con imágenes.
- Toma tus propias fotos de los dígitos y úsalas en tu programa.