プロジェクト概要

このチュートリアルでカバーする6つのプロジェクト：

• プロジェクト1– 動く点（基本マトリックス設定）
• プロジェクト2– 8 × 8 マトリックス上のテキストスクロール
• プロジェクト3– HTTPテキスト：電話またはPCからWi-Fi経由でテキストを送信
• プロジェクト4– QMI8658加速度センサーで制御されるTilt Dot
• プロジェクト5– 常に上を向く矢印 (QMI8658を使用したオリエンテーションポインター)
• プロジェクト6– ブザーと傾斜制御を備えたターゲットゲーム

どの段階でも迷った場合は、以下の各プロジェクトに提供されているスニペットと設定を比較してください。

はじめに

プロジェクトは最もシンプルなアニメーション（単独で動くドット）から始まり、段階的にテキスト表示、Wi-Fi制御を追加し、最終的にはQMI8658加速度センサーを使用したセンサーベースのインタラクションへと発展します。最終的にはLEDマトリックスの制御方法やボードの傾きへの反応方法を理解できるようになります。

Arduino IDE への ESP32-S3 ボードのインストール

コードをアップロードする前に、Arduino IDEで公式のESP32ボードサポートをインストールし、ESP32-S3ボードプロファイル（例えばESP32-S3 dev module）を選択してください。これにより、コンパイルとアップロード時に適切なフラッシュサイズ、周波数、USB設定が適用されます。

必要なライブラリのインストール

以下のプロジェクトには以下のライブラリが必要です：

• Adafruit NeoPixel
• Adafruit GFX
• Adafruit NeoMatrix
• QMI8658（Lahav Gahali作）

Arduinoライブラリマネージャーで一度インストールすれば、6つのプロジェクトすべてで再利用できます。

QMI8658加速度センサーについて

QMI8658は、3軸加速度計と3軸ジャイロスコープを組み合わせた6軸IMUです。これらのプロジェクトでは、基板の傾斜や向きを検出するために加速度計の値が使用されます。

プロジェクト全体で使用される軸の規則：

• X– 左 / 右
• |||– 前進 / 後退
• Z– 垂直方向（上 / 下）

すべての傾斜ベースのプロジェクトでは、加速度計の測定範囲と出力データレートを一度設定すると、値を読み取ってドットを移動させたり、矢印の向きを変えたり、ゲームを制御したりします。

// Common QMI8658 configuration used in tilt projects
// (Projects 4, 5, and 6)

const auto ACC_RANGE   = QMI8658AccRange_2g;
const auto ACC_ODR     = QMI8658AccODR_31_25Hz;
const auto GYR_RANGE   = QMI8658GyrRange_256dps;
const auto GYR_ODR     = QMI8658GyrODR_31_25Hz;

// Sensitivity factor for converting tilt to pixels
const float TILT_TO_PIXEL_SCALE = 4.0f;   // increase for more sensitivity
    

プロジェクト1 – 移動するドット（基本マトリックス設定）

Project 1 は、LEDマトリックスの配線と基本的なNeoMatrix設定を確認するための、シンプルな移動するドットのアニメーションです。マトリックスの寸法、データピン、輝度、およびドットの移動速度を定義します。

キー設定

// Project 1 – Moving Dot (basic matrix setup)

// Matrix geometry
#define MATRIX_PIN       14
#define MATRIX_WIDTH      8
#define MATRIX_HEIGHT     8

// Layout (choose one; many boards use ZIGZAG or PROGRESSIVE)
#define MATRIX_LAYOUT  (NEO_MATRIX_TOP + NEO_MATRIX_LEFT + \
                        NEO_MATRIX_ROWS + NEO_MATRIX_ZIGZAG)
// Alternative if needed:
// #define MATRIX_LAYOUT  (NEO_MATRIX_TOP + NEO_MATRIX_LEFT + \
//                         NEO_MATRIX_ROWS + NEO_MATRIX_PROGRESSIVE)

// Visual parameters
const uint8_t  P1_BRIGHTNESS     = 40;         // overall brightness (0–255)
const uint16_t P1_DOT_COLOR      = matrix.Color(0, 255, 0); // green dot
const uint16_t P1_STEP_DELAY_MS  = 80;         // smaller = faster movement
    

変更することによりP1_DOT_COLORそしてP1_STEP_DELAY_MSさまざまな色やアニメーションの速度を素早くテストできます。

プロジェクト2 – テキストスクロール

プロジェクト2は、スクロールするテキストなどを表示します。|||ロボジャックス. メッセージ自体、スクロール方向、文字色、速度を制御できます。このプロジェクトは、非常に小さなマトリックス上でのテキスト表示を紹介します。

キー設定

// Project 2 – Text Scroll

// Scrolling message
const char* P2_MESSAGE = "Robojax";

// Text color (R, G, B)
const uint16_t P2_TEXT_COLOR = matrix.Color(255, 0, 0);  // red text

// Scroll speed
const uint16_t P2_SCROLL_DELAY_MS = 70;  // smaller = faster scroll

// Scroll direction (you will use this in your logic)
// Possible values: -1 for left, +1 for right, or use an enum
const int8_t P2_SCROLL_DIR_X = -1;  // -1 = scroll left, +1 = scroll right
const int8_t P2_SCROLL_DIR_Y =  0;  //  0 = no vertical scroll
    

後で垂直方向（上下）にスクロールする場合は、P2_SCROLL_DIR_X宛先0そして使用P2_SCROLL_DIR_Y代わりに。

プロジェクト3 – モバイルフォンテキスト（Wi-Fi制御メッセージ）

プロジェクト3では、ESP32-S3を小さなWebサーバーに変えます。Wi-Fiでボードに接続し、そのWebページを開いてメッセージを入力します。入力されたテキスト、色、スクロール速度は、マトリックス上で同じテキストスクロール効果をリアルタイムに駆動するために使用されます。

Wi-Fiとテキスト設定

// Project 3 – HTTP Text

// Wi-Fi credentials (change to your own network)
const char* P3_WIFI_SSID     = "YourWiFiName";
const char* P3_WIFI_PASSWORD = "YourWiFiPassword";

// Default text before anything is sent from the browser
String P3_currentText = "Robojax";

// Default color for the HTTP-controlled text
uint16_t P3_TEXT_COLOR = matrix.Color(0, 255, 255); // cyan

// Scroll speed for HTTP text
uint16_t P3_SCROLL_DELAY_MS = 80;  // can be updated from web page

// Allowed scroll directions (used as options in the HTML form)
enum P3_Direction {
  P3_LEFT,
  P3_RIGHT,
  P3_UP,
  P3_DOWN
};
P3_Direction P3_scrollDirection = P3_LEFT;
    

ウェブページ上で、ユーザーが方向と速度を選択します。あなたのコードは単純に更新します|||P3_scrollDirectionそしてP3_SCROLL_DELAY_MS選択されたオプションに基づいて。

プロジェクト4 – 傾斜ドット（QMI8658使用）

プロジェクト4はQMI8658加速度センサーを読み取り、ボードの傾きに応じてマトリックス上の単一ドットを動かします。ボードが平らな状態ではドットは中央に位置します。ボードを傾けると、その方向にドットが移動します。

`

マトリックスとチルト設定

// Project 4 – Tilt Dot

// Matrix geometry / brightness
#define MATRIX_PIN_TILT       14
#define MATRIX_WIDTH_TILT      8
#define MATRIX_HEIGHT_TILT     8

const uint8_t  P4_BRIGHTNESS   = 40;
const uint16_t P4_DOT_COLOR    = matrix.Color(0, 255, 0); // green
const uint16_t P4_UPDATE_DELAY = 30;  // ms between updates

// QMI8658 configuration (reuse from common settings if desired)
const auto P4_ACC_RANGE = QMI8658AccRange_2g;
const auto P4_ACC_ODR   = QMI8658AccODR_125Hz;

// Mapping accelerometer to pixel offset
// Negative sign may be adjusted depending on how the board is held
const float P4_TILT_SCALE_X = 3.5f; // affects left/right sensitivity
const float P4_TILT_SCALE_Y = 3.5f; // affects up/down sensitivity
    

あなたのコードでは、加速度計の測定値を次のような範囲にクランプしています[-1, 1]、それらを掛け合わせてP4_TILT_SCALE_XそしてP4_TILT_SCALE_Y中心座標に加算します。動きが逆に感じられる場合は、符号を反転させるだけです。

プロジェクト5 – 常に上向きの矢印

プロジェクト5は、8×8マトリックス上にボードの「上」側を常に指し示す矢印を表示します。ボードを回転させると、矢印も回転し、上面を向いている側を指すようになります。

矢印と方向設定

// Project 5 – Arrow Always Up

// Matrix brightness and color for the arrow
const uint8_t  P5_BRIGHTNESS     = 50;
const uint16_t P5_ARROW_COLOR    = matrix.Color(255, 150, 0);  // orange

// How often to update orientation
const uint16_t P5_UPDATE_DELAY_MS = 40;

// Tilt thresholds (in g) used to decide which side is "up"
// Adjust according to the board orientation in your video/demo
const float P5_TILT_THRESHOLD_LOW  = -0.25f;
const float P5_TILT_THRESHOLD_HIGH =  0.25f;

// Example mapping corners/sides based on accelerometer values
// (used in your logic to choose which arrow shape to draw)
/*
  ax, ay conditions (examples):
    ax >  P5_TILT_THRESHOLD_HIGH  -> USB side up
    ax <  P5_TILT_THRESHOLD_LOW   -> opposite USB side up
    ay >  P5_TILT_THRESHOLD_HIGH  -> one lateral side up
    ay <  P5_TILT_THRESHOLD_LOW   -> other lateral side up
*/
    

矢印の実際の描画は、以下で実装されていますmatrix.drawPixel()そしてmatrix.drawLine()重要な部分は、傾斜ゾーンに基づいてどの矢印の向きを使用するかを決定することです。P5_TILT_THRESHOLD_LOWそしてP5_TILT_THRESHOLD_HIGH.

プロジェクト6 – ターゲットゲーム（傾斜操作）

プロジェクト6は、加速度センサーを使用してプレイヤーのドットを操作し、ターゲットのピクセル上に移動させ、ターゲットに命中するとマトリックスとブザーの両方からフィードバックが得られる小さなゲームです。

ゲームとブザー設定

// Project 6 – Tilt-Based Target Game

// Matrix brightness
const uint8_t P6_BRIGHTNESS = 60;

// Colors for game elements
const uint16_t P6_PLAYER_COLOR    = matrix.Color(0, 255, 0);   // green
const uint16_t P6_TARGET_COLOR    = matrix.Color(255, 0, 0);   // red
const uint16_t P6_BACKGROUND_COLOR = matrix.Color(0, 0, 0);    // off
const uint16_t P6_HIT_FLASH_COLOR = matrix.Color(255, 255, 0); // yellow on hit

// Buzzer pin and timing
const int      P6_BUZZER_PIN       = 4;       // change if wired differently
const uint16_t P6_BUZZER_ON_MS     = 120;     // beep duration
const uint16_t P6_BUZZER_OFF_MS    = 80;      // pause between beeps
const uint8_t  P6_BUZZER_VOLUME    = 128;     // if using PWM, duty cycle (0–255)

// Movement and game timing
const uint16_t P6_UPDATE_DELAY_MS  = 35;      // game loop delay
const float    P6_TILT_SCALE_X     = 3.5f;    // convert tilt to pixels (left/right)
const float    P6_TILT_SCALE_Y     = 3.5f;    // convert tilt to pixels (up/down)

// Minimum distance in pixels to count as a "hit"
const uint8_t  P6_HIT_DISTANCE_MAX = 0;       // 0 = exact same pixel
    

ゲームロジックでは、以下のことを行います：

• 加速度計を読み取り、スケーリングされた量だけプレイヤーのドットを移動させます。
• プレイヤーの位置を8×8グリッド内に制限する。
• プレイヤーの位置がターゲットの位置と一致するか（または許容距離内にあるか）を確認します。
• ヒット時、マトリックスをフラッシュしてP6_HIT_FLASH_COLORそしてブザーを起動します|||P6_BUZZER_ON_MSそしてP6_BUZZER_OFF_MS.
• それからターゲットを新しいランダムな位置に移動させ、続行します。

ピンマップ

結論

これらの6つのプロジェクトは、Waveshare ESP32-S3 RGB LEDマトリックスを操作するための基本的な構成要素を網羅しています：基本的なピクセル制御、テキストスクロール、Wi-Fiベースのインタラクション、そしてQMI8658加速度センサーを使用した傾斜ベースのグラフィックスとゲームです。

これらのアイデアを組み合わせて、スコアボード、小型ステータスディスプレイ、ミニゲーム、通知パネルなど、傾きやタッチ、スマートフォンやコンピュータからのメッセージで動作する独自のプロジェクトを構築できます。