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);
im = loadImage("foto.jpg");
im2 = loadImage("foto2.jpg");
}
void draw() {
image(im, 0, 0);
image(im2, 400, 0);
}
Vamos a experimentar añadiendo otras imágenes:
PImage im;
PImage im2;
void setup() {
size(800, 400);
im = loadImage("balon.jpg");
im2 = loadImage("tenis.jpg");
}
void draw() {
image(im, 0, 0);
image(im2, 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);
}
