ESP32-S3 RGB LED矩陣項目1-基本點

ESP32-S3 RGB LED矩陣項目1-基本點

項目 1 – ESP32-S3 RGB LED 矩陣上嘅移動點點同心形動畫

喺呢個項目入面，我哋由 ESP32-S3 RGB LED 矩陣上最簡單嘅動畫開始：一個點點喺 8×8 RGB 顯示屏上面移動。除此之外，我哋仲加咗一個細細嘅心形動畫，等你可以喺開機嘅時候將塊板變成一個細細嘅裝飾顯示屏。呢個係一個好好嘅第一步，等你熟習控制矩陣上面嘅個別像素、顏色同動畫速度。

呢個系列嘅全部六個項目都會喺一條影片入面示範同解釋。同一條影片已經嵌入喺呢一頁，所以你可以睇到完整嘅逐步解釋同移動點點同心形動畫嘅現場示範。呢個項目嘅完整程式碼會自動載入喺文章下面，你可以喺程式碼部分下面列出嘅聯盟商店購買 ESP32-S3 RGB LED 矩陣模組。

如果你啱啱開始用呢塊板，呢個項目係一個完美嘅方法去：

• 確認你嘅 ESP32-S3 板同 USB 連接正常運作。
• 確認 8×8 RGB 矩陣已經連接到正確嘅引腳。
• 試驗基本嘅動畫時間、顏色同亮度。

ESP32-S3 RGB LED 矩陣模組概覽

呢個項目用嘅板係基於 ESP32-S3 微控制器，結合咗一個 8×8 RGB LED 矩陣（64 粒獨立可定址 RGB LED）、背面一個 QMI8658C 動作感測器，同一個 USB 端口用嚟供電同編程。

呢個模組嘅主要特點：

• ESP32-S3 雙核心微控制器，支援 Wi-Fi 同藍牙。
• 8×8 RGB LED 矩陣（64 粒 RGB LED）喺板嘅正面，好適合顯示圖示、文字同細遊戲。
• QMI8658C 加速度計 / 動作感測器 喺背面，等你可以偵測傾斜、移動同方向，用嚟做互動項目。
• USB 端口 用嚟編程同供電。
• 可存取引腳 喺邊緣位置，所以塊板仍然可以好似普通 ESP32 咁用嚟做其他 IO 項目。
• Boot 同 Reset 按鈕 用嚟進入編程模式同重新啟動你嘅程式。

喺呢個第一個項目入面，我哋只用咗塊板嘅 LED 矩陣部分，但同一硬件已經夠強大去運行文字顯示、網頁控制訊息、動作控制遊戲等等 — 呢啲都會喺呢個系列嘅其他項目入面涵蓋。

影片入面涵蓋嘅項目（時間戳）

全部六個項目都共用同一條 YouTube 影片。大約時間戳如下：

• 00:00 – 介紹
• 02:01 – 安裝 ESP32 板支援
• 03:32 – 安裝程式庫
• 05:32 – 項目 1：移動點點（同基本顏色 / 速度設定）
• 11:11 – 項目 2：文字滾動
• 12:59 – 項目 3：HTTP 文字
• 16:41 – 項目 4：傾斜點點
• 18:55 – 項目 5：向上箭嘴
• 20:02 – 項目 6：目標遊戲

為咗最好嘅理解，我哋強烈建議你一邊睇呢篇文章，一邊睇條影片。條影片會顯示點點同心形喺矩陣上面嘅實際行為，仲有 Arduino IDE 入面嘅所有步驟。

喺 Arduino IDE 入面安裝 ESP32 板支援

喺上載任何程式碼去 ESP32-S3 之前，你一定要喺 Arduino IDE 入面安裝 ESP32 板支援套件。喺影片入面，呢個步驟喺「安裝板支援」部分有示範。

一般步驟：

1. 打開 Arduino IDE，去 File > Preferences。
2. 喺「Additional Boards Manager URLs」欄位入面，加入官方 ESP32 板支援 URL。
3. 打開 Tools > Board > Boards Manager…，搜尋 ESP32，然後安裝 ESP32 板支援套件。
4. 安裝完成之後，去 Tools > Board，為你嘅 ESP32-S3 RGB 矩陣模組選擇正確嘅板。
5. 用 USB 連接塊板，然後喺 Tools > Port 下面選擇正確嘅序列埠。

如果冇選擇正確嘅板同序列埠，就算你嘅程式碼係啱嘅，都唔會上載成功。

安裝 NeoMatrix 同所需程式庫

LED 矩陣內部使用 Adafruit NeoPixel 驅動程式，為咗更方便嘅 2D 繪圖，我哋用 Adafruit NeoMatrix 程式庫。安裝 NeoMatrix 會自動拉入所需嘅依賴程式庫。

NeoMatrix 同依賴程式庫

從 Library Manager 安裝以下程式庫：

• Adafruit NeoMatrix
• Adafruit NeoPixel
• Adafruit GFX Library

喺 Library Manager 入面：

1. 打開 Sketch > Include Library > Manage Libraries…。
2. 搜尋 Adafruit NeoMatrix，然後撳 Install。
3. 允許 IDE 安裝所有建議嘅依賴程式庫（Adafruit GFX 同 Adafruit NeoPixel）。

QMI8658C 動作感測器程式庫（用於之後嘅項目）

項目 1 唔會直接用加速度計，但而家安裝動作感測器程式庫係一個好主意，因為項目 4、5 同 6 會需要用到。

從 Library Manager：

1. 用作者名搜尋 QMI8658 程式庫。
2. 安裝程式庫，等佢出現喺 File > Examples 下面，方便快速測試。

項目 1 – 程式碼設定（移動點點同心形）

執行Project 1嘅完整程式碼會自動載入喺呢篇文章下面嘅網站度。呢度我哋只集中講你多數會改嘅關鍵設定：引腳、像素數量、亮度、顏色同動畫速度。對於心心動畫，我哋仲會示範點樣控制顏色，以及心心係實心定係空心。

LED引腳同像素數量

喺呢個模組上，8×8 RGB矩陣連接去ESP32-S3嘅GPIO 14。像素總數係64（8 × 8）。喺你嘅程式碼入面，你應該會見到類似咁嘅嘢：

 
// 連接去8×8 RGB矩陣嘅引腳 
const int MATRIX_PIN = 14;
 // 喺呢個模組上一定要係14 
// LED總數（8 × 8矩陣） 
const int NUMPIXELS = 64; // 如果你用唔同尺寸嘅矩陣先至改 

如果你唔小心將NUMPIXELS留咗做16（由原本嘅NeoPixel範例嚟），咁就只會用到矩陣嘅四分之一，動畫唔會填滿成個8×8屏幕。

顏色順序同LED類型

唔同嘅LED燈帶同矩陣可能用唔同嘅顏色順序（例如，GRB而唔係RGB）。呢塊板上面嘅矩陣預期用RGB順序。喺NeoPixel或者NeoMatrix嘅建構函式入面，確保顏色類型設定正確：

 // NeoPixel風格物件嘅範例： 
Adafruit_NeoPixel pixels( NUMPIXELS, MATRIX_PIN, NEO_RGB + NEO_KHZ800 // 確保呢個同矩陣顏色順序一致 ); 

如果你發現顯示屏上面紅色同綠色調轉咗，首先檢查呢行，然後修正顏色順序。

動畫速度（步驟之間嘅延遲）

移動光點嘅速度通常由一個簡單嘅毫秒延遲值控制。延遲越細，郁動越快；延遲越大，郁動越慢。搵一個類似咁嘅變數：

 
// 光點移動之間嘅延遲（以毫秒計）
 int dotDelayMs = 50; // 50毫秒算幾快 

常見調整：

• 將dotDelayMs = 20;設做好快嘅移動光點。
• 將dotDelayMs = 100;或者更高設做慢啲、平靜啲嘅動畫。

喺loop()函數入面，呢個值通常每次更新畫面之後傳畀delay(dotDelayMs);。

光點顏色同亮度

移動光點嘅RGB顏色由三個0–255範圍嘅值控制（紅、綠、藍）。例如：

 
// 光點顏色（R, G, B）由0–255 uint8_t dotRed = 255; // 全紅 
uint8_t dotGreen = 0; // 冇綠 
uint8_t dotBlue = 0; // 冇藍 

咁樣會整出一個鮮紅色嘅光點。一啲有用嘅組合：

• 純紅：(255, 0, 0)
• 純綠：(0, 255, 0)
• 純藍：(0, 0, 255)
• 黃色：(255, 255, 0)
• 白色：(255, 255, 255)

整體亮度通常由一個獨立嘅亮度函數控制：

 
// 矩陣整體亮度（0–255） 
uint8_t matrixBrightness = 40; // 保持低啲避免太刺眼 // 喺setup()入面： matrix.setBrightness(matrixBrightness); 

大約30–60嘅數值通常喺室內用會幾舒服。

心心形狀設定

除咗移動光點之外，你仲可以喺板第一次開機嗰陣喺矩陣上面顯示一個細心心。文章嘅範例程式碼（喺下面載入）包含類似咁嘅設定：

 
// 心心顏色（實心心） 
uint8_t heartRed = 255; 
uint8_t heartGreen = 0; 
uint8_t heartBlue = 0; 
// 可選：彩虹或者空心模式 
bool showOutlinedHeart = false; 
// true = 淨係空心 
bool useRainbowHeart = false; 
// true = 隨時間轉顏色 

常見用法：

• 將showOutlinedHeart = false;同useRainbowHeart = false;設做一個實心紅色心心。
• 將showOutlinedHeart = true;設做淨係顯示心心嘅外框。
• 將useRainbowHeart = true;設做持續用彩虹效果循環心心顏色。

心心係用NeoMatrix座標函數喺文章下面嘅程式碼入面畫出嚟。你只需要改上面嘅變數就可以自訂佢嘅外觀。

總結

Project 1畀你一個簡單但強大嘅起點，用ESP32-S3 RGB LED矩陣：你學識點樣控制全部64粒像素、控制顏色、調整亮度，同設定動畫速度。你仲會見到喺同一塊硬件上面，由移動光點轉做靜態或者動畫心心係幾咁容易。

記得睇吓呢頁嵌入嘅完整影片，入面有移動光點同心心動畫嘅逐步示範，仲有其餘五個Project。完整原始碼喺呢篇文章下面有得攞，你可以透過程式碼部分下面列出嘅聯盟連結購買模組嚟支持未來嘅Project。

圖片

ESP32 S3 Matrix pin out

ESP32 S3 Matrix displaying green heart

ESP32 S3 Matrix displaying rainbow heart

ESP32-S3 RGB Matrix- Mobile Phone Text

ESP32-S3-Mtrix - Alway Up

ESP32 S3 Matrix pin out

ESP32 S3 Matrix displaying green heart

ESP32 S3 Matrix displaying rainbow heart

ESP32-S3 RGB Matrix- Mobile Phone Text

ESP32-S3-Mtrix - Alway Up

/* 
  Project 1: the Dot – ESP32-S3 RGB LED Matrix (Waveshare)

  dialysis a dot on scree and moves it
  
  ▶️ Video Tutorial:
  https://youtu.be/JKLuYrRcLMI

  📚⬇️ Resources & Code Page:
  https://robojax.com/RJT829

  QMI8658_RGB_2
*/

#include <Adafruit_NeoPixel.h>
#ifdef __AVR__
 #include <avr/power.h> // Required for 16 MHz Adafruit Trinket
#endif

// Which pin on the Arduino is connected to the NeoPixels?
#define PIN        14 // On Trinket or Gemma, suggest changing this to 1

// How many NeoPixels are attached to the Arduino?
#define NUMPIXELS 64 // Popular NeoPixel ring size

// When setting up the NeoPixel library, we tell it how many pixels,
// and which pin to use to send signals. Note that for older NeoPixel
// strips you might need to change the third parameter -- see the
// strandtest example for more information on possible values.
Adafruit_NeoPixel pixels(NUMPIXELS, PIN, NEO_RGB + NEO_KHZ800);

#define DELAYVAL 50 // Time (in milliseconds) to pause between pixels

void setup() {
  // These lines are specifically to support the Adafruit Trinket 5V 16 MHz.
  // Any other board, you can remove this part (but no harm leaving it):
#if defined(__AVR_ATtiny85__) && (F_CPU == 16000000)
  clock_prescale_set(clock_div_1);
#endif
  // END of Trinket-specific code.

  pixels.begin(); // INITIALIZE NeoPixel strip object (REQUIRED)
}

void loop() {
  pixels.clear(); // Set all pixel colors to 'off'

  // The first NeoPixel in a strand is #0, second is 1, all the way up
  // to the count of pixels minus one.
  for(int i=0; i<NUMPIXELS; i++) { // For each pixel...

    // pixels.Color() takes RGB values, from 0,0,0 up to 255,255,255
    // Here we're using a moderately bright green color:
    pixels.setPixelColor(i, pixels.Color(255, 255, 0));

    pixels.show();   // Send the updated pixel colors to the hardware.

    delay(DELAYVAL); // Pause before next pass through loop
    pixels.clear();
  }



}