NeoPixelマトリクスとArduino：8x8・16x16 WS2812B LEDパネルガイド

NeoPixelマトリクスは、Arduinoで作れるディスプレイの中でも特に目を引くものの1つです。アドレサブルなWS2812B RGB LEDを8x8（64個のLED）または16x16（256個のLED）並べたパネルで、1本のデータ線だけで各ピクセルの色を個別に設定できます。文字のスクロール表示、アイコン、小さなゲーム、音のスペクトラム表示、装飾用のアニメーションにぴったりです。このガイドでは、パネル内部のジグザグ配列、x-y座標をLEDの番号に変換する関数、文字のスクロール表示とアニメーションをステップごとに学びます。

マトリクスを扱うには、1本のNeoPixelテープよりも少し多くの注意が必要です。256個のLEDはフル輝度で15 Aを超える電流を消費することがあり、Arduino Unoの2 KBのRAMは大きなパネルではすぐにいっぱいになります。また、ESP32やPicoの3.3 V出力は一部のパネルで問題を起こすことがあります。そのため、コードとあわせて電流の計算、明るさの制限、メモリの計画も取り上げます。WS2812Bの基本をまだ知らない場合は、先にWS2812B NeoPixel LEDの記事をご覧ください。

NeoPixel LEDマトリクスとは？仕組みは？

WS2812B LEDの内部には、赤・緑・青のチップの横に小さなドライバICが入っています。マイコンはデータ線を通じて800 kHzの速さで、LED1個あたり24ビットの色データを送ります。ビットの順番は緑・赤・青（GRB）です。最初のLEDは届いた最初の24ビットを自分用に取り込み、残りをDOUTピンから次のLEDへ渡し、こうしてチェーンが続きます。マトリクスパネルも同じで、64個や256個のLEDは、実は長いテープを折り返して正方形にしたものです。1個のLEDにデータを送るのに約30マイクロ秒かかるので、256個のLEDのパネルを1回更新するには約7.7 msかかります。つまり、1秒間に100フレームを超える滑らかなアニメーションが可能です。

ジグザグのピクセル配列とXY座標の関数

コードではピクセルを(x, y)の座標で考えたいところですが、LEDは0から始まる1つの通し番号で指定します。ほとんどのフレキシブルパネルや16x16のモデルでは、LEDがジグザグ（サーペンタイン）の順に並んでいます。1行目は左から右へ進み、2行目は右から左へ戻り、3行目はまた左から右へ進みます。各行の終わりが次の行の始まりに最短でつながるので、製造しやすい配列です。下の表は、8x8のジグザグパネルの最初の4行のLED番号です。

ここから式がそのまま導けます。偶数行ではインデックス = y × W + x、奇数行ではインデックス = y × W + (W − 1 − x)です。Wはパネルの幅です。たとえば8x8パネルでは、点(2, 1)は1 × 8 + (7 − 2) = 13番のLEDになります。注意点として、硬い基板の8x8ボードの中には、すべての行が同じ方向に進むもの（ストレートまたはプログレッシブ配列）があります。その場合、式は単にy × W + xです。また、LEDが行ではなく列に沿って折り返すパネルもあり、その場合はxとyを入れ替える必要があります。パネルの種類を確かめるいちばん確実な方法は、LEDを1個ずつ順に点灯させるテスト用スケッチを動かし、光がどう進むかを観察することです。

NeoPixelマトリクスの配線：Arduino Uno、ESP32、Pico

丈夫な回路にするために、小さな部品を3つ追加しましょう。データ線に直列に入れる300〜500 Ωの抵抗（最初のLEDの入力を急な電圧のスパイクから守ります）、パネルの5VとGNDの間に入れる1000 µF程度の電解コンデンサ（電源を入れた瞬間の突入電流をやわらげます）、そして必要に応じて3.3 Vのボードではレベル変換回路です。WS2812Bは5 V電源のとき、データ入力に少なくとも約3.5 V（電源電圧の70%）を求めます。ESP32やPicoの3.3 V出力はほとんどのパネルで動作しますが、この限界を下回っています。ちらつきやランダムな色が見られる場合は、74AHCT125のようなバッファICを使ってください。詳しくはレベル変換モジュールの記事にあります。

ステップごとに作る最初のマトリクスプログラム（Arduino Uno）

1. Arduino IDEでライブラリマネージャを開き、Adafruit NeoPixelライブラリをインストールします。
2. 表のとおりにパネルを配線します。DINは330 Ωの抵抗を通してD6へ、GNDはArduinoのGNDへ、5Vは電源へつなぎます。
3. コードのWとHをパネルのサイズに合わせます。16x16パネルならどちらも16にします。
4. 最初の試運転では明るさを低くしておきます。setBrightness(30)にすると、8x8パネルの電流をUSBで足りるレベルまで下げられます。
5. コードを書き込みます。斜めに流れる虹が見えるはずです。色が行ごとにずれて見える場合はパネルの配列が違うので、それに合わせてxyIndex関数を修正してください。

1#include <Adafruit_NeoPixel.h>
2
3#define PIN_DATA 6                 // DIN pini (330 ohm ile) / DIN pin (via 330 ohm)
4#define W 8                        // panel genişliği / panel width
5#define H 8                        // panel yüksekliği / panel height
6#define NUM_LEDS (W * H)
7
8Adafruit_NeoPixel strip(NUM_LEDS, PIN_DATA, NEO_GRB + NEO_KHZ800);
9
10// (x, y) koordinatını LED numarasına çevirir (zikzak) / converts (x, y) to LED index (serpentine)
11uint16_t xyIndex(uint8_t x, uint8_t y) {
12  if (y & 1) {
13    return y * W + (W - 1 - x);    // tek satırlar sağdan sola / odd rows run right to left
14  }
15  return y * W + x;                // çift satırlar soldan sağa / even rows run left to right
16}
17
18void setup() {
19  strip.begin();
20  strip.setBrightness(30);         // 0-255, düşük tut / keep it low
21  strip.clear();
22  strip.show();
23}
24
25void loop() {
26  static uint16_t hueBase = 0;
27  for (uint8_t y = 0; y < H; y++) {
28    for (uint8_t x = 0; x < W; x++) {
29      uint16_t hue = hueBase + (x + y) * 4096U;   // çapraz gökkuşağı / diagonal rainbow
30      strip.setPixelColor(xyIndex(x, y), strip.gamma32(strip.ColorHSV(hue)));
31    }
32  }
33  strip.show();                    // tamponu panele gönder / push the buffer to the panel
34  hueBase += 256;                  // renkleri kaydır / shift the colors
35  delay(20);
36}

コードの中心はxyIndex()関数です。奇数行でxを反転させることでジグザグ配列を隠すので、コードのほかの部分では座標だけを考えればよくなります。ColorHSV()は、色相環上の0〜65535の色相の値をRGBに変換します。x + yの合計が増えるにつれて色相がずれていくので、斜めの色の帯ができます。gamma32()は目の明るさの感じ方に合わせて補正し、色の移り変わりをより自然に見せます。最後に、show()を呼ぶまでは、どの変更もパネルには送られません。すべてのピクセルをまずメモリに書き込み、一度にまとめて送ることが、滑らかな表示の秘訣です。

文字のスクロール表示：Adafruit NeoMatrixを使う

文字やアイコンを描くのに、ピクセルを1つずつ扱う必要はありません。Adafruit NeoMatrixライブラリは、NeoPixelパネルをAdafruit GFX互換のディスプレイに変えてくれます。そのため、OLEDディスプレイで使うprint()、drawLine()、fillRect()、drawBitmap()などの関数がマトリクスでも使えます。ライブラリマネージャからAdafruit NeoMatrixをインストールするときは、依存ライブラリのAdafruit GFXとAdafruit NeoPixelもインストールしてください。コンストラクターのフラグはパネルの物理的な配列を表します。NEO_MATRIX_TOP + NEO_MATRIX_LEFTは最初のLEDが左上の角にあること、NEO_MATRIX_ROWSはLEDが行に沿って並んでいること、NEO_MATRIX_ZIGZAGは行がジグザグに折り返すことを示します。ストレート配列のボードでは、ZIGZAGの代わりにNEO_MATRIX_PROGRESSIVEと書くだけです。標準の5×7フォントは8行のパネルにちょうど収まり、1文字は間隔を含めて6ピクセル幅です。9文字のテキストは54ピクセルになります。textWidth定数がこれを自動で計算し、xがその値を下回ると、テキストが再び右から入ってきて色が変わります。

1#include <Adafruit_GFX.h>
2#include <Adafruit_NeoMatrix.h>
3#include <Adafruit_NeoPixel.h>
4
5#define PIN_DATA 6
6
7// 8x8 panel, ilk LED sol üstte, zikzak satırlar / 8x8 panel, first LED top-left, zigzag rows
8Adafruit_NeoMatrix matrix(8, 8, PIN_DATA,
9  NEO_MATRIX_TOP + NEO_MATRIX_LEFT + NEO_MATRIX_ROWS + NEO_MATRIX_ZIGZAG,
10  NEO_GRB + NEO_KHZ800);
11
12const char text[] = "BlueGrays";
13const int textWidth = (sizeof(text) - 1) * 6;   // karakter başına 6 piksel / 6 pixels per character
14int x = 8;                                      // yazı sağ kenardan başlar / text starts at the right edge
15uint8_t colorStep = 0;
16
17void setup() {
18  matrix.begin();
19  matrix.setTextWrap(false);       // satır kaydırma kapalı / no line wrap
20  matrix.setBrightness(40);
21  matrix.setTextColor(matrix.Color(255, 0, 0));
22}
23
24void loop() {
25  matrix.fillScreen(0);
26  matrix.setCursor(x, 0);
27  matrix.print(text);
28  if (--x < -textWidth) {          // yazı panelden tamamen çıktı / text fully left the panel
29    x = matrix.width();
30    colorStep = (colorStep + 1) % 3;
31    if (colorStep == 0) matrix.setTextColor(matrix.Color(255, 0, 0));
32    if (colorStep == 1) matrix.setTextColor(matrix.Color(0, 255, 0));
33    if (colorStep == 2) matrix.setTextColor(matrix.Color(0, 0, 255));
34  }
35  matrix.show();
36  delay(80);                       // kayma hızı / scroll speed
37}

Arduino Unoのメモリの限界

Arduino UnoのATmega328Pには2048バイトのRAMしかなく、LED1個ごとに3バイトの色バッファが必要です。8x8パネルは192バイトで余裕をもって収まりますが、16x16パネルは768バイトで、それだけでRAMの3分の1以上を占めます。厄介なのは、Adafruit NeoPixelがこのバッファをプログラムの実行中に確保するため、コンパイル終了時に表示されるグローバル変数の使用率に含まれない点です。コンパイル結果が70%の使用率でも、パネルのバッファが加わるとメモリが足りなくなることがあり、ボードがフリーズしたり、意味のない色が表示されたりします。また、AVRボードではshow()の実行中は割り込みが無効になります。256個のLEDでは約7.7 msかかり、その間にmillis()が遅れたり、Serialで届くデータが失われたりすることがあります。大きなパネルには、8 KBのRAMを持つArduino Megaや、数百キロバイトのRAMを持つESP32のほうがずっと扱いやすい選択です。

消費電流と明るさの制限

WS2812Bの各色チャンネルは、フル輝度で約20 mAを消費します。3色すべてが点灯する白では、LED1個あたり60 mAになります。おおまかな計算にはI ≈ LEDの数 × 60 mA × (明るさ / 255)という式を使えます。16x16パネルは全点灯の白で256 × 60 = 15,360 mA、つまり15 Aを超える電流を消費します。これは電源にも、パネルの細い銅箔パターンにも大きな負担です。うれしいことに、マトリクスはとても明るいので、室内なら255のうち20〜50くらいの明るさで十分に目を引くほどはっきり見えます。実際のアニメーションではすべてのLEDが同時に白く光るわけではないので、平均電流は計算値よりかなり低くなります。それでも、電源は最悪の場合に合わせて選ぶか、ソフトウェアで制限する必要があります。

16x16パネルで片方の端からだけ電流を供給すると、遠い角のLEDで電圧が下がり、白が黄色っぽく、または赤っぽく見えます。これを防ぐには、断面積0.75 mm²以上の電線で、パネルの入力側と出力側の両方から5VとGNDを供給します。これをパワーインジェクション（電源の追加供給）と呼びます。ソフトウェア側では、FastLEDライブラリのsetMaxPowerInVoltsAndMilliamps(5, 2000)関数がフレームごとに推定電流を計算し、制限を超えそうなときは自動で明るさを下げてくれます。電池で動かす場合は、回路がどれくらい持つかを電池寿命計算ツールで確認できます。電源選びの詳細はArduinoの電源の取り方の記事をご覧ください。

ESP32で作る16x16マトリクスのアニメーション（FastLED）

ESP32は大きなRAMと240 MHzのプロセッサを持ち、大きなパネルにはずっと扱いやすい選択です。NeoPixelの信号をRMTというハードウェアユニットで生成するので、プロセッサにもあまり負担をかけません。下のコードはFastLEDを使い、16x16パネル上で軌跡を残しながら滑るように動く2つの色の点を描きます。beatsin8()は時間とともに正弦波状に振動する座標を作り、fadeToBlackBy()はフレームごとにすべてのピクセルを少し暗くして、尾を引く効果を生み出します。ライブラリマネージャからFastLEDの最新版をインストールするだけで大丈夫です。現在のバージョンは、ESP32 Arduinoコアの2.xと3.xの両方に対応しています。

1#include <FastLED.h>
2
3#define DATA_PIN 16                // DIN -> GPIO 16 (330 ohm ile) / DIN -> GPIO 16 (via 330 ohm)
4#define W 16
5#define H 16
6#define NUM_LEDS (W * H)
7
8CRGB leds[NUM_LEDS];
9
10// Zikzak dizilim için koordinat dönüşümü / coordinate mapping for serpentine layout
11uint16_t xyIndex(uint8_t x, uint8_t y) {
12  return (y & 1) ? (y * W + (W - 1 - x)) : (y * W + x);
13}
14
15void setup() {
16  FastLED.addLeds<WS2812B, DATA_PIN, GRB>(leds, NUM_LEDS);
17  FastLED.setBrightness(60);                       // genel parlaklık / global brightness
18  FastLED.setMaxPowerInVoltsAndMilliamps(5, 2000); // 5 V, en fazla 2 A / 5 V, max 2 A
19  FastLED.clear(true);
20}
21
22void loop() {
23  static uint8_t hue = 0;
24  fadeToBlackBy(leds, NUM_LEDS, 30);               // iz efekti / trail effect
25
26  uint8_t px1 = beatsin8(13, 0, W - 1);            // sinüs salınımlı koordinatlar / sine-wave coordinates
27  uint8_t py1 = beatsin8(17, 0, H - 1);
28  uint8_t px2 = beatsin8(11, 0, W - 1, 0, 64);
29  uint8_t py2 = beatsin8(7, 0, H - 1, 0, 128);
30
31  leds[xyIndex(px1, py1)] = CHSV(hue, 255, 255);
32  leds[xyIndex(px2, py2)] = CHSV(hue + 128, 255, 255);
33
34  FastLED.show();
35  hue++;
36  delay(16);                                       // yaklaşık 60 kare/sn / about 60 fps
37}

Raspberry Pi PicoとMicroPythonで使うNeoPixelマトリクス

PicoのMicroPythonにはneopixelモジュールが最初から組み込まれているので、追加のファイルをコピーする必要はありません。信号のタイミングはモジュールが自分で作るので、np[i] = (r, g, b)で色を代入し、write()でパネルに送るだけです。MicroPythonにはAdafruitのライブラリのようなsetBrightness関数がないため、色の値に係数を掛けて自分で明るさを制限します。下の例は、8x8パネル上でハートのアイコンをゆっくり明るくしたり暗くしたりします。アイコンは各行が1バイトのビットマップ配列から描かれ、いちばん左のビットがx = 0の列に対応します。

1from machine import Pin
2from neopixel import NeoPixel
3import time
4
5W, H = 8, 8
6np = NeoPixel(Pin(2), W * H)       # DIN -> GP2 (330 ohm ile) / DIN -> GP2 (via 330 ohm)
7BRIGHTNESS = 0.1                   # %10 parlaklık / 10% brightness
8
9HEART = [
10    0b01100110,
11    0b11111111,
12    0b11111111,
13    0b11111111,
14    0b01111110,
15    0b00111100,
16    0b00011000,
17    0b00000000,
18]
19
20def xy_index(x, y):
21    # zikzak dizilim / serpentine layout
22    if y % 2:
23        return y * W + (W - 1 - x)
24    return y * W + x
25
26def draw_bitmap(rows, color):
27    r, g, b = color
28    c = (int(r * BRIGHTNESS), int(g * BRIGHTNESS), int(b * BRIGHTNESS))
29    for y in range(H):
30        for x in range(W):
31            on = rows[y] & (0x80 >> x)     # soldaki bit x=0 / leftmost bit is x=0
32            np[xy_index(x, y)] = c if on else (0, 0, 0)
33    np.write()                     # panele gönder / push to the panel
34
35while True:
36    for level in range(0, 256, 8):         # kalp yavaşça yanar / heart fades in
37        draw_bitmap(HEART, (level, 0, 0))
38        time.sleep_ms(20)
39    for level in range(255, -1, -8):       # ve söner / and fades out
40        draw_bitmap(HEART, (level, 0, 0))
41        time.sleep_ms(20)

NeoPixelマトリクスのプロジェクトアイデア

• スクロール表示の看板：ESP32でインターネットから取得したメッセージや時刻をスクロール表示します。時計にはESP32のNTP時計の記事の方法を使えます。
• スネークやブロックのゲーム：16x16パネルとジョイスティックでカラフルなミニゲーム機を作ります。
• 音楽に反応するスペクトラム：マイクで測った音の大きさを色の列で表示します。詳しくは音楽に反応するLEDの記事にあります。
• アイコンのバッジ：8x8パネルで、笑顔、ハート、矢印などのアイコンをボタンで順に切り替えます。
• カラフルな温度計：DHT11で測った温度に応じて、青から赤へ満ちていくバーを描きます。
• スマホで操作：ESP32にWLEDをインストールし、用意された2DエフェクトでパネルをWi-Fi経由で操作します。
• クリスマスの飾り：雪が降るアニメーションや星のアニメーションで、クリスマスツリーのLEDのプロジェクトに見ごたえのあるパネルを加えます。

よくある間違いと対処法

NeoPixelマトリクスは、手頃な価格のパネルでプロジェクトにカラフルで動きのあるディスプレイを加える、いちばん楽しい方法です。小さく始めましょう。まず8x8パネルを低い明るさで動かし、xyIndex関数をしっかり動作させてから、文字のスクロール表示や16x16のアニメーションに進みます。単色の文字や数字を表示するだけなら、MAX7219 LEDマトリクスのほうが消費電流の少ない選択肢です。BlueGraysアプリでは、WS2812Bのパトランプ、ナイトライダー、アニメーションのプロジェクトや、8x8・16x16マトリクスのスネークゲームを、回路図とコード付きでステップごとに確認できます。