Proyek Matriks LED RGB ESP32-S3 1- Titik Dasar

Proyek Matriks LED RGB ESP32-S3 1- Titik Dasar

Proyek 1 – Animasi Titik Bergerak dan Hati pada Matriks LED RGB ESP32-S3

Dalam proyek ini kita memulai dengan animasi paling sederhana yang mungkin pada Matriks LED RGB ESP32-S3: sebuah titik tunggal yang bergerak melintasi layar RGB 8×8. Di atas itu, kita menambahkan animasi hati kecil sehingga Anda dapat mengubah papan menjadi layar dekoratif mungil saat dinyalakan. Ini adalah langkah pertama yang bagus untuk mulai terbiasa mengontrol piksel individual, warna, dan kecepatan animasi pada matriks.

Keenam proyek dalam seri ini didemonstrasikan dan dijelaskan dalam satu video. Video yang sama disematkan di halaman ini, sehingga Anda dapat menonton penjelasan langkah demi langkah lengkap dan demonstrasi langsung dari animasi titik bergerak dan hati. Kode lengkap untuk proyek ini dimuat secara otomatis di bawah artikel, dan Anda dapat membeli modul Matriks LED RGB ESP32-S3 dari toko afiliasi yang tercantum di bawah bagian kode.

Jika Anda baru memulai dengan papan ini, proyek ini adalah cara yang sempurna untuk:

• Memverifikasi bahwa papan ESP32-S3 dan koneksi USB Anda berfungsi.
• Memastikan bahwa matriks RGB 8×8 terhubung ke pin yang benar.
• Mengeksperimen dengan pengaturan waktu animasi dasar, warna, dan kecerahan.

Ikhtisar Modul Matriks LED RGB ESP32-S3

Papan yang digunakan dalam proyek ini didasarkan pada mikrokontroler ESP32-S3, dikombinasikan dengan matriks LED RGB 8×8 (64 LED RGB yang dapat dialamatkan secara individual), sensor gerak QMI8658C di bagian belakang, dan port USB untuk daya dan pemrograman.:contentReference[oaicite:0]{index=0}

Fitur utama dari modul ini:

• ESP32-S3 mikrokontroler dual-core dengan dukungan Wi-Fi dan Bluetooth.
• Matriks LED RGB 8×8 (64 LED RGB) di bagian depan papan, ideal untuk ikon, teks, dan game kecil.
• Akselerometer / sensor gerak QMI8658C di sisi belakang, sehingga Anda dapat mendeteksi kemiringan, gerakan, dan orientasi untuk proyek interaktif.
• Port USB untuk pemrograman dan daya.
• Pin yang dapat diakses di sekitar tepi, sehingga papan masih dapat digunakan seperti ESP32 biasa untuk proyek IO lainnya.
• Tombol boot dan reset untuk memasuki mode pemrograman dan memulai ulang sketsa Anda.

Dalam proyek pertama ini kita hanya menggunakan bagian matriks LED dari papan, tetapi perangkat keras yang sama cukup kuat untuk menjalankan tampilan teks, pesan yang dikendalikan web, game yang dikendalikan gerakan, dan banyak lagi — yang dibahas dalam proyek lain dari seri ini.

Proyek yang Dicakup dalam Video (Stempel Waktu)

Keenam proyek berbagi video YouTube yang sama. Perkiraan stempel waktunya adalah:

• 00:00 – Pendahuluan
• 02:01 – Menginstal papan ESP32
• 03:32 – Menginstal pustaka
• 05:32 – Proyek 1: Titik Bergerak (dan pengaturan warna / kecepatan dasar)
• 11:11 – Proyek 2: Gulir Teks
• 12:59 – Proyek 3: Teks HTTP
• 16:41 – Proyek 4: Titik Miring
• 18:55 – Proyek 5: Panah Ke Atas
• 20:02 – Proyek 6: Game Target

Untuk pemahaman terbaik, Anda sangat disarankan untuk menonton video sambil mengikuti artikel ini. Video menunjukkan perilaku langsung dari titik dan hati pada matriks, plus semua langkah di dalam Arduino IDE.

Menginstal Papan ESP32 di Arduino IDE

Sebelum mengunggah kode apa pun ke ESP32-S3, Anda harus menginstal paket dukungan papan ESP32 di Arduino IDE. Dalam video, ini didemonstrasikan di sekitar bagian “menginstal papan”.

Langkah-langkah umum:

1. Buka Arduino IDE dan pergi ke File > Preferences.
2. Di bidang “Additional Boards Manager URLs”, tambahkan URL resmi papan ESP32.
3. Buka Tools > Board > Boards Manager…, cari ESP32, dan instal paket untuk papan ESP32.
4. Setelah instalasi, pergi ke Tools > Board dan pilih entri papan yang benar untuk modul Matriks RGB ESP32-S3 Anda.
5. Hubungkan papan melalui USB dan pilih port serialnya di bawah Tools > Port.

Jika papan dan port yang benar tidak dipilih, sketsa Anda tidak akan terunggah, bahkan jika kode Anda benar.

Menginstal NeoMatrix dan Pustaka yang Diperlukan

Matriks LED menggunakan driver Adafruit NeoPixel secara internal, dan untuk menggambar 2D yang lebih mudah kita menggunakan pustaka Adafruit NeoMatrix. Menginstal NeoMatrix akan secara otomatis menarik dependensi yang diperlukan.

NeoMatrix dan Dependensi

Instal yang berikut dari Library Manager:

• Adafruit NeoMatrix
• Adafruit NeoPixel
• Adafruit GFX Library

Di Library Manager:

1. Buka Sketch > Include Library > Manage Libraries….
2. Cari Adafruit NeoMatrix dan klik Install.
3. Izinkan IDE untuk menginstal semua dependensi yang disarankan (Adafruit GFX dan Adafruit NeoPixel).

Pustaka Sensor Gerak QMI8658C (Untuk Proyek Selanjutnya)

Proyek 1 tidak menggunakan akselerometer secara langsung, tetapi ide yang bagus untuk menginstal pustaka sensor gerak sekarang karena akan dibutuhkan untuk Proyek 4, 5, dan 6.

Dari Library Manager:

1. Cari pustaka QMI8658 berdasarkan nama penulisnya.
2. Instal pustaka tersebut sehingga muncul di bawah File > Examples untuk pengujian cepat.

Proyek 1 – Pengaturan Kode (Titik Bergerak dan Hati)

Sketsa lengkap yang menjalankan Proyek 1 secara otomatis dimuat di bawah artikel ini di situs web. Di sini kita hanya fokus pada pengaturan utama yang mungkin ingin Anda ubah: pin, jumlah piksel, kecerahan, warna, dan kecepatan animasi. Untuk animasi hati, kami juga menunjukkan cara mengontrol warna dan apakah hati berbentuk padat atau hanya garis luar.

Pin LED dan Jumlah Piksel

Pada modul ini, matriks RGB 8×8 terhubung ke GPIO 14 dari ESP32-S3. Jumlah total piksel adalah 64 (8 × 8). Dalam kode Anda, Anda akan melihat sesuatu yang mirip dengan:

 
// Pin yang terhubung ke matriks RGB 8×8 
const int MATRIX_PIN = 14;
 // harus 14 pada modul ini 
// Jumlah total LED (matriks 8 × 8) 
const int NUMPIXELS = 64; // ubah hanya jika Anda menggunakan ukuran matriks yang berbeda 

Jika Anda secara tidak sengaja membiarkan NUMPIXELS pada 16 (dari contoh NeoPixel asli), hanya seperempat matriks yang akan digunakan dan animasi tidak akan memenuhi seluruh layar 8×8.

Urutan Warna dan Tipe LED

Strip dan matriks LED yang berbeda mungkin menggunakan urutan warna yang berbeda (misalnya, GRB alih-alih RGB). Matriks pada papan ini mengharapkan urutan RGB. Dalam konstruktor NeoPixel atau NeoMatrix, pastikan tipe warna diatur dengan benar:

 // Contoh untuk objek bergaya NeoPixel: 
Adafruit_NeoPixel pixels( NUMPIXELS, MATRIX_PIN, NEO_RGB + NEO_KHZ800 // pastikan ini cocok dengan urutan warna matriks ); 

Jika Anda melihat bahwa merah dan hijau tertukar pada tampilan, periksa baris ini terlebih dahulu dan perbaiki urutan warnanya.

Kecepatan Animasi (Jeda Antar Langkah)

Kecepatan titik yang bergerak biasanya dikendalikan oleh nilai jeda sederhana dalam milidetik. Jeda yang lebih kecil berarti gerakan lebih cepat; jeda yang lebih besar berarti gerakan lebih lambat. Cari variabel yang mirip dengan:

 
// Jeda antara pergerakan titik (dalam milidetik)
 int dotDelayMs = 50; // 50 ms cukup cepat 

Penyesuaian umum:

• Atur dotDelayMs = 20; untuk titik yang bergerak sangat cepat.
• Atur dotDelayMs = 100; atau lebih tinggi untuk animasi yang lambat dan tenang.

Dalam fungsi loop(), nilai ini biasanya diteruskan ke delay(dotDelayMs); setelah setiap pembaruan bingkai.

Warna Titik dan Kecerahan

Warna RGB dari titik yang bergerak dikendalikan oleh tiga nilai dalam rentang 0–255 (merah, hijau, biru). Misalnya:

 
// Warna titik (R, G, B) dari 0–255 uint8_t dotRed = 255; // merah penuh 
uint8_t dotGreen = 0; // tanpa hijau 
uint8_t dotBlue = 0; // tanpa biru 

Ini akan menghasilkan titik merah terang. Beberapa kombinasi yang berguna:

• Merah murni: (255, 0, 0)
• Hijau murni: (0, 255, 0)
• Biru murni: (0, 0, 255)
• Kuning: (255, 255, 0)
• Putih: (255, 255, 255)

Kecerahan keseluruhan sering dikendalikan oleh fungsi kecerahan terpisah:

 
// Kecerahan matriks keseluruhan (0–255) 
uint8_t matrixBrightness = 40; // jaga tetap rendah untuk menghindari silau berlebihan // Di setup(): matrix.setBrightness(matrixBrightness); 

Nilai sekitar 30–60 biasanya nyaman untuk penggunaan di dalam ruangan.

Pengaturan Bentuk Hati

Selain titik yang bergerak, Anda dapat menampilkan hati kecil di matriks saat papan pertama kali dinyalakan. Kode contoh artikel (dimuat di bawah) mencakup pengaturan yang mirip dengan:

 
// Warna hati (hati padat) 
uint8_t heartRed = 255; 
uint8_t heartGreen = 0; 
uint8_t heartBlue = 0; 
// Opsional: mode pelangi atau garis luar 
bool showOutlinedHeart = false; 
// true = hanya garis luar 
bool useRainbowHeart = false; 
// true = siklus warna seiring waktu 

Penggunaan umum:

• Atur showOutlinedHeart = false; dan useRainbowHeart = false; untuk hati merah padat.
• Atur showOutlinedHeart = true; untuk menampilkan hanya garis luar hati.
• Atur useRainbowHeart = true; untuk terus-menerus mengubah warna hati melalui efek pelangi.

Hati digambar menggunakan fungsi koordinat NeoMatrix di dalam kode di bawah artikel. Anda hanya perlu mengubah variabel di atas untuk menyesuaikan tampilannya.

Ringkasan

Proyek 1 memberi Anda titik awal yang sederhana namun kuat dengan Matriks LED RGB ESP32-S3: Anda belajar cara mengakses semua 64 piksel, mengontrol warna, menyesuaikan kecerahan, dan mengatur kecepatan animasi. Anda juga melihat betapa mudahnya beralih dari titik yang bergerak ke hati statis atau animasi pada perangkat keras yang sama.

Pastikan untuk menonton video lengkap yang disematkan di halaman ini untuk demonstrasi langkah demi langkah yang lengkap dari animasi titik bergerak dan hati, bersama dengan lima proyek lainnya. Kode sumber lengkap tersedia di bawah artikel ini, dan Anda dapat mendukung proyek masa depan dengan membeli modul melalui tautan afiliasi yang tercantum di bawah bagian kode.

Gambar

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();
  }



}