Arduino가 있는 RGB Matrix Audio Visualizer

이 프로젝트 정보

이 기사에서는 Arduino, RGB LED Matrix Shield 및 Audio Spectrum Analyzer Shield를 사용하여 RGB LED 매트릭스 오디오 비주얼라이저를 구축한 다음, 완성된 프로젝트를 가질 수 있도록 인클로저에 넣는 방법을 설명합니다. 음악 시스템으로 디스플레이하여 음악을 멋지게 조명하십시오!

오디오 스펙트럼 분석을 위해 두 개의 MSGEQ7 그래픽 이퀄라이저 디스플레이 필터를 사용하는 SparkFun의 Spectrum Shield를 사용합니다. 이 필터는 스테레오 오디오 입력을 7밴드(채널당)로 분할하고 Arduino의 ADC를 사용하여 각각의 진폭을 읽습니다. 시작하기 위해 Arduino 샘플 스케치가 함께 제공됩니다.

RGB LED 매트릭스의 경우 40개의 RGB NeoPixels(WS2812 광원에 대한 Adafruit의 용어)로 구성된 Arduino용 Adafruit의 NeoPixel Shield를 사용합니다. 적색, 녹색 및 청색 LED는 드라이버 칩과 함께 단일 와이어를 통해 제어되는 작은 표면 실장 패키지에 통합됩니다. 개별적으로 사용하거나 더 긴 문자열로 연결하거나 훨씬 더 흥미로운 폼 팩터로 조립할 수 있습니다. Shield의 경우 서로 연결되어 있습니다. Shield는 또한 Adafruit_NeoMatrix 라이브러리와 함께 제공되어 RGB LED 매트릭스에 대한 액세스와 LED 제어를 단순화합니다.

마지막으로 인클로저가 나옵니다. 여러분 중 일부는 제가 ProtoStax라는 새로운 쌓을 수 있는 모듈식 인클로저 시스템을 만들었다는 것을 알고 있을 것입니다. 긁어야 하는 개인적인 가려움이었습니다. 여러 단계의 프로토타이핑을 지원하고, 시작할 때 보호 및 개방된 액세스를 제공하고, 나중에 측벽과 상단을 추가할 수 있지만 쌓을 수 있는 기능도 있는 인클로저를 원했습니다. 여러 장치를 나란히 또는 다른 장치 위에 하나씩 배치하여 프로토타이핑 요구 사항과 다른 보드 및 구성 요소 추가에 따라 확장할 수 있습니다.

이 예에서는 Arduino용 투명 아크릴 인클로저인 Arduino용 ProtoStax를 사용합니다. 이 제품은 Uno/Leonardo 풋프린트와 더 큰 Mega/Due 풋프린트 모두에 맞습니다. 이 제품은 또한 쌓을 수 있고 모듈식이며 둘을 위한 공간이 편안합니다. Shields(일부 사소한 수정 포함). 투명하고 견고하며 테이블을 약간 올려주고 테이블 표면을 보호하는 고무 발이 있어 오디오 시스템과 함께 오디오 비주얼라이저와 라이트 쇼를 표시할 수 있습니다! 😊

자, 시작해 볼까요? 😊

1단계 - 인클로저 베이스 플레이트에 Arduino 장착

먼저 Arduino(이 예에서는 Uno)를 인클로저의 베이스 플레이트에 장착해 보겠습니다. 이것은 Arduino를 구성 및 설정하고 그것을 가지고 놀기 위해 그것에 대한 완전한 공개 액세스를 제공하면서 보호를 제공합니다. 닫을 준비가 되면 측벽과 상판을 쉽게 추가하고 나사로 모든 ​​것을 고정하면 됩니다.

Arduino를 베이스 플레이트에 장착하고 다리와 기타 하드웨어를 추가하여 플랫폼 구성에서 인클로저를 준비합니다. . 슬라이드쇼에서 아래 단계를 참조하십시오. 각 이미지의 캡션에는 번호가 매겨져 있으며 각 단계에 대한 추가 설명을 제공합니다.

다음은 애니메이션 GIF의 모든 단계입니다.

2단계 - Arduino용 SparkFun 스펙트럼 실드 준비

SparkFun Spectrum Shield는 헤더와 함께 제공되지 않습니다. 다행스럽게도 Arduino용 Adafruit NeoPixel Shield에는 스태킹 헤더와 일반 헤더가 모두 함께 제공됩니다. NeoPixel Shield가 맨 위에 있기를 원하기 때문에 일반 헤더를 함께 사용하여 수평이 되도록 하고 싶습니다. 그러면 스태킹 헤더가 Spectrum Shield와 함께 사용할 수 있습니다. 이것이 바로 제가 원하는 것입니다! 😉

그러나 스택 헤더가 있는 Spectrum Shield는 꼭 맞지 않습니다. 아래 그림과 같이 Arduino Uno의 USB 및 전원 포트가 방해가 됩니다.

다음 두 가지를 수정했습니다 -

이제 꼭 맞습니다!

3단계 - Arduino용 Adafruit NeoPixel Shield를 Spectrum Shield의 스택 헤더에 삽입합니다.

Adafruit NeoPixel Shield는 Spectrum Shield 위에 있습니다. 먼저 일반 헤더(함께 제공된)를 납땜해야 합니다. 나는 또한 함께 제공된 터미널 커넥터에 납땜했지만 이 예에서는 모든 LED가 동시에 켜지지 않으므로 Arduino를 사용하여 전원을 공급합니다. 따라서 전력 소비는 Arduino가 제공할 수 있는 양 이내입니다. .

Adafruit의 Arduino용 NeoPixel Shield 페이지의 메시지:

4단계 - 데모 코드

데모 코드를 살펴보고 그것이 무엇을 하는지 봅시다. 이를 위해 두 가지 주요 부분으로 나눌 수 있습니다.

여기에서 데모 코드를 빠르게 참조할 수 있습니다.

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

스펙트럼 분석

Spectrum Shield와 관련된 추가 정보는 Spectrum Shield Hookup Guide를 참조하십시오. 여기에 정보를 요약했습니다.

Spectrum Shield의 STROBE 및 RESET 핀에 ​​디지털 시퀀스를 기록하여 Shield에서 사용하는 MSGEQ7 칩을 초기화합니다. 그런 다음 스펙트럼이 분할되는 7개의 다른 주파수 대역 각각의 크기를 읽을 수 있습니다. 각 대역을 읽은 다음 STROBE 핀을 펄스하여 다음 대역의 읽기를 시작합니다. 값은 스테레오 입력의 두 채널에 대해 Frequencies_One[7] 및 Frequencies_Two[7]에 저장됩니다. 값은 Arduino의 10비트 ADC를 사용하여 읽히므로 출력 값은 0 - 1023이 될 수 있으며 각 주파수 대역의 진폭을 나타냅니다.

//Spectrum Shield 핀 연결 선언#define STROBE 4#define RESET 5#define DC_One A0#define DC_Two A1 //스펙트럼 변수 정의int freq_amp;int Frequencies_One[7];int Frequencies_Two[7]; 정수 나; void setup() { ... //스펙트럼 분석기 초기화 digitalWrite(STROBE, LOW); 지연(1); 디지털 쓰기(리셋, 높음); 지연(1); 디지털 쓰기(스트로브, 높음); 지연(1); 디지털 쓰기(스트로브, 낮음); 지연(1); digitalWrite(RESET, LOW);...} void 루프() {... Read_Frequencies();...} /********************에서 주파수 가져오기 Spectrum Shield********************/void Read_Frequencies(){... //(freq_amp =0; freq_amp<7; freq_amp++)에 대한 각 대역의 주파수 읽기 { 주파수_원[freq_amp] =(analogRead(DC_One) + analogRead(DC_One) )>> 1; Frequencies_Two[freq_amp] =(analogRead(DC_Two) + analogRead(DC_Two) )>> 1; ... 디지털 쓰기(스트로브, 높음); 디지털 쓰기(스트로브, 낮음); }} 

주파수 스펙트럼의 7개 대역은 다음과 같습니다.

저는 이것을 BASS, MID_RANGE 및 TREBLE의 3가지 범위로 나눕니다. 일반적인 저음 범위는 60~250Hz이므로 처음 두 대역은 저음 범위에 있습니다. 중간 범위 주파수는 일반적으로 500Hz ~ 2kHz이므로 다음 3개 대역을 MID_RANGE로 그룹화합니다. 나머지 2개의 밴드를 TREBLE로 그룹화합니다.

[참고:또한 각 밴드의 최대 판독값을 별도의 변수로 기록했습니다. 이것은 판독값을 RGB 매트릭스 열로 표시되는 레벨로 자동 조정하는 데 사용할 수 있습니다. 이는 입력 신호가 낮은 경우에 유용합니다. 그렇지 않으면 이 경우 RGB 매트릭스의 극소수만 켜집니다. ]

RGB 매트릭스

일반적으로 NeoPixel Shield 및 NeoPixels와 관련된 추가 정보는 Adafruit NeoPixel Überguide를 참조하십시오. 여기에 우리의 사용과 관련된 정보를 요약했습니다.

처음에 조금 헷갈렸던 부분을 명확히 하려고 하는 것은 NeoPixel Shield의 방향과 방향, 좌표계의 번호 지정입니다. Überguide에서 설명을 해주지만 제가 좀 더 쉽게 만들 수 있을 것 같습니다.

가장 먼저 주목해야 할 점은 좌표계에서 [0, 0]은 방향에 관계없이 항상 왼쪽 상단을 참조한다는 것입니다.

다음은 관심 있는 방향(예:Shield의 경우 5 x 8 대 8 x 5)의 WIDTH와 HEIGHT를 차례로 기록하는 것입니다.

세 번째는 PHYSICAL LED #0(귀여운 Adafruit 로고로 표시됨)의 위치를 ​​확인하는 것입니다. 경우에 따라 TOP-RIGHT, TOP-LEFT, BOTTOM-LEFT 및 BOTTOM-RIGHT가 될 수 있습니다. 또한 물리적 LED의 진행 방향에 유의하십시오. 레이아웃은 우리 보드에서 PROGRESSIVE입니다(한 행이 끝난 후 다음 물리적 LED는 YELLOW 라인으로 표시된 대로 다음 행의 시작 부분에서 시작합니다). 진행 방향은 너비가 더 넓을 때(수평 방향)(짧은 GREEN 화살표로 표시됨), 너비가 더 좁은 COLUMNS(수직 방향)(다시 짧은 녹색 화살표로 표시됨)에 대한 진행 방향입니다. ).

이는 슬라이드쇼에서 아래 4개의 이미지로 설명됩니다. 캡션에는 각각의 경우에 적절한 설정이 포함됩니다!

이 예에는 7개의 주파수 대역과 8 x 5(또는 보는 방식에 따라 5 x 8!) 행렬이 있습니다. 저는 8차원을 따라 7개의 밴드를 표시하기로 선택했습니다(하나는 사용하지 않은 채로 둡니다). 그런 다음 5차원을 따라 각 주파수 대역의 진폭 표현을 표시합니다. 즉, 진행 상황을 다음과 같이 하고 싶습니다.

내 원점이 왼쪽 하단 모서리(가장 낮은 주파수 대역의 가장 낮은 수준을 나타냄)에서 시작하여 위쪽으로 작업하기를 원합니다. 그러나 좌표계에서 가장 먼저 주의해야 할 점은 [0, 0]은 항상 TOP-LEFT를 참조한다는 것이므로 머리를 왼쪽으로 기울이고 아래 이미지를 보고 NeoMatrix 초기화 값의 선택을 이해해야 합니다. ! 😊(WIDTH =5, HEIGHT =8, 오른쪽 위, 열 프로그레시브)

NeoMatrix 및 주파수 그래프와 관련된 데모 코드를 조금 살펴보겠습니다. 먼저 NeoPixel이 WIDTH=5, HEIGHT=8이고 원하는 방향이 TOP-RIGHT 및 COLUMNS PROGRESSIVE임을 결정했습니다. setup() 함수에서 행렬에 필요한 설정을 따릅니다.

loop()에서 색 구성표를 선택하기 위해 직렬 입력을 읽습니다. 저는 3가지 색 구성표를 정의했습니다.

열거형 스키마 { MAGNITUDE_HUE =0, MAGNITUDE_HUE_2 =1, HSV_COLOR_WHEEL =2}; 

그런 다음 해당 색 구성표 선택으로 Graph_Frequencies를 호출합니다. 표시할 주파수 범위(BASS, MID-RANGE 또는 TREBLE)를 선택할 수 있는 첫 번째 매개변수도 참고하십시오.

열거형 RANGE { 저음 =0, MID_RANGE =1, TREBLE =2, 모두 =3}; 

지금은 표시할 모든 범위를 선택하고 있습니다. 직렬 입력을 통해 또는 BASS, MID_RANGE, 고음 또는 모두. RANGE를 선택하면 표시할 행의 "시작" 및 "끝" 범위가 결정됩니다.

각 행(주파수 대역)에 대해 두 가지 주파수 크기(스테레오 입력의 오른쪽 채널 및 왼쪽 채널) 중 더 큰 것을 선택합니다. 이 값은 이미 논의한 대로 0에서 1023 사이입니다. 이를 디스플레이의 5개의 개별 열에 매핑해야 하므로 주파수를 204로 정의된 FREQ_DIV_FACTOR(1023/204 =5, 1023의 출력을 5로 매핑함)로 나눕니다. 안전을 위해 표시할 numCol이 5보다 크지 않은지 확인합니다. 이는 각 주파수 대역에 대해 표시할 열 수를 결정합니다.

그런 다음 matrix.drawPixel()을 사용하여 적절한 색상으로 적절한 픽셀을 표시합니다.

그래픽 디스플레이에서 HSV 색상환을 사용합니다. 이것은 극복해야 할 몇 가지 추가 주름을 제시했습니다.

일반적으로 사용법은 matrix.drawPixel(column, row, Color(r, g, b))이며, 여기서 Color(r, g, b)는 RED, GREEN 및 BLUE 값으로 지정된 색상을 나타냅니다. 그러나 HSV를 사용하면 멋진 부드러운 색상 전환이 가능합니다.

NeoMatrix는 단일 uint16_t 색조 값을 사용하고 uint32_t HSV 색상을 반환하는 matrix.ColorHSV(uint16_t 색조) 메서드를 제공합니다.

그러나 matrix.Color(r, g, b)는 uint16_t 색상을 반환합니다. matrix.drawPixel은 16비트 색상도 예상합니다.

이 문제를 해결하는 방법은 matrix.setPassThruColor(32비트 색상 값)를 사용하는 것입니다. 이것은 drawPixel이 색상 인수를 무시하고 대신 위의 방법으로 이미 설정된 32비트 색상을 사용하도록 하는 행렬에 플래그를 설정합니다. 문제의 플래그를 재설정하려면 matrix.setPassThruColor()를 호출하는 것을 잊지 마십시오. 매우 우아하지는 않지만 작동합니다. 예를 들어,

HSV를 사용하면 16비트 색조를 증가시키고 HSV 색상 코드를 생성할 수 있으므로 색상이 매끄럽게 전환됩니다.

다음은 참조용으로 다른 코드 조각입니다.

Frequencies_One[행])?Frequencies_Two[행]:Frequencies_One[행]; 정수 numCol =(주파수/FREQ_DIV_FACTOR); if (numCol> 5) numCol =5; for (int col =0; col

다음은 색 구성표 선택입니다. 다양한 주파수 범위(bassHue, midHue, trebleHue)에 대해 색상을 선택할 수 있도록 준비했습니다. 저는 3가지 다른 색 구성표를 만들었습니다. 하나는 가장 낮은 진폭에서 가장 높은 진폭까지 표시하기 위해 녹색에서 빨간색/분홍색 범위를 사용하고 다른 하나는 더 많은 분홍색/파란색 이동 범위를 사용합니다. 세 번째 구성표는 모든 픽셀에 대해 동일한 색상을 사용하지만 진행하면서 전체 색상환을 순환합니다. 3가지 색 구성표를 모두 동영상으로 보여 드리겠습니다.

 switch(s) { case MAGNITUDE_HUE:BassHue =22250; 중간 색조 =22250; //54613 고음 색조 =22250; //43690 if (row>=0 &&row <2) { rgbcolor =matrix.ColorHSV(bassHue - (7416 * col) ); } else if (행>=2 &&행 <5) { rgbcolor =matrix.ColorHSV(midHue - (7416 * 열) ); } else if (행>=5 &&행 <7) { rgbcolor =matrix.ColorHSV(trebleHue - (7416 * col) ); } 부서지다; 케이스 MAGNITUDE_HUE_2:BassHue =54613; 중간 색조 =54613; //54613 고음 색조 =54613; //43690 if (row>=0 &&row <2) { rgbcolor =matrix.ColorHSV(bassHue - (7416 * col) ); } else if (행>=2 &&행 <5) { rgbcolor =matrix.ColorHSV(midHue - (7416 * 열) ); } else if (행>=5 &&행 <7) { rgbcolor =matrix.ColorHSV(trebleHue - (7416 * col) ); } 부서지다; 경우 HSV_COLOR_WHEEL:rgbcolor =matrix.ColorHSV(색조); 부서지다; } 

6단계 - 모든 것을 테스트

다음은 모든 것을 테스트하는 동영상입니다.

6단계 - 닫기

상단 버팀대 요소, 측벽, 오디오 케이블 및 상단을 설치합니다. 슬라이드쇼에서 아래 단계를 참조하십시오. 각 이미지의 캡션에는 번호가 매겨져 있으며 각 단계에 대한 추가 설명을 제공합니다.

다음은 단일 애니메이션 GIF의 모든 단계입니다.

7단계 - 창작물을 전시하고 아름다운 음악을 더욱 아름답게 만드세요!

이제 음악 시스템 옆에 표시할 수 있는 재미있는 오디오 비주얼라이저를 갖고 멋진 수제 조명 동작으로 음악을 보강할 수 있습니다!

8단계 - 더 나아가기

프로젝트를 더욱 발전시키기 위한 몇 가지 아이디어가 있습니다!

1. 현재 오디오 케이블(입력 및 출력)은 인클로저의 Spectrum Shield에 연결되어 있으므로 이러한 전선이 연결되고 외부에 매달려 있는 이 인클로저가 있습니다. 대신 Spectrum Shield의 스테레오 잭 근처 측벽에 두 개의 패널 장착 스테레오 잭(사용된 "사물" 목록에 나열됨)을 추가한 다음 3.5mm 수 스테레오 오디오 잭이 있는 오디오 케이블을 납땜할 수 있습니다. 각각에 연결한 다음 Spectrum Shield의 오디오 잭에 대신 연결합니다. 이 경우 인클로저가 매우 깔끔해지고 모든 배선은 외부 시스템을 연결할 수 있도록 인클로저의 오디오 잭만 있는 독립형입니다.

2. 다양한 색상 범위, 다양한 패턴 등 더 많은 조명 구성표를 Audio Visualizer에 추가할 수 있습니다.

3. 직렬 입력을 사용하여 주파수 범위를 활성화/비활성화하는 옵션을 추가합니다. 현재 색 구성표만 변경할 수 있지만 표시할 주파수 범위는 변경할 수 없습니다.

4. 직렬 입력을 사용하는 대신 다른 색 구성표 사이를 전환하는 스위치를 추가합니다. 패널 장착 순간 푸시 버튼 스위치를 수용하기 위해 긴 측벽 중 하나에 구멍을 추가하도록 인클로저를 수정합니다(사용된 "물건" 목록에 나열됨).

5. 두 번째 스위치를 추가하여 표시된 다른 주파수 범위(BASS, MID_RANGE, TREBLE, ALL) 사이를 전환하고 해당 스위치를 인클로저의 측벽에 장착합니다.

6. 인클로저가 아크릴로 만들어졌기 때문에 표면을 보호하기 위해 그 위에 파란색 페인팅 테이프를 사용할 수 있고 패널 장착 스테레오 잭 및/또는 스위치를 장착하기 위해 필요한 측면의 구멍을 뚫기 위해 드릴을 사용할 수 있습니다. 스텝 드릴을 사용하거나 더 작은 구멍으로 시작한 다음 원하는 크기가 될 때까지 구멍을 확장하는 것이 좋습니다. 나열된 스테레오 잭에는 5/16"의 장착 구멍이 필요하고 스위치에는 0.47"의 장착 구멍이 필요합니다.

7. 상판의 윗면을 가볍고 균일하게 샌딩합니다. 이것은 광 확산기 역할을 하여 보다 확산되고 부드러운 조명 효과를 제공합니다.

충분한 관심이 있다면 프로젝트를 업데이트하여 오디오 잭 및 스위치와 불투명한 광 확산기 상단으로 보여드리겠습니다. 업데이트된 프로젝트를 보고 싶다면 저에게 메시지를 보내주세요! 😊

더 생각할 수 있습니까? 아래에 의견을 작성하여 알려주십시오! 😊 궁금하신점도 편하게 문의주세요! 😊

행복한 만들기! 😊

<섹션 클래스="섹션 컨테이너 섹션 축소 가능" id="코드">

코드

ProtoStax 오디오 비주얼라이저 데모

이 ProtoStax 오디오 시각화 도우미 데모에 사용된 코드가 포함된 Github 저장소https://github.com/protostax/ProtoStax_Audio_Visualizer_Demo