Bloque 2 - RELOJ DE POST-IT

PROYECTO 2 - Reloj de Post-it

En este miniproyecto vamos a crear un reloj donde los números estarán hechos a partir de fotografías de notas adhesivas o Post-it.

1.- Inserta una imagen en tu programa.

En primer lugar vamos a aprender a insertar una imagen en tu programa. Este sketch abre una foto desde la ubicación donde este la foto. En este caso debemos poner la foto en la carpeta del sketch.

PImage im;

void setup() {

  size(400, 400);   // Hacemos el programa del tamaño de la imagen

  im = loadImage("foto.jpg");  // Nombre de la imagen

}

void draw() {

  image(im, 0, 0);  // Para mostrar la imagen en la pantalla, coordenadas 0, 0

}




Nuevos comandos:

• PImage: Un tipo de datos que puede contener una imagen.
• loadImage(image file): Carga la imagen image file localizada dentro del directorio actual del sketch. image file debe escribirse exactamente igual que con el nombre del fichero. Mira más abajo cómo colocar la imagen en la carpeta correcta.
• image(imageName, x, y): Muestra la PImage imageName en las coordenadas x, y. La esquina superior izquierda es el eje de coordenadas.

2.- Añadir imágenes

Para que el programa tenga acceso a la imagen, debes arrastrar el fichero de la imagen en el IDE de Processing, como muestra la siguiente captura:

Cuando ejecutes el programa, la imagen de abajo es lo que deberias ver, un collage con cuatro Post-its como imagen de fondo para tu ventana de programa:

3.- Mostrando dos imágenes

Para poner dos imágenes una al lado de la otra, debes declarar una variable con distinto nombre pero del mismo tipo PImage y cargar la segunda imagen en el programa. Deberás ajustar las coordenadas de esta segunda imagen.

PImage im;

PImage im2;

void setup() {

  size(800, 400);   // Hacemos el programa dos veces el tamaño de la imagen en ancho

  im = loadImage("foto.jpg"); 

  im2 = loadImage("foto2.jpg");  // Nombre de la segunda imagen

}

void draw() {

  image(im, 0, 0);

  image(im2, 400, 0);  // Para mostrar la segunda imagen en la pantalla, coordenadas 400, 0

}

 Vamos a experimentar añadiendo otras imágenes:

PImage im;

PImage im2;

void setup() {

  size(800, 400);   // Hacemos el programa dos veces el tamaño de la imagen en ancho

  im = loadImage("balon.jpg"); 

  im2 = loadImage("tenis.jpg");  // Nombre de la segunda imagen

}

void draw() {

  image(im, 0, 0);

  image(im2, 400, 0);  // Para mostrar la segunda imagen en la pantalla, coordenadas 400, 0

}

4.- Arrays

Cuando trabajamos con muchas imágenes podemos utilizar algo llamado arrays que permiten un acceso más fácil a ellas

Los arrays pueden ser de un cierto tipo como entero o int o una cadena como String. El máximo número de variables que pueden almacenar debe ser declarado con el array – 3 en el ejemplo de arriba. El siguiente programa, que es una modificación del anterior, muestra como usar un array del tipo PImage para almacenar dos imágenes.

PImage im[] = new PImage[2];

void setup() {

  size(800, 400);  

  // La primera imagen va a la primera posicion del array img[]

  im[0] = loadImage("foto.jpg");  

  // La segunda imagen va a la segunda posicion del array

  im[1] = loadImage("foto2.jpg"); 

}

void draw() {

  image(im[0], 0, 0);

  image(im[1], 400, 0); 

}

 

Nuevos comandos:

• La declaración de las imágenes es un poco diferente: PImage im[] = new PImage[2], esto significa que declaramos un array del tipo PImage con dos bloques (o compartimentos) de datos.
• Cuando mostramos y cargamos las imágenes, usamos img[0], para la primera posición del array, y img[1], para la segunda.

 

 

5.- Usando dos Arrays

Para en adelante simplificar 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:

PImage im[] = new PImage[2];

String imFile[] = {"foto.jpg", "foto2.jpg"};  // Array de nombres de fichero

void setup() {

  size(800, 400);  

  im[0] = loadImage(imFile[0]);  // Primer fichero a la funcion 'loadImage()'

  im[1] = loadImage(imFile[1]);  // Segundo fichero

}

void draw() {

  image(im[0], 0, 0);

  image(im[1], 400, 0); 

}

Almacenamos los nombres de todas las imágenes en una array de strings( cadenas de texto). Aunque no parezca muy útil esto será de gran ayuda para futuros proyectos.

6.- El bucle for()

En este paso aumentaremos el número de imágenes que se muestran de 2 a 4. Todavía utilizaremos los 2 arrays de los pasos anteriores, pero para hacer el código más eficiente incluso, introduciremos una cosa nueva: el bucle for(). Esta es una de las funciones más prácticas y usadas en programación. Hace exactamente lo que parece, iterar, al igual que draw(). Veamos un ejemplo para seguir explicando como funciona.

PImage im[] = new PImage[4];   // Haz tu array mas grande para que le quepan 4 imagenes

String imFile[] = {"postit.jpg", "peninsula.jpg", "tortilla.jpg", "banana.jpg"};

void setup() {

  size(800, 800);  // Haz tu programa mas grande para acomodar todas las imagenes  

  for (int i = 0; i < 4; i = i + 1) {

    im[i] = loadImage(imFile[i]);  // Carga la imagen segun el contador 'i'

  }

}

void draw() {

  image(im[0], 0, 0);   // Muestra las imagenes

  image(im[1], 400, 0); 

  image(im[2], 0, 400); 

  image(im[3], 400, 400); 

Con estos comandos podemos abrir más imágenes, en este caso podemos abrir hasta 4 imágenes.

Nuevos comandos:

• for(initiator; test; update){ statements }: Esta función permite repetir una pieza de código tantas veces como necesites. La primera cosa que sucede dentro del for() es la inicialización, initiator. En este ejemplo esta declaración es un entero, i. Luego comprueba si test es verdadero o falso, tal y como hicimos con el if en el proyecto anterior, ¿recuerdas?. En este ejemplo test comprueba si i es menor que 4. Si así es, el código entre llaves se ejecutará. A continuación, lo que ocurre es el update, en este caso se trata de incrementar i una unidad. Después, test se comprueba de nuevo y si nuevamente es cierto, se repite lo anterior. Puesto que siempre actualizamos añadiendo 1 a i, en algún momento i será igual que 4, lo que significa que test será falsa (4 no es menor que 4). En ese momento, se abandonará el bucle.

7.- Múltiples imágenes

Puesto que el objetivo de este programa es crear un reloj, el siguiente paso es utilizar diferentes imágenes que representen los números y usarlas en nuestro programa. Para tu conveniencia, te damos una serie de imágenes hechas con notas de Post-It.

PImage im[] = new PImage[10];   // Array para 10 imagenes

String imFile[] = {"0.jpg", "1.jpg", "2.jpg", "3.jpg", "4.jpg", "5.jpg", "6.jpg", "7.jpg", "8.jpg", "9.jpg"};

void setup() {

  size(700, 95);  // 10 imagenes de 70 pixels de ancho y 95 de alto  

  for (int i = 0; i < 10; i = i + 1) {

    im[i] = loadImage(imFile[i]); 

  }

}

void draw() {

  for (int i = 0; i < 10; i = i + 1) {

    image(im[i], 70 * i, 0);  // Muestra las imagenes en secuencia

  }

}

En este programa podemos abrir las 10 imágenes a la vez y horizontalmente.

8.- El Tiempo

En este paso te enseñaremos como mostrar el tiempo. Ya has aprendido como acceder a diferentes variables del sistema con Processing. Por ejemplo, ya hemos usado mouseX, mouseY y frameRate. Hay variables que podemos utilizar para obtener el tiempo actual; hour (), minute () y second (). Empecemos con cómo mostrar el tiempo por sólo las horas:

PImage im[] = new PImage[10];   // Array para 10 imagenes

String imFile[] = {"0.jpg", "1.jpg", "2.jpg", "3.jpg", "4.jpg", "5.jpg", "6.jpg", "7.jpg", "8.jpg", "9.jpg"};

void setup() {

  size(140, 95);  // 2 digitos de 70 pixels de ancho y 95 de alto  

  for (int i = 0; i < 10; i = i + 1) {

    im[i] = loadImage(imFile[i]); 

  }

}

void draw() {

  int h = hour();             // Toma la hora del reloj del ordenador y almacenalo en una variable

  int h_dec = int(h / 10);    // Extrae el digito de mayor peso de la hora (decenas)

  int h_uni = h - h_dec * 10; // Extrae el digito de menor peso de la hora (unidades)

   

  image(im[h_dec], 0, 0);     // Muestra el digito de las decenas

  image(im[h_uni], 70, 0);    // Muestra el digito de las unidades

}

Nuevos comandos:

• hour(): Devuelve la hora actual como un número de 0 a 23.
• int(data): Convierte data a un entero. P.ej. int(2.545) devuelve 2,int(233.9999) devuelve 233 etc.

Como vemos, este programa es capaz de saber qué hora es gracias a nuestro ordenador, como son las 10, el programa coge los numeros 1 y 0 para formar el numero 10. Es un programa muy interesante pues podemos tener un reloj a base de imágenes.

9.- El reloj final

Este es el último paso del proyecto. En este paso vamos a añadir los minutos y los segundos a nuestro reloj utilizando el mismo método que en el paso anterior con las horas.

PImage im[] = new PImage[10];   // Array para 10 imagenes

String imFile[] = {"0.jpg", "1.jpg", "2.jpg", "3.jpg", "4.jpg", "5.jpg", "6.jpg", "7.jpg", "8.jpg", "9.jpg"};

void setup() {

  size(140, 285);  // 6 digitos en tres filas y dos columnas  

  for (int i = 0; i < 10; i = i + 1) {

    im[i] = loadImage(imFile[i]); 

  }

}

void draw() {

  int h = hour();            

  int h_dec = int(h / 10);   

  int h_uni = h - h_dec * 10;

  

  image(im[h_dec], 0, 0);    

  image(im[h_uni], 70, 0);   

  

  int m = minute();           // Toma los minutos del reloj del ordenador y almacenalos en una variable

  int m_dec = int(m / 10);    // Extrae el digito de mayor peso de los minutos (decenas)

  int m_uni = m - m_dec * 10; // Extrae el digito de menor peso de los minutos (unidades)

  

  image(im[m_dec], 0, 95);    // Muestra el digito de las decenas

  image(im[m_uni], 70, 95);   // Muestra el digito de las unidades

  

  int s = second();           // Toma los segundos del reloj del ordenador y almacenalos en una variable

  int s_dec = int(s / 10);    // Extrae el digito de mayor peso de los segundos (decenas)

  int s_uni = s - s_dec * 10; // Extrae el digito de menor peso de los segundos (unidades)

  

  image(im[s_dec], 0, 190);   // Muestra el digito de las decenas

 

Esto es un reloj a base de imágenes de números, es el proyecto final de nuestro reloj programado para ver la hora con unas simples imágenes. En nuestras funciones, los segundos van cambiando y los minitos y las hora, pues le hemos puesto su retardo correspondiente.


Juntamos el bloque 1 con un poco del dos:
int tiempo = 0;

void setup() {
  size(400, 400);   // Hacemos el programa del tamaño de la imagen
  im = loadImage("tenis.jpg");  // Nombre de la imagen
  image(im, 0, 0);  // Para mostrar la imagen en la pantalla, coordenadas 0, 0
}

void draw() {
  tiempo = tiempo + 1;  // Incrementa el tiempo en una unidad
  rojo = int(55 * (1 + sin(tiempo * 2 * PI / frameRate / 20)));  // Cambia el rojo, repite el color cada 20s
  
  noStroke();            
  fill(rojo, 0, 0);         
  ellipse(mouseX, mouseY, 30, 30);
 
}