RGB Matrix Audio Visualizer dengan Arduino

Ketujuh pita spektrum frekuensi tersebut adalah:

• 63Hz
• 160Hz
• 400Hz
• 1kHz
• 2,5kHz
• 6.25kHz
• 16kHz

Saya membagi ini menjadi 3 rentang - BASS, MID_RANGE dan TREBLE. Rentang Bass tipikal adalah 60 hingga 250 Hz, jadi dua pita pertama berada dalam rentang BASS. Frekuensi mid-range biasanya 500 Hz hingga 2 kHz, jadi saya mengelompokkan 3 band berikutnya ke dalam MID_RANGE. Saya mengelompokkan 2 band yang tersisa menjadi TREBLE.

[Catatan:Saya juga mencatat pembacaan maksimal masing-masing pita ke dalam variabel terpisah. Ini mungkin dapat digunakan untuk secara otomatis menskalakan pembacaan ke tingkat yang diwakili oleh kolom matriks RGB - ini berguna dalam kasus di mana sinyal input rendah - jika tidak, hanya sedikit matriks RGB yang akan menyala dalam kasus itu. ]

Matriks RGB

Anda dapat merujuk ke Adafruit NeoPixel berguide untuk informasi tambahan mengenai NeoPixel Shield dan NeoPixel secara umum. Saya telah merangkum informasi yang berkaitan dengan penggunaan kami di sini.

Poin utama yang akan saya coba klarifikasi, yang awalnya saya temukan agak membingungkan, adalah arah dan orientasi NeoPixel Shield dan penomoran sistem koordinat. berguide menjelaskannya, tapi saya pikir saya bisa membuatnya sedikit lebih mudah.

Hal pertama yang perlu diperhatikan adalah bahwa dalam sistem koordinat, [0, 0] SELALU mengacu ke kiri atas, terlepas dari orientasinya.

Selanjutnya adalah mencatat WIDTH, diikuti oleh HEIGHT, dari orientasi apa pun yang Anda minati (yaitu 5 x 8 vs 8 x 5 dalam kasus Perisai kami)

Ketiga perhatikan posisi LED FISIK #0 (ditandai dengan logo Adafruit yang lucu). KANAN ATAS, KIRI ATAS, KIRI BAWAH, dan KANAN BAWAH sesuai keadaan. Perhatikan juga orientasi perkembangan LED fisik. Tata letaknya PROGRESSIVE di papan kami (led fisik berikutnya setelah akhir satu baris dimulai pada awal baris berikutnya seperti yang ditunjukkan oleh garis KUNING). Orientasi kemajuan adalah sepanjang BARIS ketika lebar lebih lebar (orientasi horizontal) (seperti yang ditunjukkan oleh panah HIJAU pendek), dan KOLOM dengan lebar lebih sempit (orientasi vertikal) (sekali lagi, seperti yang ditunjukkan oleh panah HIJAU pendek ).

Ini diilustrasikan oleh 4 gambar di bawah ini dalam tayangan slide. Keterangan menyertakan pengaturan terkait dalam setiap kasus!

Dalam contoh kami, kami memiliki 7 pita frekuensi, dan matriks 8 x 5 (atau 5 x 8, tergantung dari mana Anda melihatnya!). Saya memilih untuk menampilkan 7 pita di sepanjang 8 dimensi (meninggalkan satu pita yang tidak digunakan). Saya kemudian akan menampilkan representasi amplitudo dari setiap pita frekuensi di sepanjang 5 dimensi. Dengan kata lain, saya ingin perkembangan saya menjadi sebagai berikut:

Saya ingin Origin saya mulai dari sudut kiri bawah (mewakili level terendah dari pita frekuensi terendah) dan bekerja ke atas. Tetapi karena hal pertama yang perlu diperhatikan dalam sistem koordinat adalah bahwa [0, 0] selalu mengacu pada TOP-LEFT, Anda harus memiringkan kepala ke kiri dan melihat gambar di bawah, untuk memahami pilihan nilai untuk inisialisasi NeoMatrix ! 😊(LEBAR =5, TINGGI =8, KANAN ATAS, KOLOM PROGRESIF)

Mari kita mempelajari sedikit kode demo yang berkaitan dengan NeoMatrix dan membuat grafik frekuensinya. Pertama, kami telah menentukan bahwa NeoPixel kami memiliki WIDTH=5, HEIGHT=8, dan orientasi yang kami sukai adalah TOP-RIGHT, dan COLUMNS PROGRESSIVE. Ikuti pengaturan yang diperlukan untuk matriks dalam fungsi setup().

Di loop(), kita membaca input Serial apa pun untuk memilih skema warna - Saya telah mendefinisikan 3 skema warna berbeda

enum SKEMA { MAGNITUDE_HUE =0, MAGNITUDE_HUE_2 =1, HSV_COLOR_WHEEL =2}; 

Saya kemudian memanggil Graph_Frequencies dengan pilihan skema warna itu. Perhatikan juga parameter pertama yang dapat memilih rentang frekuensi yang akan ditampilkan (BASS, MID-RANGE atau TREBLE)

enum RANGE { BASS =0, MID_RANGE =1, TREBLE =2, SEMUA =3}; 

Untuk saat ini, saya memilih semua rentang untuk ditampilkan - ini dibiarkan sebagai latihan bagi pembaca untuk menerapkan pemilihan rentang yang akan ditampilkan - baik melalui input Serial atau dengan menyertakan tombol tekan sesaat untuk beralih tampilan antara BASS, MID_RANGE, TREBLE atau SEMUA. Pemilihan RANGE menentukan rentang "dari" dan "ke" dari baris yang akan ditampilkan.

Untuk setiap baris (pita frekuensi), kami memilih yang lebih besar dari dua besaran frekuensi (saluran kanan dan saluran kiri dari input stereo). Nilai itu terletak antara 0 dan 1023 seperti yang telah kita bahas. Kita perlu memetakannya ke dalam 5 kolom tampilan yang berbeda, jadi kita membagi frekuensi dengan FREQ_DIV_FACTOR yang didefinisikan sebagai 204 (1023/204 =5, yang akan memetakan output 1023 hingga 5). Untuk amannya, kami juga memastikan numCol yang akan ditampilkan tidak lebih besar dari 5. Ini menentukan jumlah kolom yang akan ditampilkan untuk setiap pita frekuensi.

Saya kemudian menggunakan matrix.drawPixel() untuk menampilkan piksel yang sesuai dengan warna yang sesuai.

Saya menggunakan roda warna HSV dalam tampilan grafis saya. Ini menimbulkan beberapa kerutan ekstra untuk diatasi.

Biasanya, penggunaannya adalah matrix.drawPixel(column, row, Color(r, g, b)), di mana Color(r, g, b) mewakili warna seperti yang ditentukan oleh nilai RED, GREEN, dan BLUE. Namun, menggunakan HSV memungkinkan beberapa transisi warna halus yang bagus.

NeoMatrix menyediakan metode matrix.ColorHSV(uint16_t hue) yang mengambil nilai hue uint16_t tunggal dan mengembalikan warna HSV uint32_t.

Namun matrix.Color(r, g, b) mengembalikan warna uint16_t. matrix.drawPixel juga mengharapkan warna 16 bit.

Cara mengatasinya adalah dengan menggunakan matrix.setPassThruColor (nilai warna 32 bit). Ini menetapkan tanda dalam matriks yang menyebabkan drawPixel mengabaikan argumen warnanya dan sebagai gantinya menggunakan warna 32 bit yang sudah disetel oleh metode di atas. Ingatlah untuk memanggil matrix.setPassThruColor() untuk mengatur ulang bendera yang dimaksud. Tidak super elegan, tetapi berhasil. Misalnya,

 static uint16_t hue =0; //21845 22250 hingga -250 uint16_t hueDelta =200; hue +=hueDelta;... rgbcolor =matrix.ColorHSV(hue);... matrix.setPassThruColor(rgbcolor); matrix.drawPixel(col, baris, (uint16_t)0); // warna tidak penting di sini matrix.setPassThruColor();...matrix.show(); 

Dengan HSV, dimungkinkan untuk meningkatkan rona 16 bit dan menghasilkan kode warna HSV, sehingga mendapatkan transisi warna yang mulus dan bagus.

Berikut adalah potongan kode yang berbeda untuk referensi:

  # define NEO_MATRIX_WIDTH 5 # mendefinisikan NEO_MATRIX_HEIGHT 8 # mendefinisikan NEOPIXEL_PIN 6 // peta Perisai ke pin 6Adafruit_NeoMatrix matriks =Adafruit_NeoMatrix (NEO_MATRIX_WIDTH, NEO_MATRIX_HEIGHT, NEOPIXEL_PIN, NEO_MATRIX_TOP + NEO_MATRIX_RIGHT + NEO_MATRIX_COLUMNS + NEO_MATRIX_PROGRESSIVE, NEO_GRB + NEO_KHZ800); .... void setup() {... matrix.begin(); matrix.setTextWrap(salah); matrix.setBrightness(40); matrix.fillScreen(0); matrix.show();...} void loop() { skema int statis =0; while (Serial.available()> 0) { skema =Serial.parseInt(); }... Graph_Frequencies(ALL, skema);... delay(50);} void Graph_Frequencies(CHANNEL c, SCHEME s){... for( row=from; row Frekuensi_Satu[baris])?Frekuensi_Dua[baris]:Frekuensi_Satu[baris]; int numCol =(frekuensi/FREQ_DIV_FACTOR); if (numCol> 5) numCol =5; for (int col =0; col  

Selanjutnya adalah pemilihan skema warna. Perhatikan bahwa saya telah membuat ketentuan untuk dapat memilih warna untuk rentang frekuensi yang berbeda (bassHue, midHue, trebleHue). Saya telah membuat 3 skema warna yang berbeda - satu yang menggunakan rentang hijau ke merah/merah muda untuk tampilan dari amplitudo terendah ke tertinggi, dan yang lainnya menggunakan rentang yang lebih merah muda/biru. Skema ke-3 menggunakan warna yang sama untuk semua piksel, tetapi berputar melalui seluruh roda warna seiring berjalannya waktu. Saya akan menunjukkan video dari semua 3 skema warna.

 switch { case MAGNITUDE_HUE:bassHue =22250; midHue =22250; //54613 trebleHue =22250; //43690 if (baris>=0 &&baris <2) { rgbcolor =matrix.ColorHSV(bassHue - (7416 * col) ); } else if (baris>=2 &&baris <5) { rgbcolor =matrix.ColorHSV(midHue - (7416 * col) ); } else if (baris>=5 &&baris <7) { rgbcolor =matrix.ColorHSV(trebleHue - (7416 * col) ); } merusak; kasus MAGNITUDE_HUE_2:bassHue =54613; midHue =54613; //54613 trebleHue =54613; //43690 if (baris>=0 &&baris <2) { rgbcolor =matrix.ColorHSV(bassHue - (7416 * col) ); } else if (baris>=2 &&baris <5) { rgbcolor =matrix.ColorHSV(midHue - (7416 * col) ); } else if (baris>=5 &&baris <7) { rgbcolor =matrix.ColorHSV(trebleHue - (7416 * col) ); } merusak; kasus HSV_COLOR_WHEEL:rgbcolor =matrix.ColorHSV(hue); merusak; } 

Langkah 6 - Menguji Semuanya

Berikut adalah video pengujian semuanya

Langkah 6 - Tutup

Pasang elemen penguat atas, dinding samping, kabel audio, dan bagian atas. Lihat langkah-langkah di bawah ini dalam tayangan slide - keterangan untuk setiap gambar diberi nomor dan memberikan penjelasan tambahan untuk setiap langkah.

Berikut adalah semua langkah dalam satu gif animasi:

Langkah 7 - Tampilkan Kreasi Anda dan Jadikan Musik Indah Lebih Indah!

Sekarang Anda dapat memiliki visualisator audio yang menyenangkan yang dapat Anda tampilkan di samping sistem musik Anda dan memiliki beberapa aksi ringan buatan sendiri yang keren untuk menambah musik Anda!

Langkah 8 - Melangkah lebih jauh

Berikut adalah beberapa ide untuk membawa proyek ini lebih jauh!

1. Saat ini, kabel audio (input dan output) dicolokkan ke Spectrum Shield di enklosur, dan dengan demikian Anda memiliki enklosur ini dengan kabel-kabel ini terhubung dan menjuntai di luar. Sebagai gantinya, Anda dapat menambahkan beberapa jack stereo panel mount (tercantum dalam daftar "barang" yang digunakan) ke dinding samping dekat jack stereo Spectrum Shield, dan kemudian menyolder kabel audio dengan jack audio stereo 3,5 mm laki-laki ke masing-masing, dan kemudian colokkan itu ke jack audio dari Spectrum Shield. Dalam hal ini, enklosur Anda menjadi sangat rapi dan semua kabel mandiri hanya dengan soket audio pada enklosur untuk dicolokkan ke sistem eksternal.

2. Anda dapat menambahkan lebih banyak skema cahaya ke Audio Visualizer Anda - rentang warna yang berbeda, pola yang berbeda.

3. Tambahkan opsi untuk mengaktifkan/menonaktifkan rentang frekuensi menggunakan input Serial - saat ini hanya skema warna yang dapat diubah tetapi tidak rentang frekuensi yang ditampilkan.

4. Tambahkan sakelar untuk beralih di antara skema warna yang berbeda alih-alih menggunakan input Serial. Ubah enklosur untuk menambahkan lubang ke salah satu Dinding Samping yang panjang untuk mengakomodasi sakelar tombol tekan sementara pemasangan panel (tercantum dalam daftar "barang" yang digunakan).

5. Tambahkan sakelar kedua untuk beralih di antara rentang frekuensi berbeda yang ditampilkan (BASS, MID_RANGE, TREBLE, ALL) dan pasang sakelar itu ke dinding samping enklosur.

6. Karena selungkup terbuat dari akrilik, Anda dapat menggunakan selotip biru untuk melindungi permukaannya, dan bor untuk mengebor lubang di sisi yang diperlukan untuk memasang jack dan/atau sakelar stereo dudukan panel. Disarankan untuk menggunakan bor langkah, atau mulai dengan lubang yang lebih kecil dan kemudian perluas lubang sampai ukuran yang Anda inginkan. Soket stereo yang tercantum membutuhkan lubang pemasangan 5/16", dan Sakelar membutuhkan lubang pemasangan 0,47".

7. Amplas permukaan atas pelat atas dengan ringan dan merata. Ini akan bertindak sebagai penyebar cahaya dan memberi Anda efek cahaya yang lebih menyebar dan lebih lembut.

Jika ada minat yang cukup, saya akan memperbarui proyek untuk menunjukkannya dengan Jack Audio dan Sakelar dan bagian atas diffuser cahaya Buram - kirimkan saya pesan jika Anda ingin melihat proyek yang diperbarui! 😊

Bisakah Anda memikirkannya lagi? Tulis komentar di bawah untuk memberi tahu kami! 😊 Jangan ragu untuk juga mengajukan pertanyaan apa pun yang Anda miliki! 😊

Selamat membuat! 😊

Kode

Demo Visualizer Audio ProtoStax

Repositori Github yang berisi kode yang digunakan dalam Demo Visualizer Audio ProtoStax inihttps://github.com/protostax/ProtoStax_Audio_Visualizer_Demo

Mobil dengan Kontrol Suara HID Prox RFID ke Arduino