M5Stick CPlus では、drawBitmap() 関数や、drawXBitmap() 関数で画面に画像を描画することができる。
そこで、今回はこれらの関数が扱う画像のフォーマットを調べてみた。

サンプルプログラム

platformio.ini

[env:m5stick-c]
platform = espressif32
board = m5stick-c
framework = arduino
lib_deps = m5stack/M5StickCPlus@^0.1.0

src/main.cpp

#include <M5StickCPlus.h>

const uint8_t data[1024] = {
  0x80, 0xc0, 0x0f, 0x03, 0x81, 0x83, 0xc3, 0xff,
  0x80, 0xc0, 0x0f, 0x03, 0x81, 0x83, 0xc3, 0xff,
};

uint8_t data2[1024], data3[1024], data4[1024];

void setup() {
  M5.begin();
  M5.Lcd.setRotation(0);
  for (int i = 0; i < 64; i++) {
    data2[i] = 0xff;
    data3[i] = i;
    data4[i] = i % 2 == 0 ? (1 << (i / 2 % 16)) : (1 << (((i / 2 + 8) % 16)));
  }
}

void loop() {
  M5.update();
  if (M5.BtnA.wasReleased()) {
    M5.Lcd.fillScreen(TFT_BLACK);
    M5.Lcd.drawXBitmap(60, 60, data, 8, 8, TFT_WHITE);
    M5.Lcd.drawXBitmap(60, 120, data, 12, 8, TFT_WHITE);
    M5.Lcd.drawXBitmap(60, 180, data, 16, 8, TFT_WHITE);
  }
  if (M5.BtnB.wasReleased()) {
    M5.Lcd.fillScreen(TFT_DARKGREY);
    M5.Lcd.drawBitmap(60, 60, 8, 8, data2);
    M5.Lcd.drawBitmap(60, 120, 12, 8, data3);
    M5.Lcd.drawBitmap(60, 180, 16, 8, data4);
  }
}

描画結果

画面を60倍のマイクロスコープで拡大し、撮影した。

drawXBitmap による描画

Aボタンを押すと、上から順に以下の図形が描画された。

drawBitmap による描画

Bボタンを押すと、上から順に以下の図形が描画された。

画像のフォーマット

プログラムと描画結果から、画像のフォーマットは以下のようになっていると推測できる。

drawXBitmap

1ピクセルを1ビットで表し、「1」は描画する、「0」は描画しない (または背景色で描画する) を表す。
画像は1行を (横幅を8で割って切り上げた数)バイトで表す。
各行のデータをまとめて、上の行から下の行の順でデータを並べる。
1行のデータは、左のデータから右のデータの順で格納する。
1バイトの中では、左のデータをLSB、右のデータをMSBで表す。
横幅が8の倍数でないときは、最後のバイトの右のデータを捨てる。

drawBitmap

1ピクセルを2バイトで表す。各ピクセルはデータを符号なし・16ビット・リトルエンディアンの整数とみなし、下位5ビットで青の輝度、真ん中の6ビットで緑の輝度、上位5ビットで赤の輝度を表す。
画像は1行を (横幅×2)バイトで表す。
各行のデータをまとめて、上の行から下の行の順でデータを並べる。
1行のデータは、左のデータから右のデータの順で格納する。