画像のためのライブラリArduinoGraphics
Arduinoで画像を扱うためのライブラリ ArduinoGraphics が提供されています。ArduinoGraphics をインクルードすることで、フレーム単位でしか描画を行えなかったArduinoLEDMatrixクラスに図形を描画する関数群が追加されます。
インストール
ArduinoGraphicsは自動的にはインストールされないようなので、以下の手順に従ってインストールしてください。
1.

①Arduino IDEを起動し、メニューバーの『ツール』→『ライブラリを管理』を選択するか、またはArduino IDEウィンドウ左側の本棚のアイコンをクリックして『ライブラリマネージャー』を表示します。
2.

②Arduino IDEウィンドウの左側に『ライブラリマネージャー』が表示されるので、上部のテキスト入力欄に『ArduinoGraphics』と入力します。
③下に検索結果が表示されるので、『ArduinoGraphics』の項の『インストール』ボタンをクリックします。
※『ArduinoGraphics』という項目が表示されるのに『インストール』ボタンがなく、代わりに『削除』と表示されている場合は、すでにArduinoGraphicsがインストールされています。
3.

④『ライブラリArduinoGraphics○○のインストールに成功しました』(○○はバージョン)というメッセージが表示されたらインストール完了です(このメッセージは数秒で自動的に消えてしまいます)。
簡単な図形(長方形)を表示する
まずは非常に簡単な図形描画として、長方形を1つだけ表示するプログラムを作成します。
スケッチ
#include "ArduinoGraphics.h"
#include "Arduino_LED_Matrix.h"
ArduinoLEDMatrix matrix;
void setup() {
matrix.begin();
matrix.beginDraw();
matrix.stroke(0xffffff);
matrix.rect(1, 1, 10, 6);
matrix.endDraw();
matrix.end();
}
void loop() {
}
プログラム解説
ライブラリのインクルードおよびArduinoLEDMatrixクラス変数の宣言
#include "ArduinoGraphics.h"
#include "Arduino_LED_Matrix.h"
ArduinoLEDMatrix matrix;
Arduino UNO R4 ボード上のLEDマトリクスで図形を表示するには、”ArduinoGraphics.h” と ”Arduino_LED_Matrix.h” の2つが必要です。
“ArduinoGraphics.h” を “Arduino_LED_Matrix.h” より先にインクルードしなければならないことに注意してください。内部的には、先に ArduinoGraphics.h をインクルードすることでArduinoLEDMatrixクラスがArduinoGraphicsクラスのサブクラスとして定義され、ArduinoLEDMatrixクラスのインスタンスがArduinoGraphicsクラスの関数を使用できるようになります。
フレーム表示の例と同様、ArduinoLEDMatrixクラスのインスタンスを生成しておきます。
ArduinoLEDMatrixの使用開始・終了
void setup() {
matrix.begin();
matrix.beginDraw();
matrix.stroke(0xffffff);
matrix.rect(1, 1, 10, 6);
matrix.endDraw();
matrix.end();
}
begin()関数によってArduinoLEDMatrixクラスを初期化・使用開始、end()関数によって終了します。
描画オペレーションの開始・終了
void setup() {
matrix.begin();
matrix.beginDraw();
matrix.stroke(0xffffff);
matrix.rect(1, 1, 10, 6);
matrix.endDraw();
matrix.end();
}
beginDraw()関数で描画オペレーションを開始し、endDraw()関数で描画オペレーションを終了します。図形描画のためのすべての処理はこの2つの関数の間に記述する必要があるのだと思います。
…が、ソースを見ると、現状ではこの2つの関数は実際には何もしていません。将来の拡張用、または別の描画デバイスのときに処理をオーバーライドするためのものなのかもしれません。
描画色の設定
void setup() {
matrix.begin();
matrix.beginDraw();
matrix.stroke(0xffffff);
matrix.rect(1, 1, 10, 6);
matrix.endDraw();
matrix.end();
}
描画色の設定にはstroke()関数を使用します。
書式
void ArduinoGraphics.stroke(uint8_t r, uint8_t g, uint8_t b)
または
void ArduinoGraphics.stroke(uint32_t color)
stroke()関数は ArduinoGraphicsクラスのメンバ関数として定義されていますが、実際はそのサブクラスとして定義された『描画デバイスを表すクラス』のインスタンスに対して使用することになると思います。つまり ArduinoGraphics.h + Arduino_LED_Matrix.h の環境では、
ArduinoLEDMatrixクラスのインスタンス.stroke(引数)
という記述になります。本記事のArduinoGraphicsクラスの関数はほとんどすべて同じ使い方です。
引数
名前 | 型 | 意味 |
---|---|---|
r | uint8_t | RGB三原色のR(赤)の量を0~255で表す |
g | uint8_t | RGB三原色のG(緑)の量を0~255で表す |
b | uint8_t | RGB三原色のB(青)の量を0~255で表す |
color | uint32_t | 0xRRGGBB形式の24bitカラー |
実際には、Arduino UNO R4 では赤色LEDしか実装されておらず、各LEDは点灯/消灯の二値でしか制御されていないようです。つまり指定が#000000ならば消灯、それ以外の値なら点灯します。
#808080なら#FFFFFFの時の半分の明るさ、とはなりません。
またR要素が0でもG様子またはB要素が0でなければ点灯します。
他に色指定のための関数として、
背景色を指定する background()関数
塗りつぶし色を指定する fill()関数
が定義されています。引数による色指定の方法は同じです。
図形の描画
void setup() {
matrix.begin();
matrix.beginDraw();
matrix.stroke(0xffffff);
matrix.rect(1, 1, 10, 6);
matrix.endDraw();
matrix.end();
}
この例では、rect()関数によって長方形を描画しています。
書式
void ArduinoGraphics.rect(int x, int y, int width, int height)
引数
名前 | 型 | 意味 |
---|---|---|
x | int | 描画する長方形の左上頂点のx座標。負数を含め、スクリーン範囲外の座標を指定可能。 |
y | int | 描画する長方形の左上頂点のy座標。負数を含め、スクリーン範囲外の座標を指定可能。 |
width | int | 描画する長方形の幅(横方向のピクセル数) |
height | int | 描画する長方形の高さ(縦方向のピクセル数) |
動作
(x,y)を左上頂点の座標とし、幅width、高さheightの長方形を描画します。strokeで指定された色で各辺を描画し、fillで指定された色で内部を塗りつぶします。
頂点の座標はスクリーンの範囲外(負数を含む)を指定可です。幅や高さもスクリーンの大きさとは無関係に描画可能で、スクリーンからはみ出る座標・幅・高さを指定してもスクリーン内に見える部分が正常に描画されます。
この例では左上頂点座標が(1,1)、幅10、高さ6の長方形となります。fillを指定していないので、辺のみで内部が塗りつぶされない長方形が描画されます。
loop()でやることはなし
void loop() {
}
例によってsetup()関数の中だけで用事は済んでいるので、loop()関数の中には何も記述していません。
実行結果
実行するとこのようになります。

他の図形描画関数も試す
描画関数
図形を描画するメソッドとしては、rect()の他に
点を描画する point()関数
線分を表示する line()関数
楕円を描画する ellipse()関数
円を描画する circle()関数
があります。
例1の、
void setup() {
matrix.begin();
matrix.beginDraw();
matrix.stroke(0xffffff);
matrix.rect(1, 1, 10, 6);
matrix.endDraw();
matrix.end();
}
matrix.rect(1,1,10,6); の行をいろいろ差し替えて試してみましょう。
point()関数
点を描画します。
書式
void ArduinoGraphics.point(int x, int y)
引数
名前 | 型 | 意味 |
---|---|---|
x | int | 点を描画する位置のx座標 |
y | int | 点を描画する位置のy座標 |
動作
(x,y)の位置に、stroke()で指定した色で点を描画します。
使用例
matrix.point(3,2);
matrix.point(5,6);
matrix.point(7,2);

line()関数
2点を結ぶ線分を描画します。
書式
void ArdinoGraphics.line(int x1, int y1, int x2, int y2)
引数
名前 | 型 | 意味 |
---|---|---|
x1 | int | 始点のx座標 |
y1 | int | 始点のy座標 |
x2 | int | 終点のx座標 |
y2 | int | 終点のy座標 |
動作
始点(x1,y1)と終点(x2,y2)を結ぶ線分を、stroke()で指定した色で描画します。始点・終点がスクリーン内になくても、スクリーン内に見える部分を正常に描画します。
使用例
matrix.line(0, 0, 11, 7);
matrix.line(9, 0, 2, 7);

ellipse()関数
楕円を描画します。
書式
void ArduinoGraphics.ellipse(int x, int y, int width, int height)
引数
名前 | 型 | 意味 |
---|---|---|
x | int | 楕円の中心のx座標 |
y | int | 楕円の中心のy座標 |
width | int | 楕円の幅 |
height | int | 楕円の高さ |
動作
(x,y)を中心とし、幅width・高さheightの楕円を、周はstroke()関数で設定した色、内部はfill()関数で設定した色で描画します。楕円の一部がスクリーン外にはみ出るような中心座標や幅・高さを指定しても、スクリーン内に見える部分を正常に描画します。
使用例
matrix.ellipse(5,3,11,7);

ピクセル数が少ないので、さすがに曲線は厳しいですね…。
circle()関数
円を描画します。
書式
void ArduinoGraphics.circle(int x, int y, int diameter)
引数
名前 | 型 | 意味 |
---|---|---|
x | int | 円の中心のx座標 |
y | int | 円の中心のy座標 |
diameter | int | 円の直径(この手の関数では半径を与えることが多いですが、これは直径なので注意) |
動作
(x,y)を中心とし、直径がdiameterの円を、周はstroke()関数で設定した色、内部はfill()関数で設定した色で描画します。円の一部がスクリーン外にはみ出るような中心座標や幅・高さを指定しても、スクリーン内に見える部分を正常に描画します。
※実は、内部的には ellipse(x,y,diameter,diameter) を呼んでいるだけです。
使用例
matrix.circle(5, 3, 7);

やはりピクセル数が少ないと厳しいですね。
fill()関数
塗りつぶし色を設定します。
書式
void ArduinoGraphics.fill(uint8_t r, uint8_t g, uint8_t b)
または
void ArduinoGraphics.fill(uint32_t color)
引数
名前 | 型 | 意味 |
---|---|---|
r | uint8_t | RGB三原色のR(赤)の量を0~255で表す |
g | uint8_t | RGB三原色のG(緑)の量を0~255で表す |
b | uint8_t | RGB三原色のB(青)の量を0~255で表す |
color | uint32_t | 0xRRGGBB形式の24bitカラー |
動作
長方形・楕円・円の内部の塗りつぶし色を設定します。Arduino UNO R4 では赤色LEDしか実装されていないため、stroke()と同じく指定が#000000ならば消灯、それ以外の値なら点灯します。
使用例
matrix.fill(0xffffff);
matrix.rect(1, 1, 10, 6);

fill()関数で塗りつぶし色を設定することで、長方形の内部を塗りつぶしています。
まとめ
・ArduinoGraphics.hをインクルードすることで、Arduino UNO R4のLEDマトリクスで図形描画が行えるようになる
・直線、楕円、円、長方形の描画関数が実装されている
コメント