Créer des Animations Personnalisées sur Écran LCD 16x2 avec Arduino

Composants et fournitures

Composant	Quantité	Notes
Arduino UNO	1	Toute carte Arduino compatible
Écran LCD 16x2 (blanc sur bleu) compatible HD44780	1	Ex: Adafruit Standard LCD
Résistance 220 Ω	1	Plage 220–1 kΩ ; valeur plus élevée = écran plus sombre

Applications et services en ligne

• Arduino IDE
• Générateur de glyphes personnalisés (outil web)

À propos de ce projet

La bibliothèque LiquidCrystal facilite l'utilisation des écrans LCD avec Arduino. La fonction createChar() permet de créer jusqu'à 8 caractères personnalisés (glyphes), chacun défini par un tableau de 8 octets (1 par ligne). Les 5 bits de poids faible de chaque octet déterminent les pixels de la ligne. Dessiner ces octets à la main n'est pas idéal pour un artiste, c'est pourquoi j'ai développé un outil web où vous dessinez les glyphes et le code est généré automatiquement.

Dans cet article, je montre comment créer des animations personnalisées avec seulement un Arduino et un écran LCD – base pour jeux, histoires, clips musicaux ou panneaux d'état décoratifs.

Branchement du LCD sur l'Arduino

Le câblage dépend du modèle d'écran. Le schéma ci-dessous a fonctionné pour l'un de mes écrans ; pour un autre, j'ai dû ajouter un potentiomètre et ajuster la résistance pour obtenir le meilleur contraste.

Voir la simulation sur TinkerCad.

Créer vos graphismes

Rendez-vous sur l'outil en ligne et dessinez vos images. Maximum 8 sections (glyphes) simultanées. Si vous ne pouvez plus sélectionner de case, vérifiez que vous n'utilisez pas déjà 8 sections.

Générer le code

Une fois votre première image terminée, décochez la case « just the function ». Copiez le code, téléversez-le sur l'Arduino. Votre image doit s'afficher sur le LCD.

Créer plus d'images (frames)

Sauvegardez votre code. Créez la deuxième image. Cette fois, cochez « just the function ». Copiez la fonction et collez-la à la fin de votre sketch. Renommez-la (ex: image01()) pour vous y retrouver. Déplacez l'appel à image() du setup() vers loop(), ajoutez un délai, appelez image01(), ajoutez un délai. Renommez la première fonction en image00() pour la cohérence. Votre loop() doit ressembler à :

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

Téléversez. Ajoutez d'autres frames ou modifiez les délais.

Code : Animation Métamorphose du Papillon

Code complet de l'animation du papillon (voir GIF ci-dessus).

/* butterfly metamorphosis animation 2021 ~ by tusindfryd - domaine public */
#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);
}

// Les 8 fonctions image00() à image07() définissent chaque frame via createChar()
// et lcd.write() aux positions appropriées. Voir le code source complet sur GitHub.

Le code complet de chaque frame est disponible dans la source originale.

Schéma