Animaciones Personalizadas en Pantallas LCD 16x2 con Arduino

Componentes y materiales

• Arduino UNO (o compatible) – 1 ud.
• Pantalla LCD 16x2 compatible HD44780 (blanco sobre azul) – 1 ud.
• Resistencia 220 Ω (rango 220 Ω–1 kΩ; valor mayor atenúa más) – 1 ud.

Software y servicios online

• Arduino IDE
• Generador de glifos personalizados (herramienta web): tusindfryd.github.io/screenduino/

Sobre el proyecto

La librería LiquidCrystal facilita el uso de LCDs con Arduino. Una función especialmente interesante es createChar(): permite crear glifos (caracteres) personalizados, cada uno definido por un array de 8 bytes (uno por fila). Los 5 bits menos significativos de cada byte determinan los píxeles de esa fila. Escribir los bytes a mano no es proceso ideal para un artista, así que he creado una herramienta web donde dibujas los glifos y se genera el código por ti.

En este artículo muestro cómo crear animaciones personalizadas usando solo una placa Arduino y un LCD, lo que abre la puerta a juegos, historias cortas, videoclips musicales o paneles de estado decorativos.

Conexión del LCD al Arduino

Conecta el LCD al Arduino; según el modelo, las conexiones pueden variar. Para una de mis pantallas funcionó el esquema siguiente, pero para otra necesité un potenciómetro (como en este tutorial) y ajustar la resistencia para conseguir buen contraste.

Ver simulación en TinkerCad: enlace.

Crear el arte

Ve a la herramienta https://tusindfryd.github.io/screenduino/ y dibuja tu arte. Se pueden usar hasta 8 secciones a la vez; si no puedes seleccionar un nuevo cuadro, verifica que no estés usando ya 8 secciones.

Generar el código

Al terminar tu primera imagen, desmarca la casilla «just the function». Copia el código al portapapeles y cárgalo en tu Arduino. Deberías ver tu imagen en el LCD.

Crear más fotogramas

Guarda tu código. Ahora crea el segundo fotograma: dibuja otra imagen. Al terminar, marca la casilla «just the function». Copia la función y pégala al final de tu código. Renombra la nueva función (p. ej. image01()) para llevar control. Mueve la llamada a image() de setup() a loop(), añade un delay, llama a image01() y otro delay. Renombra image() a image00() por consistencia. Tu loop() debería parecerse a:

void loop() {
  image00();
  delay(250);
  image01();
  delay(250);
}

Sube el sketch. Prueba añadir más fotogramas o cambiar los tiempos.

Código

Animación de metamorfosis de mariposa

Código de ejemplo (detrás de la animación GIF).

/* butterfly metamorphosis animation 2021 ~ by tusindfryd this code is in public domain */
#include <LiquidCrystal.h>
LiquidCrystal lcd(12, 11, 5, 4, 3, 2); // RS, E, D4, D5, D6, D7

void setup() {
  lcd.begin(16, 2);
}

void loop() {
  image00(); delay(250);
  image01(); delay(250);
  image02(); delay(250);
  image03(); delay(700);
  image04(); delay(250);
  image05(); delay(250);
  image06(); delay(700);
  image07(); delay(1250);
}

void image00() {
  lcd.clear();
  byte image22[8] = {B00110, B01101, B11011, B10011, B00111, B01111, B01111, B11111};
  byte image23[8] = {B01111, B11110, B11100, B11000, B11000, B10000, B10000, B00000};
  byte image07[8] = {B00000, B00000, B00000, B00000, B00000, B00000, B00001, B00111};
  byte image08[8] = {B00000, B01000, B10000, B10000, B10000, B11111, B11111, B11000};
  byte image09[8] = {B00000, B00000, B00000, B00000, B00000, B11000, B11000, B00100};
  lcd.createChar(0, image22);
  lcd.createChar(1, image23);
  lcd.createChar(2, image07);
  lcd.createChar(3, image08);
  lcd.createChar(4, image09);
  lcd.setCursor(5, 1); lcd.write(byte(0));
  lcd.setCursor(6, 1); lcd.write(byte(1));
  lcd.setCursor(6, 0); lcd.write(byte(2));
  lcd.setCursor(7, 0); lcd.write(byte(3));
  lcd.setCursor(8, 0); lcd.write(byte(4));
}

// ... (resto de funciones image01 a image07 omitidas por brevedad; estructura idéntica)

Esquemáticos