Crie Animações Personalizadas em Display LCD 16x2 com Arduino

Componentes e Materiais

Componente	Qtd	Observações
Arduino UNO	1	Qualquer placa Arduino funciona.
Display LCD 16x2 (compatível HD44780)	1	Ex.: Adafruit Standard LCD 16x2 White on Blue.
Resistor 220 Ω	1	Qualquer valor entre 220 Ω e 1 kΩ. Valores maiores diminuem o brilho.

Aplicativos e Serviços Online

• Arduino IDE
• Gerador de Glifos Personalizados (Custom Glyph Generator)

Sobre o Projeto

A biblioteca LiquidCrystal facilita o uso de LCDs com Arduino. Uma função particularmente interessante é createChar(): permite criar glifos (caracteres) personalizados, cada um descrito por um array de 8 bytes (um por linha). Os 5 bits menos significativos de cada byte definem os pixels da linha. Escrever bytes manualmente para criar arte não é o processo ideal para um artista, por isso criei uma ferramenta web onde você desenha os glifos e o código é gerado automaticamente.

Neste artigo mostro como criar animações personalizadas usando apenas uma placa Arduino e um LCD — o que abre possibilidades para jogos, pequenas histórias, videoclipes ou painéis de status decorativos.

Conectando o LCD ao Arduino

Conecte o LCD ao Arduino — dependendo do modelo, conexões diferentes podem funcionar melhor. Para um dos meus displays, o esquema abaixo funcionou bem; para outro, precisei usar um potenciômetro (como no tutorial link) e ajustar o resistor para obter o melhor contraste.

Veja a simulação no TinkerCad aqui.

Criando a Arte

Acesse a ferramenta em https://tusindfryd.github.io/screenduino/ e crie sua arte. Até 8 seções podem ser usadas simultaneamente; se não conseguir selecionar um novo quadrado, verifique se já não está usando 8 seções.

Gerando o Código

Ao terminar o primeiro quadro, desmarque a caixa "apenas a função". Copie o código e faça upload para o Arduino. Neste ponto você já deve ver a imagem no LCD.

Criando Mais Quadros

Salve seu código. Agora crie o segundo quadro. Desenhe outra imagem. Ao terminar, marque a caixa "apenas a função". Copie a função e cole no final do seu código. Renomeie a nova função para algo como image01() para organização. Mova a chamada de image() do setup() para o loop(), adicione um delay, chame image01() e outro delay. Considere renomear image() para image00() por consistência. Seu loop() deve ficar assim:

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

Faça upload do sketch. Experimente adicionar mais quadros ou alterar o tempo de delay.

Código

Animação de Metamorfose de Borboleta

Arduino

Código de exemplo (por trás da animação 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));
}

void image01() {
  lcd.clear();
  byte image22[8] = {B00110, B00101, B00011, B00011, B00111, B01111, B01111, B11111};
  byte image23[8] = {B01111, B11110, B11100, B11000, B11000, B10000, B10000, B00000};
  byte image07[8] = {B00000, B00000, B00000, B00000, B00000, B00000, B11001, B10111};
  byte image08[8] = {B00000, B01000, B10000, B10000, B10000, B11111, B11111, B11000};
  byte image09[8] = {B00000, B00000, B00000, B00000, B00000, B11000, B11000, B00100};
  byte image06[8] = {B00000, B00000, B00000, B00000, B00000, B00000, B00000, B00011};
  lcd.createChar(0, image22);
  lcd.createChar(1, image23);
  lcd.createChar(2, image07);
  lcd.createChar(3, image08);
  lcd.createChar(4, image09);
  lcd.createChar(5, image06);
  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));
  lcd.setCursor(5, 0); lcd.write(byte(5));
}

void image02() {
  lcd.clear();
  byte image22[8] = {B00000, B00001, B00011, B00011, B00111, B01111, B01111, B11111};
  byte image23[8] = {B01111, B11110, B11100, B11000, B11000, B10000, B10000, B00000};
  byte image07[8] = {B00000, B00000, B00000, B00001, B00111, B00100, B11001, B10111};
  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));
}

void image03() {
  lcd.clear();
  byte image22[8] = {B00000, B00001, B00011, B00011, 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, B11010};
  byte image09[8] = {B00000, B00000, B00000, B00000, B00000, B11000, B11000, B00100};
  byte image24[8] = {B00010, B00111, B00111, B00111, B00111, B00111, B00010, B00000};
  lcd.createChar(0, image22);
  lcd.createChar(1, image23);
  lcd.createChar(2, image07);
  lcd.createChar(3, image08);
  lcd.createChar(4, image09);
  lcd.createChar(5, image24);
  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));
  lcd.setCursor(7, 1); lcd.write(byte(5));
}

void image04() {
  lcd.clear();
  byte image22[8] = {B00000, B00001, B00011, B00011, B00111, B01111, B01111, B11111};
  byte image23[8] = {B01111, B11110, B11100, B11000, B11000, B10001, B10000, B00000};
  byte image07[8] = {B00000, B00000, B00000, B00000, B00000, B00000, B00001, B00111};
  byte image08[8] = {B00000, B01000, B10000, B10000, B10000, B11111, B11111, B11010};
  byte image09[8] = {B00000, B00000, B00000, B00000, B00000, B11000, B11000, B00100};
  byte image24[8] = {B00010, B00100, B01011, B10101, B11010, B10101, B11010, B01110};
  byte image25[8] = {B00000, B00000, B00000, B10000, B10000, B00000, B00000, B00000};
  lcd.createChar(0, image22);
  lcd.createChar(1, image23);
  lcd.createChar(2, image07);
  lcd.createChar(3, image08);
  lcd.createChar(4, image09);
  lcd.createChar(5, image24);
  lcd.createChar(6, image25);
  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));
  lcd.setCursor(7, 1); lcd.write(byte(5));
  lcd.setCursor(8, 1); lcd.write(byte(6));
}

void image05() {
  lcd.clear();
  byte image24[8] = {B01010, B10100, B01011, B10101, B11010, B10101, B11010, B01110};
  byte image25[8] = {B00000, B00000, B00000, B10000, B10000, B00000, B00000, B00000};
  byte image23[8] = {B01101, B01010, B01101, B00111, B00000, B00000, B00000, B00000};
  byte image07[8] = {B00000, B00000, B00000, B00000, B00000, B00000, B00001, B00011};
  byte image08[8] = {B00000, B00000, B00000, B00000, B00000, B00000, B00000, B10000};
  lcd.createChar(0, image24);
  lcd.createChar(1, image25);
  lcd.createChar(2, image23);
  lcd.createChar(3, image07);
  lcd.createChar(4, image08);
  lcd.setCursor(7, 1); lcd.write(byte(0));
  lcd.setCursor(8, 1); lcd.write(byte(1));
  lcd.setCursor(6, 1); lcd.write(byte(2));
  lcd.setCursor(6, 0); lcd.write(byte(3));
  lcd.setCursor(7, 0); lcd.write(byte(4));
}

void image06() {
  lcd.clear();
  byte image08[8] = {B00000, B00100, B01010, B01010, B10001, B00011, B00110, B01100};
  byte image07[8] = {B00000, B00000, B00000, B00000, B00001, B00010, B00010, B00001};
  byte image09[8] = {B00000, B00000, B10000, B11000, B00000, B00000, B11000, B00100};
  byte image24[8] = {B00100, B00100, B00011, B00000, B00000, B00000, B00000, B00000};
  byte image25[8] = {B10000, B00000, B00000, B00000, B00000, B00000, B00000, B00000};
  lcd.createChar(0, image08);
  lcd.createChar(1, image07);
  lcd.createChar(2, image09);
  lcd.createChar(3, image24);
  lcd.createChar(4, image25);
  lcd.setCursor(7, 0); lcd.write(byte(0));
  lcd.setCursor(6, 0); lcd.write(byte(1));
  lcd.setCursor(8, 0); lcd.write(byte(2));
  lcd.setCursor(7, 1); lcd.write(byte(3));
  lcd.setCursor(8, 1); lcd.write(byte(4));
}

void image07() {
  lcd.clear();
  byte image24[8] = {B10101, B01110, B01110, B00100, B10101, B01110, B00100, B11111};
  byte image08[8] = {B00000, B00100, B01010, B01010, B10001, B00011, B00110, B01100};
  byte image07[8] = {B00000, B00000, B00000, B00000, B00001, B00010, B00010, B00001};
  byte image09[8] = {B00000, B00000, B10000, B11000, B00000, B00000, B00000, B00000};
  lcd.createChar(0, image24);
  lcd.createChar(1, image08);
  lcd.createChar(2, image07);
  lcd.createChar(3, image09);
  lcd.setCursor(7, 1); lcd.write(byte(0));
  lcd.setCursor(7, 0); lcd.write(byte(1));
  lcd.setCursor(6, 0); lcd.write(byte(2));
  lcd.setCursor(8, 0); lcd.write(byte(3));
}

Esquemáticos