RGB Matrix Audio Visualizer met Arduino

Over dit project

In dit artikel leg ik uit hoe je een RGB LED-matrix-audiovisualizer bouwt, met behulp van een Arduino, een RGB LED Matrix Shield en een Audio Spectrum Analyzer Shield, en deze vervolgens in een behuizing plaatst zodat je een voltooid project kunt hebben dat je kunt display door uw muzieksysteem voor een mooie lichtshow van uw muziek!

Voor de audiospectrumanalyse gebruik ik SparkFun's Spectrum Shield, dat twee MSGEQ7 grafische equalizer-displayfilters gebruikt, die een stereo-audio-ingang splitsen in 7-banden (per kanaal) en de amplitude van elk aflezen met behulp van de ADC op je Arduino. Het wordt geleverd met Arduino-voorbeeldschetsen om aan de slag te gaan.

Voor de RGB LED Matrix gebruik ik Adafruit's NeoPixel Shield voor Arduino, dat bestaat uit 40 RGB NeoPixels (Adafruit's terminologie voor hun WS2812 lichtbron). Rode, groene en blauwe LED's zijn samen met een driverchip geïntegreerd in een klein opbouwpakket dat via een enkele draad wordt bestuurd. Ze kunnen afzonderlijk worden gebruikt, geketend in langere snaren of worden samengevoegd tot nog interessantere vormfactoren. In het geval van het schild zijn ze aan elkaar geketend. De Shield wordt ook geleverd met de Adafruit_NeoMatrix-bibliotheek, die de toegang tot de RGB LED-matrix en het aansturen van de LED's vereenvoudigt.

Als laatste komt de behuizing. Sommigen van jullie weten misschien dat ik een nieuw stapelbaar, modulair behuizingssysteem heb gemaakt met de naam ProtoStax. Het was een persoonlijke jeuk dat ik moest krabben - ik wilde een behuizing die verschillende stadia van prototyping ondersteunde, bescherming en open toegang bood bij het begin, met de mogelijkheid om later zijwanden en de bovenkant toe te voegen, maar ook de mogelijkheid had om te stapelen meerdere eenheden naast elkaar of boven elkaar, waardoor ze de mogelijkheid hebben om uit te breiden met prototyping-behoeften en de toevoeging van andere boards en componenten.

In dit voorbeeld gebruik ik ProtoStax voor Arduino, een heldere acrylbehuizing voor de Arduino - hij past zowel op de Uno/Leonardo-voetafdruk als op de grotere Mega/Due-voetafdruk - die ook stapelbaar en modulair is en comfortabel ruimte biedt voor de twee Schilden (met enkele kleine aanpassingen, die ik zal schetsen). Het is helder en stevig en heeft ook rubberen voetjes om het iets te verhogen en het oppervlak van uw tafel te beschermen, zodat u uw Audio Visualizer en zijn lichtshow samen met uw muzieksysteem kunt weergeven!

Oké, laten we beginnen, zullen we?

Stap 1 - Monteer de Arduino op de grondplaat van de behuizing

Laten we eerst de Arduino (Uno in ons voorbeeld) op de grondplaat van de behuizing monteren. Dit geeft het bescherming terwijl het volledige open toegang biedt om de Arduino te configureren en in te stellen en ermee te spelen. Wanneer u klaar bent om het te sluiten, is het eenvoudig om de zijwanden en de bovenplaat toe te voegen en alles vast te zetten met schroeven.

Monteer de Arduino op de basisplaat en voeg voetjes en andere hardware toe om de behuizing voor te bereiden in Platformconfiguratie . Zie onderstaande stappen in de diavoorstelling - het bijschrift voor elke afbeelding is genummerd en geeft extra uitleg voor elke stap.

Hier zijn alle stappen als een geanimeerde gif:

Stap 2 - Bereid het SparkFun Spectrum Shield voor op de Arduino

Het SparkFun Spectrum Shield wordt niet geleverd met headers. Gelukkig voor ons wordt Adafruit NeoPixel Shield voor Arduino geleverd met zowel stacking headers als gewone headers. Omdat ik wil dat het NeoPixel-schild bovenaan staat, wil ik er gewone headers bij gebruiken zodat het gelijk ligt, en dit laat de stapelheaders over voor gebruik met het Spectrum Shield, en dat is precies wat ik wil!

Het Spectrum Shield met stapelbare headers past echter niet goed - de USB- en Power-poorten op de Arduino Uno zitten in de weg, zoals te zien is in de onderstaande afbeelding.

Ik heb de volgende twee wijzigingen aangebracht -

• Snijd het uiteinde van het Spectrum Shield over de USB- en Power-poorten af ​​(dat deel heeft een prototyping-gebied, dat niet wordt gebruikt. Zelfs als je het gebruikt, zou je uiteindelijk slechts één rij gaten afsnijden) Dit maakt het Spectrum Shield zit goed op de Arduino.
• De poten van de stapelbare headers zijn mogelijk nog te lang om het Spectrum Shield goed te laten zitten. Ik heb de poten van de stapelkoppen een haar afgeknipt om het Spectrum Shield goed op de Arduino te laten zitten met de stapelkoppen.

Nu past het precies!

Stap 3 - Plaats het Adafruit NeoPixel Shield voor Arduino in de stapelkop van het Spectrum Shield

Het Adafruit NeoPixel Shield komt bovenop het Spectrum Shield. Je zult eerst de reguliere headers (die erbij zaten) moeten solderen. Ik heb ook de meegeleverde terminalconnector gesoldeerd, maar in dit voorbeeld voed ik hem met behulp van de Arduino, omdat niet alle LED's tegelijkertijd gaan branden, dus het stroomverbruik ligt binnen de hoeveelheden die de Arduino kan leveren .

Bericht van Adafruit's NeoPixel Shield voor Arduino-pagina:

Stap 4 - Democode

Laten we eens kijken naar de democode en zien wat het doet. Om dat te doen, kunnen we het in twee hoofddelen splitsen:

• Spectrumanalyse en resultaten opslaan
• Dat vertalen naar een weergave/kleurenschema voor de 8x5 NeoPixel Matrix.

U kunt hier snel naar de democode verwijzen:

https://github.com/protostax/ProtoStax_Audio_Visualizer_Demo/blob/master/ProtoStax_Audio_Visualizer_Demo.ino

Spectrumanalyse

U kunt de Spectrum Shield-aansluitgids raadplegen voor aanvullende informatie over de Spectrum Shield. Ik heb de informatie hier samengevat.

Door een digitale reeks naar de STROBE- en RESET-pinnen van het Spectrum Shield te schrijven, initialiseert u de MSGEQ7-chips die door het Shield worden gebruikt. U kunt dan doorgaan met het aflezen van de grootte van elk van de 7 verschillende frequentiebanden waarin het spectrum is opgesplitst. Elke band wordt gelezen, gevolgd door het pulseren van de STROBE-pin om het lezen van de volgende band te starten. De waarden worden opgeslagen in Frequencies_One[7] en Frequencies_Two[7] voor de twee kanalen van de stereo-ingang. De waarden worden gelezen met behulp van de 10-bit ADC's van de Arduino, en de uitgangswaarde kan dus 0 - 1023 zijn - ze geven een weergave van de amplitude van elke frequentieband.

//Declare Spectrum Shield pin-verbindingen#define STROBE 4#define RESET 5#define DC_One A0#define DC_Two A1 //Definieer spectrumvariabelenint freq_amp;int Frequencies_One[7];int Frequencies_Two[7]; int ik; void setup () { ... // Initialiseer Spectrum Analyzers digitalWrite (STROBE, LOW); vertraging(1); digitalWrite (RESET, HOOG); vertraging(1); digitalWrite (STROBE, HOOG); vertraging(1); digitalWrite (STROBE, LAAG); vertraging(1); digitalWrite(RESET, LOW);...} void loop() {... Read_Frequencies();...} /******************** Trek frequenties van Spectrum Shield********************/void Read_Frequencies(){... //Lees frequenties voor elke band voor (freq_amp =0; freq_amp<7; freq_amp++) { Frequenties_One [freq_amp] =(analogRead (DC_One) + analogRead (DC_One))>> 1; Frequencies_Two[freq_amp] =(analogRead(DC_Two) + analogRead(DC_Two))>> 1; ... digitalWrite(STROBE, HOOG); digitalWrite (STROBE, LAAG); }} 

De 7 banden van het frequentiespectrum zijn:

• 63 Hz
• 160 Hz
• 400 Hz
• 1kHz
• 2,5 kHz
• 6,25 kHz
• 16kHZ

Ik heb deze opgesplitst in 3 bereiken - BASS, MID_RANGE en TREBLE. Het typische basbereik is 60 tot 250 Hz, dus de eerste twee banden bevinden zich in het BASS-bereik. Mid-range frequenties zijn typisch 500 Hz tot 2 kHz, dus ik groepeer de volgende 3 banden in MID_RANGE. Ik groepeer de resterende 2 bands in TREBLE.

[Opmerking:ik noteer ook de maximale uitlezing van elk van de banden in een afzonderlijke variabele. Dit kan eventueel worden gebruikt om de meetwaarden automatisch te schalen naar het niveau dat wordt weergegeven door de RGB-matrixkolommen - dit is handig in het geval dat het ingangssignaal laag is - anders zouden er in dat geval maar heel weinig van de RGB-matrix oplichten. ]

RGB-matrix

U kunt de Adafruit NeoPixel Überguide raadplegen voor aanvullende informatie over het NeoPixel Shield en NeoPixels in het algemeen. Ik heb de informatie met betrekking tot ons gebruik hier samengevat.

Het belangrijkste punt dat ik zal proberen te verduidelijken, wat ik in het begin een beetje verwarrend vond, is de richting en oriëntatie van het NeoPixel Shield en de nummering van het coördinatensysteem. De Überguide legt het uit, maar ik denk dat ik het wat makkelijker kan maken.

Het eerste om op te merken is dat in het coördinatensysteem [0, 0] ALTIJD verwijst naar de linkerbovenhoek, ongeacht de oriëntatie.

Noteer vervolgens de BREEDTE, gevolgd door HOOGTE, van de richting waarin u geïnteresseerd bent (d.w.z. 5 x 8 versus 8 x 5 in het geval van ons schild)

Ten derde is het de positie van de FYSIEKE LED #0 (gemarkeerd door het schattige Adafruit-logo) op te merken. RECHTS BOVEN, LINKS BOVEN, LINKS ONDER en RECHTS ONDER. Let ook op de oriëntatie van de voortgang van de fysieke LEDS. De lay-out is PROGRESSIEF in ons bord (de volgende fysieke led na het einde van een rij begint aan het begin van de volgende rij zoals aangegeven door de GELE lijn). De oriëntatie van de progressie is langs de RIJEN voor wanneer de breedte breder is (horizontale oriëntatie) (zoals aangegeven door de korte GROENE pijlen), en KOLOMMEN met de breedte is smaller (verticale oriëntatie) (nogmaals, zoals aangegeven door de korte GROENE pijlen ).

Deze worden geïllustreerd door de 4 afbeeldingen hieronder in de diavoorstelling. De bijschriften bevatten in elk geval de relevante instellingen!

In ons voorbeeld hebben we 7 frequentiebanden en een 8 x 5 (of 5 x 8, afhankelijk van hoe je het bekijkt!) matrix. Ik heb ervoor gekozen om de 7 banden langs de 8-dimensie weer te geven (waardoor er één ongebruikt blijft). Ik zou dan de amplitudeweergave van elke frequentieband langs de 5-dimensie weergeven. Met andere woorden, ik wil dat mijn voortgang als volgt is:

Ik wil dat mijn oorsprong in de linkerbenedenhoek begint (wat het laagste niveau van de laagste frequentieband vertegenwoordigt) en zich een weg naar boven baant. Maar aangezien het eerste dat opvalt in het coördinatensysteem is dat [0, 0] altijd verwijst naar LINKS BOVEN, moet u uw hoofd naar links kantelen en naar de onderstaande afbeelding kijken om de keuze van waarden voor het initialiseren van de NeoMatrix te begrijpen ! 😊(BREEDTE =5, HOOGTE =8, RECHTSBOVEN, KOLOMMEN PROGRESSIEF)

Laten we wat dieper ingaan op de democode die betrekking heeft op de NeoMatrix en de frequenties in een grafiek uitzetten. Ten eerste hebben we vastgesteld dat onze NeoPixel BREEDTE=5, HOOGTE=8 heeft, en dat de oriëntatie die we leuk vinden is RECHTSBOVEN en KOLOMMEN PROGRESSIEF. Volg de setup die nodig is voor de matrix in de setup() functie.

In de loop(), lezen we elke seriële invoer om het kleurenschema te selecteren - ik heb 3 verschillende kleurenschema's gedefinieerd

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

Ik bel dan Graph_Frequencies met die kleurenschemakeuze. Let ook op de eerste parameter die het frequentiebereik kan selecteren dat moet worden weergegeven (BASS, MID-RANGE of TREBLE)

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

Voor nu selecteer ik alle bereiken om weer te geven - het wordt overgelaten aan de lezer om de selectie van de weer te geven bereiken te implementeren - ofwel via seriële invoer of door een kortstondige drukknop op te nemen om de weergave te schakelen tussen BASS, MID_RANGE, TREBLE of ALLES. De selectie van het BEREIK bepaalt het bereik "van" en "tot" van de rijen die moeten worden weergegeven.

Voor elke rij (frequentieband) kiezen we de grootste van de twee frequentiegrootheden (rechterkanaal en linkerkanaal van de stereo-ingang). Die waarde ligt tussen 0 en 1023 zoals we al hebben besproken. We moeten dat toewijzen aan 5 verschillende kolommen van het scherm, dus we delen de frequentie door de FREQ_DIV_FACTOR die is gedefinieerd als 204 (1023/204 =5, wat een uitvoer van 1023 tot 5 zal toewijzen). Voor de zekerheid zorgen we er ook voor dat het aantal weer te geven numCol niet groter is dan 5. Dit bepaalt het aantal kolommen dat voor elke frequentieband moet worden weergegeven.

Vervolgens gebruik ik matrix.drawPixel() om de juiste pixel in de juiste kleur weer te geven.

Ik gebruik het HSV-kleurenwiel in mijn grafische weergave. Dit zorgde voor wat extra rimpels om te overwinnen.

Het gebruik is meestal matrix.drawPixel(column, row, Color(r, g, b)), waarbij Color(r, g, b) een kleur vertegenwoordigt zoals gespecificeerd door de ROOD, GROEN en BLAUWE waarden. Het gebruik van HSV zorgt echter voor een aantal mooie vloeiende kleurovergangen.

NeoMatrix biedt de matrix.ColorHSV(uint16_t hue) methode die een enkele uint16_t hue-waarde aanneemt en een uint32_t HSV-kleur retourneert.

Matrix.Color(r, g, b) retourneert echter een uint16_t-kleur. matrix.drawPixel verwacht ook een 16 bit kleur.

De manier om dit te omzeilen is om matrix.setPassThruColor (32 bit kleurwaarde) te gebruiken. Dit stelt een vlag in matrix in die ervoor zorgt dat drawPixel zijn kleurargument negeert en in plaats daarvan de 32-bits kleur gebruikt die al door de bovenstaande methode is ingesteld. Vergeet niet om matrix.setPassThruColor() aan te roepen om de betreffende vlag opnieuw in te stellen. Niet super elegant, maar het werkt wel. Bijvoorbeeld

 statisch uint16_t tint =0; //21845 22250 tot -250 uint16_t hueDelta =200; tint +=tintDelta;... rgbcolor =matrix.ColorHSV(tint);... matrix.setPassThruColor(rgbcolor); matrix.drawPixel(col, rij, (uint16_t)0); // kleur maakt hier niet uit matrix.setPassThruColor();...matrix.show(); 

Met HSV is het mogelijk om de 16-bits tint te verhogen en de HSV-kleurcode te genereren, waardoor mooie vloeiende kleurovergangen worden verkregen.

Hier zijn de verschillende codestukken ter referentie:

  define NEO_MATRIX_WIDTH 5 # 8 # NEO_MATRIX_HEIGHT definiëren definiëren NEOPIXEL_PIN 6 // Shield plaatst die op pen 6Adafruit_NeoMatrix matrix =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(false); matrix.setBrightness(40); matrix.fillScreen(0); matrix.show();...} void loop() {statisch int-schema =0; while (Serial.available()> 0) { schema =Serial.parseInt(); }... Graph_Frequencies(ALL, scheme);... delay(50);} void Graph_Frequencies(CHANNEL c, SCHEME s){... for( row=from; row Frequencies_One[rij])?Frequencies_Two[rij]:Frequencies_One[rij]; int numCol =(freq/FREQ_DIV_FACTOR); als (numCol> 5) numCol =5; for (int col =0; col  

Het volgende is de selectie van het kleurenschema. Merk op dat ik voorzieningen heb getroffen om kleuren te kunnen selecteren voor verschillende frequentiebereiken (bassHue, midHue, trebleHue). Ik heb 3 verschillende kleurenschema's gemaakt - een die een groen naar rood/roze bereik gebruikt voor weergave van de laagste amplitude naar de hoogste, en de andere die een meer roze/blauw verschoven bereik gebruikt. Het derde schema gebruikt dezelfde kleur voor alle pixels, maar doorloopt het hele kleurenwiel. Ik laat je een video zien van alle 3 de kleurenschema's.

 schakelaar(s) { case MAGNITUDE_HUE:bassHue =22250; middenHue =22250; //54613 hoge tonen =22250; //43690 if (rij>=0 &&rij <2) { rgbcolor =matrix.ColorHSV (bassHue - (7416 * col)); } else if (rij>=2 &&rij <5) { rgbcolor =matrix.ColorHSV(midHue - (7416 * col)); } else if (rij>=5 &&rij <7) { rgbcolor =matrix.ColorHSV(trebleHue - (7416 * col)); } pauze; case MAGNITUDE_HUE_2:basHue =54613; midHue =54613; //54613 hoge tonen =54613; //43690 if (rij>=0 &&rij <2) { rgbcolor =matrix.ColorHSV (bassHue - (7416 * col)); } else if (rij>=2 &&rij <5) { rgbcolor =matrix.ColorHSV(midHue - (7416 * col)); } else if (rij>=5 &&rij <7) { rgbcolor =matrix.ColorHSV(trebleHue - (7416 * col)); } pauze; case HSV_COLOR_WHEEL:rgbcolor =matrix.ColorHSV(tint); pauze; } 

Stap 6 - Alles uittesten

Hier is een video waarin je alles uitprobeert

Stap 6 - Sluit het af

Installeer de bovenste verstevigingselementen, zijwanden, audiokabels en bovenkant. Zie onderstaande stappen in de diavoorstelling - het bijschrift voor elke afbeelding is genummerd en geeft extra uitleg voor elke stap.

Hier zijn alle stappen in een enkele geanimeerde gif:

Stap 7 - Laat je creatie zien en maak prachtige muziek nog mooier!

Je kunt nu een leuke audiovisualizer hebben die je naast je muzieksysteem kunt weergeven en wat coole zelfgemaakte lichtacties je muziek laten versterken!

Stap 8 - Verder gaan

Hier zijn enkele ideeën om het project nog verder te brengen!

1. Momenteel zijn de audiokabels (ingang en uitgang) aangesloten op het Spectrum Shield in de behuizing, en daardoor heb je deze behuizingen met deze draden aangesloten en naar buiten bungelend. In plaats daarvan kunt u een paar stereo-aansluitingen voor paneelmontage (vermeld in de lijst met "gebruikte dingen") toevoegen aan de zijwand in de buurt van de stereo-aansluitingen van het Spectrum Shield, en vervolgens een audiokabel solderen met een 3,5 mm mannelijke stereo audio-aansluiting op elk, en sluit deze vervolgens aan op de audio-aansluitingen van het Spectrum Shield. In dit geval wordt uw behuizing heel netjes en is alle bedrading op zichzelf staand met alleen audio-aansluitingen op de behuizing waarop externe systemen kunnen worden aangesloten.

2. U kunt nog meer lichtschema's aan uw Audio Visualizer toevoegen - verschillende kleurbereiken, verschillende patronen.

3. Voeg de optie toe om frequentiebereiken in/uit te schakelen met behulp van de seriële ingang - momenteel kunnen alleen kleurenschema's worden gewijzigd, maar niet de frequentiebereiken die moeten worden weergegeven.

4. Voeg een schakelaar toe om tussen verschillende kleurenschema's te schakelen in plaats van seriële invoer te gebruiken. Pas de behuizing aan om een ​​gat toe te voegen aan een van de lange zijwanden om plaats te bieden aan een op een paneel gemonteerde tijdelijke drukknopschakelaar (vermeld in de lijst met "gebruikte dingen").

5. Voeg een tweede schakelaar toe om te schakelen tussen de verschillende weergegeven frequentiebereiken (BASS, MID_RANGE, TREBLE, ALL) en monteer die schakelaar aan de zijwand van de behuizing.

6. Omdat de behuizing van acryl is gemaakt, kunt u er wat blauwe schilderstape overheen gebruiken om het oppervlak te beschermen, en een boormachine om een ​​gat van de vereiste kant te boren om de op het paneel gemonteerde stereo-aansluitingen en/of schakelaars te monteren. Het wordt aanbevolen om een ​​stappenboor te gebruiken of te beginnen met een kleiner gat en het gat vervolgens uit te breiden tot het de gewenste maat heeft. De vermelde stereo-aansluitingen hebben een montagegat van 5/16 inch nodig en de schakelaars hebben een montagegat van 0.47 inch nodig.

7. Schuur de bovenzijde van de bovenplaat licht en gelijkmatig. Dit werkt als een lichtverspreider en geeft je een meer diffuus en zachter lichteffect.

Als er voldoende interesse is, zal ik het project bijwerken om het te laten zien met de audio-aansluitingen en schakelaars en een ondoorzichtige lichtdiffusor-top - stuur me een bericht als je het bijgewerkte project wilt zien!

Kun je er nog meer bedenken? Schrijf hieronder een reactie om het ons te laten weten! 😊 Stel gerust al je vragen!

Veel plezier met maken!

Code

ProtoStax Audio Visualizer-demo

Github-repository met de code die wordt gebruikt in deze ProtoStax Audio Visualizer-demohttps://github.com/protostax/ProtoStax_Audio_Visualizer_Demo