- Tutorial: Usando la matriz de leds del Arduino UNO R4. Parte 1
- Tutorial: Usando la matriz de leds del Arduino UNO R4. Parte 2
La última revisión de la clásica placa Arduino UNO se destaca, entre otras características, por su matriz de LEDs, que puede aprovecharse como si fuera una pantalla rudimentaria. En la segunda parte de este tutorial continuaremos explorando sus posibilidades y analizaremos la creación y visualización de animaciones, transformando patrones estáticos en secuencias dinámicas para dar vida a tus proyectos.
Introducción
En la primera parte de este tutorial te expliqué como usar la matriz de leds del Arduino UNO R4 para mostrar patrones estáticos empleando dos métodos distintos, renderBitmap y loadFrame. En esta segunda parte vamos a ver como crear y mostrar animaciones.
Animaciones
Una animación no es otra cosa que varios patrones o frames estáticos mostrados en secuencia con un retardo de tiempo entre ellos, así como un video es una serie de imágenes fijas o fotogramas también mostrados en secuencia separados por un instante de tiempo.
Esto significa que con lo que te expliqué en la primera parte de este tutorial ya puedes hacer animaciones sencillas. Todo lo que tienes que hacer es definir varios frames, como bitmaps o usando el formato compacto de enteros de 32 bits y mostrarlos en secuencia haciendo un retardo entre uno y otro.
A modo de ejemplo, el siguiente código “anima” el corazón que habíamos usado como ejemplo antes.
#include "Arduino_LED_Matrix.h"
ArduinoLEDMatrix Pantalla; //Instancia objeto
uint8_t corazon1 [8][12] = {
{0,0,0,0,0,0,0,0,0,0,0,0},
{0,0,0,1,1,0,1,1,0,0,0,0},
{0,0,1,0,0,0,0,0,1,0,0,0},
{0,0,1,0,0,0,0,0,1,0,0,0},
{0,0,0,1,0,0,0,1,0,0,0,0},
{0,0,0,0,1,0,1,0,0,0,0,0},
{0,0,0,0,0,1,0,0,0,0,0,0},
{0,0,0,0,0,0,0,0,0,0,0,0},
};
uint8_t corazon2 [8][12] = {
{0,0,0,0,0,0,0,0,0,0,0,0},
{0,0,0,1,1,0,1,1,0,0,0,0},
{0,0,1,1,1,1,1,1,1,0,0,0},
{0,0,1,1,1,1,1,1,1,0,0,0},
{0,0,0,1,1,1,1,1,0,0,0,0},
{0,0,0,0,1,1,1,0,0,0,0,0},
{0,0,0,0,0,1,0,0,0,0,0,0},
{0,0,0,0,0,0,0,0,0,0,0,0},
};
void setup() {
Pantalla.begin();
}
void loop() {
Pantalla.renderBitmap (corazon1, 8,12);
delay (500);
Pantalla.renderBitmap (corazon2, 8,12);
delay (1000);
}Con mas frames y mas imaginación que la que puse yo en el ejemplo seguro que lograrás mejores resultados 👍
Creando animaciones
El trabajo de diseñar todos los frames que forman una animación y traducirlos a código puede ser lento y tedioso si lo haces “a mano”, sobre todo si son muchos. Afortunademente disponemos de una herramienta para hacer ese trabajo mas sencillo. Se trata del Editor de animaciones que puedes encontrar en este link.
Usando este editor podrás dibujar de forma rápida todos los frames que integran una animación. Al finalizar, el mismo editor generará el código para definir cada frame y podrás guardarlo en un archivo de cabecera (tipo “.h”) para luego incluirlo en tu aplicación, como te explicaré en detalle mas adelante.
En el siguiente video puedes ver un ejemplo de uso:
Live Preview
En una parte del video señalo que si se graba un sketch en la placa se puede ver la animación que estamos creando “en vivo” también en la placa además de la computadora. Esto se denomina Live Preview y para que funcione debes tener cargado el siguiente sketch en tu Arduino:
#include "Arduino_LED_Matrix.h"
ArduinoLEDMatrix matrix;
void setup() {
Serial.begin(115200);
matrix.begin();
}
uint32_t frame[] = {
0, 0, 0, 0xFFFF
};
void loop() {
if(Serial.available() >= 12){
frame[0] = Serial.read() | Serial.read() << 8 | Serial.read() << 16 | Serial.read() << 24;
frame[1] = Serial.read() | Serial.read() << 8 | Serial.read() << 16 | Serial.read() << 24;
frame[2] = Serial.read() | Serial.read() << 8 | Serial.read() << 16 | Serial.read() << 24;
matrix.loadFrame(frame);
}
}Mostrando animaciones
El editor de animaciones nos permite dibujar todos los frames que integran una animación y luego guardar su definición en un archivo de cabecera.
En el video anterior creo una animación de ejemplo sencilla y al finalizar grabo las definiciones como pelotaRebotando.h. El contenido de ese archivo es el siguiente:
const uint32_t pelotaRebotando[][4] = {
{
0x400e0040,
0x0,
0x0,
66
},
{
0x20070,
0x2000000,
0x0,
66
},
{
0x10,
0x3801000,
0x0,
66
},
{
0x0,
0x801c00,
0x80000000,
66
},
{
0x0,
0x400,
0xe0040000,
66
},
{
0x0,
0x0,
0x20070020,
66
},
{
0x0,
0x100,
0x38010000,
66
},
{
0x0,
0x801c0,
0x8000000,
66
},
{
0x0,
0x400e0040,
0x0,
66
},
{
0x200,
0x70020000,
0x0,
66
}
};Como puedes ver, contiene la definición de una constante llamada pelotaRebotando que es un arreglo de dos dimensiones. Este arreglo contiene 10 elementos, cada uno de los cuales es un frame y cada frame a su vez está integrado por cuatro valores: 3 enteros de 32 bits que definen la imagen del frame y un cuarto valor (66 si no se lo modifica) que representa el tiempo en milisegundos que dura cada frame en pantalla.
Para poder ver en la matriz de leds la animación así definida vas a necesitar dos nuevos métodos definidos en la librería Arduino_LED_Matrix:
loadSequence (animacion): Carga una animación en memoria, pero no la muestra.
play (loop): Reproduce la animación cargada en memoria. loop es un valor booleano. Si vale True, la animación se repite indefinidamente y si vale False, se reproduce una sola vez.
Usando estos dos métodos, el código para mostrar la animación de la pelota rebotando quedaría de la siguiente forma:
#include "Arduino_LED_Matrix.h"
#include "pelotaRebotando.h"
ArduinoLEDMatrix Pantalla;
void setup() {
Pantalla.begin();
Pantalla.loadSequence(pelotaRebotando);
Pantalla.play(true);
}
void loop() {
}En este código he añadido una directiva #include para cargar el archivo “pelotaRebotando.h” que contiene la definición de todos los frames de la animación en la línea 2 y los métodos loadSequence y play para cargar y mostrar la animación en bucle en las líneas 8 y 9.
El código descargado y funcionando en una placa se vé de la siguiente forma:
Animaciones predefinidas
La librería Arduino_LED_Matrix, además de contener definiciones de patrones predefinidos, como te mostré en la parte 1 de este tutorial, contiene también animaciones predefinidas listas para que incluyas en tus aplicaciones.
Estas animaciones están definidas con los siguientes nombres:
LEDMATRIX_ANIMATION_STARTUPLEDMATRIX_ANIMATION_TETRIS_INTROLEDMATRIX_ANIMATION_ATMEGALEDMATRIX_ANIMATION_LED_BLINK_HORIZONTALLEDMATRIX_ANIMATION_LED_BLINK_VERTICALLEDMATRIX_ANIMATION_ARROWS_COMPASSLEDMATRIX_ANIMATION_AUDIO_WAVEFORMLEDMATRIX_ANIMATION_BATTERYLEDMATRIX_ANIMATION_BOUNCING_BALLLEDMATRIX_ANIMATION_BUGLEDMATRIX_ANIMATION_CHECKLEDMATRIX_ANIMATION_CLOUDLEDMATRIX_ANIMATION_DOWNLOADLEDMATRIX_ANIMATION_DVDLEDMATRIX_ANIMATION_HEARTBEAT_LINELEDMATRIX_ANIMATION_HEARTBEATLEDMATRIX_ANIMATION_INFINITY_LOOP_LOADERLEDMATRIX_ANIMATION_LOAD_CLOCKLEDMATRIX_ANIMATION_LOADLEDMATRIX_ANIMATION_LOCKLEDMATRIX_ANIMATION_NOTIFICATIONLEDMATRIX_ANIMATION_OPENSOURCELEDMATRIX_ANIMATION_SPINNING_COINLEDMATRIX_ANIMATION_TETRISLEDMATRIX_ANIMATION_WIFI_SEARCH
Para ver cualquiera de ellas puedes usar un código similar al anterior indicando la animación correspondiente en el método loadSequence. Por ejemplo para ver una simulación del juego Tetris:
#include "Arduino_LED_Matrix.h"
ArduinoLEDMatrix Pantalla;
void setup() {
Pantalla.begin();
Pantalla.loadSequence(LEDMATRIX_ANIMATION_TETRIS);
Pantalla.play(true);
}
void loop() {
}Puedes ir cambiando el nombre en el método loadSequence para explorar todas las animaciones predefinidas.
Conclusiones
En esta segunda parte del tutorial, hemos explorado cómo utilizar la matriz de LEDs del Arduino UNO R4 para crear y mostrar animaciones. Al comprender cómo secuenciar patrones estáticos, puedes dar vida a tus proyectos con animaciones personalizadas.
Para facilitar la creación de animaciones, hemos utilizado el Editor de Animaciones de Arduino. Esta herramienta permite diseñar y dibujar todos los frames de una animación de manera rápida y sencilla, generando automáticamente el código con las definiciones necesarias.
En la siguiente entrega veremos como mostrar textos y números, para que tengas mas herramientas que te permitan aprovechar todo el potencial de la matriz de leds del Arduino UNO R4.
Como siempre, cualquier consulta o sugerencia la puedes dejar mas abajo en la sección de comentarios.