Arduinoで16x2 LCDに自作アニメーションを表示する方法

必要な部品と材料

Arduino Uno (または互換ボード)	×1
16x2 キャラクター LCD (HD44780互換、白文字/青背景など)	×1
抵抗 220Ω (220Ω〜1kΩの範囲で可、大きいほど暗くなる)	×1

アプリとオンラインサービス

• Arduino IDE
• カスタムグリフ生成ツール (Webアプリ)

プロジェクト概要

Arduino標準の LiquidCrystal ライブラリには createChar() という面白い関数があります。これを使うと、8バイトの配列 (各バイトの下位5ビットが1行分のピクセル) でカスタム文字 (グリフ) を最大8種類まで定義できます。しかし、バイト配列を手書きで作るのは骨が折れます。そこで ブラウザで絵を描くだけでコードを自動生成するWebツール を作りました。

この記事では、ArduinoとLCDだけでカスタムアニメーションを作る方法を解説します。ゲーム、ショートストーリー、ミュージックビデオ、ステータスパネルの装飾など、アイデア次第で幅広く応用できます。

LCDとArduinoの接続

LCDモデルによって最適な配線が異なる場合があります。以下は一例です。コントラスト調整用に可変抵抗が必要な場合もあります (参考: 公式チュートリアル)。TinkerCadでのシミュレーションは こちら。

アートの作成

Webツール にアクセスして絵を描きます。同時に使用できるセクション (カスタム文字) は最大8個までです。新しいマスが選択できない場合は、すでに8セクション使っていないか確認してください。

コードの生成

最初のフレームが完成したら、「just the function」のチェックを外して コードをコピーし、Arduinoに書き込みます。この時点でLCDに画像が表示されるはずです。

複数フレームの作成

コードを保存したら、2フレーム目を描きます。今度は 「just the function」にチェックを入れて 関数だけをコピーし、スケッチの末尾にペースト。関数名を image01() などに変更して管理しやすくします。setup() 内の image() 呼び出しを loop() に移動し、遅延を挟んで順番に呼び出すように書き換えます。最初の関数も image00() にリネームしておくと整理しやすいです。

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

書き込んで動作確認。フレームを増やしたり遅延時間を変えたりしてアニメーションを調整しましょう。

サンプルコード: 蝶の変態アニメーション

以下は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);
}

// 以下、image00() 〜 image07() の各フレーム関数が続く
// (各関数内で lcd.createChar() で最大8文字定義し、lcd.write() で配置)
// 詳細はGitHub参照

完全なコードは GitHub で公開されています。

回路図