Arduino UNO R4 WiFiのLEDマトリックスを使う

Arduino UNO R4 WiFi内蔵のLEDマトリックスを使い始めましょう。LEDマトリックスの制御方法やアニメーションの作成、グラフィックス、さらには、ゲームの作成といった様々な技術を学びましょう。

訳者註: LEDマトリックスに、美咲フォントを表示するためのライブラリを作成しました。よろしければご覧ください。

Author:Jacob Hylén & Tom IgoeLast revision:2026/03/16

Arduino UNO R4 WiFiは、12x8 LEDマトリックスが搭載されています。グラフィックスの表示やアニメーション、インターフェイスとしての動作、ゲームの作成などに利用できます。

目的

マトリックスとAPIは、いくつかの異なる方法でプログラムできるように開発されました。それぞれ異なるアプリケーションに適しています。このガイドでは、LEDマトリックスのプログラミングに関する基本的な概念を紹介し、あなた自身がアニメーションの作成ができるようになります。この際、アニメーションとイメージを作成するための、2つの異なるLEDの制御方法に焦点をあてます。これにより、どの方法があなたにとって最適かを決めやすくします。

必要なハードウェアとソフトウェア

マトリックスの初期化

LEDマトリックスライブラリを利用するには、スケッチの始めに、いくつかのことを追加する必要があります。

まず、以下のように、スケッチの先頭でライブラリをインクルードします。

1

#include "Arduino_LED_Matrix.h"

次に、スケッチでLEDマトリックスオブジェクトを作成する必要があります。以下の行を、先ほどの行のすぐ下に追加します。

1

ArduinoLEDMatrix matrix;

最後に、void setup()に、以下の行を追加して、LEDマトリックスを開始します。

1

matrix.begin();

上記を全てまとめると、以下のようになります。

1
2
3
4
5
6
7
8


#include "Arduino_LED_Matrix.h"

ArduinoLEDMatrix matrix;

void setup() {
  Serial.begin(115200);
  matrix.begin();
}

フレームの書き方

UNO R4 WiFiのLEDマトリックスライブラリはフレームを作成し、フレームを表示するバッファにロードすることにより動作します。

フレームは、任意の時点でマトリックスに表示される画像です。アニメーションが一連の画像であれば、フレームはこの一連の画像の一つです。

UNO R4 WiFiの12x8 LEDを制御するには、最低96ビットのメモリが必要です。ライブラリは2種類の方法でメモリを確保する方法を提供します。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10


byte frame[8][12] = {
  { 0, 0, 1, 1, 0, 0, 0, 1, 1, 0, 0, 0 },
  { 0, 1, 0, 0, 1, 0, 1, 0, 0, 1, 0, 0 },
  { 0, 1, 0, 0, 0, 1, 0, 0, 0, 1, 0, 0 },
  { 0, 0, 1, 0, 0, 0, 0, 0, 1, 0, 0, 0 },
  { 0, 0, 0, 1, 0, 0, 0, 1, 0, 0, 0, 0 },
  { 0, 0, 0, 0, 1, 0, 1, 0, 0, 0, 0, 0 },
  { 0, 0, 0, 0, 0, 1, 0, 0, 0, 0, 0, 0 },
  { 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 }
};

この方法は、配列のパターンが画像になっているので、理解しやすいです。また、実行時に編集するのも容易です。上記の配列は、ハート型で、スクリーン上に表示される画像です。

個々のピクセルを指し示すには、アドレスを選択して値を変更します。0から数えることに注意してください。以下のプログラムは左から3番目、上から2番目のピクセルを点灯させます。

1
2
3


frame[2][1] = 1;

matrix.renderBitmap(frame, 8, 12);

しかし、この方法は必要以上のメモリを消費します。各LEDは状態を格納するのに1ビットだけ必要ですが、8ビット(1バイト)使っています。フレームを格納するのに、よりメモリ効率の高い方法は、32ビット整数の配列をつかうことです。

このセクションでは、これらのフレームを自分でどのように作成するかを紹介します。しかし、これを実行するツールを作成したので、この演習をとばしたい場合は、ここをクリックしてください。

以下は、同じハートを32ビット整数の配列で表したものです。

1
2
3
4
5


unsigned long frame[] = {
  0x3184a444,
  0x42081100,
  0xa0040000
};

unsigned long型の整数は32ビット保持します。96÷32は3なので、unsigned longの配列はLEDマトリックスが必要なすべてのビットを保持するのに効率的な手段です。

ところで、これらの16進数の変数はピクセルのどの部分に関係しているのでしょうか? 16進数を2進数にすると、わかります。以下のコードで実行できます。

1
2
3


for (int b = 0; b < 3; b++) {
    Serial.println(frame[b], BIN);
  }

これは、配列のビット値を表示します。出力は以下のようになります。

1
2
3


110001100001001010010001000100
1000010000010000001000100000000
10100000000001000000000000000000

しかし、この方法では、全てのビットを表示できません。配列の各要素は32ビットなので、全てのビットを表示するには先頭に0を付け加えます。

1
2
3


00110001100001001010010001000100
01000010000010000001000100000000
10100000000001000000000000000000

次に、12ビットのグループに分割すると、以下のようなハートが復元されます。

1
2
3
4
5
6
7
8


001100011000
010010100100
010001000100
001000001000
000100010000
000010100000
000001000000
000000000000

ヒント: CTRL/command + Fで、「1」を検索し、1をハイライト表示すれば、ハートを見つけやすくなります。

いくつかのフレームを用意したら、以下のようにしてロードし、表示できます。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17


const uint32_t happy[] = {
    0x19819,
    0x80000001,
    0x81f8000
};

const uint32_t heart[] = {
    0x3184a444,
    0x44042081,
    0x100a0040
};

  matrix.loadFrame(happy);
  delay(500);

  matrix.loadFrame(heart);
  delay(500);

テストする

異なるフレームをボードに表示する2つの基本的なスケッチで、これらの概念を適用してみましょう。最初は、32ビット整数3つのフレームで、ひとつづつロードします。

以下は、最初に笑顔をマトリックスにロードし、ハートに変えます。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27


#include "Arduino_LED_Matrix.h"

ArduinoLEDMatrix matrix;

void setup() {
  Serial.begin(115200);
  matrix.begin();
}

const uint32_t happy[] = {
    0x19819,
    0x80000001,
    0x81f8000
};
const uint32_t heart[] = {
    0x3184a444,
    0x44042081,
    0x100a0040
};
  
void loop(){
  matrix.loadFrame(happy);
  delay(500);

  matrix.loadFrame(heart);
  delay(500);
}

スケッチはとても単純です。そして、結果は非常に表現力豊かで、プロジェクトの状態を簡単に表示することができます。

次は、アプローチを変えて、実行時に変更するビットマップを作成しましょう。このスケッチは、顔の一部を表示するいくつかの関数を含んでいます。そして、特定のピクセルをオフにすることで、左目をウインクします。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70


#include "Arduino_LED_Matrix.h"

ArduinoLEDMatrix matrix;

void setup() {
  Serial.begin(115200);
  matrix.begin();
}

uint8_t frame[8][12] = {
  { 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 },
  { 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 },
  { 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 },
  { 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 },
  { 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 },
  { 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 },
  { 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 },
  { 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0 }
};

void leftEye(){
  //Left eye
  frame[1][3] = 1;
  frame[1][4] = 1;
  frame[2][3] = 1;
  frame[2][4] = 1;
}

void wink(){
  //Wink with the left eye
  frame[1][3] = 0;
  frame[1][4] = 0;
  frame[2][3] = 1;
  frame[2][4] = 1;
}

void rightEye(){
  //Right eye
  frame[1][8] = 1;
  frame[1][9] = 1;
  frame[2][8] = 1;
  frame[2][9] = 1;
}

void mouth(){
  //Mouth
  frame[5][3] = 1;
  frame[5][9] = 1;
  frame[6][3] = 1;
  frame[6][4] = 1;
  frame[6][5] = 1;
  frame[6][6] = 1;
  frame[6][7] = 1;
  frame[6][8] = 1;
  frame[6][9] = 1;
}

void loop(){
leftEye();
rightEye();
mouth();

matrix.renderBitmap(frame, 8, 12);

delay(1000);
wink();

matrix.renderBitmap(frame, 8, 12);
delay(1000);
}

リソース

この記事の残りは、関数の例や、フレームギャラリー、さまざまな方法でLEDマトリクスを始めるのに役立つツールといったリソースを集めたものです。

スクロールするテキストの例

LEDマトリックスは、ArduinoGraphicsライブラリを使い、文字表示をサポートしています。以下のことが可能です。

matrix.beginText(x,y, 0xFFFFFF)でテキストの開始位置を設定します。“0xFFFFFF"は、デフォルトの色(赤)を表します。ArduinoGraphicsライブラリは複数の色をサポートする他のハードウェアもサポートするので、色を指定する必要があります。
matrix.printText("This message is printed")でテキストを表示します。
matrix.endText(direction)で、表示を停止し、(オプションで)スクロールする方向を指定します。
SCROLL_LEFTとSCROLL_RIGHTをサポートしています。スクロール不要であれば、何も指定しません。

以下の例は、“Hello World!“をマトリックスに表示します。

この例を動かすには、LEDマトリックスにキャラクタを表示するArduinoGraphicsライブラリを、ライブラリマネージャを使いインストールする必要があります。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42


// To use ArduinoGraphics APIs, please include BEFORE Arduino_LED_Matrix
#include "ArduinoGraphics.h"
#include "Arduino_LED_Matrix.h"

ArduinoLEDMatrix matrix;

void setup() {
  Serial.begin(115200);
  matrix.begin();

  matrix.beginDraw();
  matrix.stroke(0xFFFFFFFF);
  // add some static text
  // will only show "UNO" (not enough space on the display)
  const char text[] = "UNO r4";
  matrix.textFont(Font_4x6);
  matrix.beginText(0, 1, 0xFFFFFF);
  matrix.println(text);
  matrix.endText();

  matrix.endDraw();

  delay(2000);
}

void loop() {

  // Make it scroll!
  matrix.beginDraw();

  matrix.stroke(0xFFFFFFFF);
  matrix.textScrollSpeed(50);

  // add the text
  const char text[] = "    Hello World!    ";
  matrix.textFont(Font_5x7);
  matrix.beginText(0, 1, 0xFFFFFF);
  matrix.println(text);
  matrix.endText(SCROLL_LEFT);

  matrix.endDraw();
}

訳者註: Arduino UNO R4 WiFiのLEDマトリックスに、美咲フォントを表示するためのライブラリを作成しました。

フレームギャラリー

フレームとアニメーションのギャラリーを設計し、ライブラリに含めました。以下のコード片を使い、UNO R4 WiFiにロードすれば表示できます。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14


#include "Arduino_LED_Matrix.h"   // Include the LED_Matrix library

ArduinoLEDMatrix matrix;          // Create an instance of the ArduinoLEDMatrix class

void setup() {
  Serial.begin(115200);           // Initialize serial communication at a baud rate of 115200
  matrix.begin();                 // Initialize the LED matrix

}

void loop() {
  // Load and display the basic emoji frame on the LED matrix
  matrix.loadFrame(LEDMATRIX_EMOJI_BASIC);
}

loop()にあるmatrix.loadFrame()内のパラメータを変更すれば、利用可能なフレームの中から選ぶことができます。

以下のフレームが利用できます。

LEDMATRIX_BLUETOOTH
LEDMATRIX_BOOTLOADER_ON
LEDMATRIX_CHIP
LEDMATRIX_CLOUD_WIFI
LEDMATRIX_DANGER
LEDMATRIX_EMOJI_BASIC
LEDMATRIX_EMOJI_HAPPY
LEDMATRIX_EMOJI_SAD
LEDMATRIX_HEART_BIG
LEDMATRIX_HEART_SMALL
LEDMATRIX_LIKE
LEDMATRIX_MUSIC_NOTE
LEDMATRIX_RESISTOR
LEDMATRIX_UNO

あるいは、以下のようにすることで、LEDマトリックスにアニメーションを表示できます。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15


#include "Arduino_LED_Matrix.h"   //Include the LED_Matrix library

// Create an instance of the ArduinoLEDMatrix class
ArduinoLEDMatrix matrix;  

void setup() {
  Serial.begin(115200);
  // you can also load frames at runtime, without stopping the refresh
  matrix.loadSequence(LEDMATRIX_ANIMATION_STARTUP);
  matrix.begin();
  matrix.play(true);
}

void loop() {
}

この場合は、setup()にあるmatrix.loadSequence()内のパラメータを変更すれば、利用可能なものの中から選ぶことができます。

以下のアニメーションが利用できます。

LEDMATRIX_ANIMATION_STARTUP
LEDMATRIX_ANIMATION_TETRIS_INTRO
LEDMATRIX_ANIMATION_ATMEGA
LEDMATRIX_ANIMATION_LED_BLINK_HORIZONTAL
LEDMATRIX_ANIMATION_LED_BLINK_VERTICAL
LEDMATRIX_ANIMATION_ARROWS_COMPASS
LEDMATRIX_ANIMATION_AUDIO_WAVEFORM
LEDMATRIX_ANIMATION_BATTERY
LEDMATRIX_ANIMATION_BOUNCING_BALL
LEDMATRIX_ANIMATION_BUG
LEDMATRIX_ANIMATION_CHECK
LEDMATRIX_ANIMATION_CLOUD
LEDMATRIX_ANIMATION_DOWNLOAD
LEDMATRIX_ANIMATION_DVD
LEDMATRIX_ANIMATION_HEARTBEAT_LINE
LEDMATRIX_ANIMATION_HEARTBEAT
LEDMATRIX_ANIMATION_INFINITY_LOOP_LOADER
LEDMATRIX_ANIMATION_LOAD_CLOCK
LEDMATRIX_ANIMATION_LOAD
LEDMATRIX_ANIMATION_LOCK
LEDMATRIX_ANIMATION_NOTIFICATION
LEDMATRIX_ANIMATION_OPENSOURCE
LEDMATRIX_ANIMATION_SPINNING_COIN
LEDMATRIX_ANIMATION_TETRIS
LEDMATRIX_ANIMATION_WIFI_SEARCH

アニメーションの生成

フレームトアニメーションを生成し、ブラウザにLEDマトリックスを表示するツールを作成しました。このツールはArduino labsの一部で、実験的ソフトウェアに位置付けられています。

ツールを使うには、以下のスケッチをアップロードし、ブラウザが送信するシリアル通信を、ボードが受信できるようにする必要があります。

スケッチは、ファイル > スケッチ例 > LED_Matrix > LivePreview にもあります。

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21


#include "Arduino_LED_Matrix.h"

ArduinoLEDMatrix matrix;

void setup() {
  Serial.begin(115200);
  matrix.begin();
}

uint32_t frame[] = {
  0, 0, 0, 0xFFFF
};

void loop() {
  if(Serial.available() >= 12){
    frame[0] = Serial.read() | Serial.read() << 8 | Serial.read() << 16 | Serial.read() << 24;
    frame[1] = Serial.read() | Serial.read() << 8 | Serial.read() << 16 | Serial.read() << 24;
    frame[2] = Serial.read() | Serial.read() << 8 | Serial.read() << 16 | Serial.read() << 24;
    matrix.loadFrame(frame);
  }
}

LEDマトリックスツールを起動するには、ここをクリックしてください。

自分でアニメーションを作成したら、先ほど説明したように、使用できる形式でツールからエクスポートすることができます。

そのサイトには、このツールを利用するための多くのヒントがあります。

API

より高度なスケッチを書くために、以下に示したライブラリの全APIが利用できます。

メンバー	説明
`public ArduinoLEDMatrix()`	LEDマトリックスを制御するメインクラス。
`public void autoscroll(int32_t interval_ms)`	各フレームが表示される時間をミリ秒単位で設定する。
`public void begin()`	LEDマトリックスを開始する。
`public void next()`	シーケンスの次のフレームに手動で移る。
`public void loadFrame(const uint32_t buffer[3])`	シーケンスにない新しい一つのフレームをロードする。
`public void renderFrame(uint8_t frameNumber)`	ロードしたフレームを書く。
`public void loadSequence(const uint32_t frames[][4])`	アニメーションシーケンスをバッファに書く。ただし、表示しない。
`public void play(bool loop = false)`	フレームのシーケンスを表示する。オプションは無限にループするか、一度だけ表示するか。
`public bool sequenceDone()`	シーケンスが完了したか確認する。

メンバー

`ArduinoLEDMatrix()`

新しいLEDマトリックスオブジェクトを生成する。ライブラリのメソッドにアクセスするために利用される。

1

ArduinoLEDMatrix LEDMatrix;

`autoscroll()`

シーケンス内のフレームをオートスクロールする。

パラメータ

interval_ms シーケンス内のフレームが次のフレームに移るまでの時間をミリ秒単位で指定する。

`begin()`

LEDマトリックスを開始する。

1

LEDMatrix.begin()

`next()`

シーケンス内の次のフレームに移動する。

1

LEDMatrix.next()

`loadFrame()`

シーケンスにない一つのフレームをロードする。

1

LEDMatrix.loadFrame(buffer[i])

パラメータ

buffer[3] 32ビット整数の配列。各ビットがLEDを表す。

`renderFrame()`

シーケンス内の特定のフレームを表示する。

1

LEDMatrix.renderFrame(frameNumber)

パラメータ

int ロードするフレーム

`loadSequence()`

バッファにアニメーションのシーケンスをロードする。ただし表示しない。

1

LEDMatrix.frames[][4]

パラメータ

frameNumber シーケンスのどのフレームを表示するか指定する。

`play()`

ロードしたシーケンスをロードする。

1

LEDMatrix.play(state) //true or false

パラメータ

loop シーケンスをループさせるときはtrue、一度だけ表示するときはfalse。

`sequenceDone()`

シーケンスの表示が完了したのか、まだ完了していないのかを確認する。

リターン値

false まだ完了していない、true 完了した。

オリジナルのページ

https://docs.arduino.cc/tutorials/uno-r4-wifi/led-matrix/

最終更新日

August 16, 2026