Матричный аудиовизуализатор RGB с Arduino

Необходимые инструменты и машины

дрель / шуруповерт, беспроводной

Об этом проекте

В этой статье я объясню, как создать аудиовизуализатор со светодиодной матрицей RGB, используя Arduino, RGB LED Matrix Shield и Audio Spectrum Analyzer Shield, а затем поместить его в корпус, чтобы у вас был готовый проект, который вы можете дисплей вашей музыкальной системы, чтобы иметь красивое световое шоу из вашей музыки!

Для анализа звукового спектра я использую SparkFun Spectrum Shield, в котором используются два графических фильтра эквалайзера MSGEQ7, которые разделяют стереофонический аудиовход на 7 полос (на канал) и считывают амплитуду каждого с помощью АЦП на вашем Arduino. Он поставляется с примерами эскизов Arduino, чтобы начать работу.

Для светодиодной матрицы RGB я использую NeoPixel Shield от Adafruit для Arduino, который состоит из 40 RGB NeoPixels (терминология Adafruit для их источника света WS2812). Красный, зеленый и синий светодиоды интегрированы вместе с микросхемой драйвера в крошечный корпус для поверхностного монтажа, управляемый через один провод. Их можно использовать по отдельности, объединить в более длинные цепочки или собрать в еще более интересные форм-факторы. В случае со щитом они связаны вместе. Shield также поставляется с библиотекой Adafruit_NeoMatrix, которая упрощает доступ к светодиодной матрице RGB и управление светодиодами.

И, наконец, корпус. Некоторые из вас, возможно, знают, что я создал новую модульную систему корпусов с возможностью наращивания под названием ProtoStax. Это был личный зуд, который мне пришлось почесать - я хотел корпус, который поддерживал бы разные этапы прототипирования, предлагал защиту и открытый доступ при запуске, с возможностью добавления боковых стенок и верха позже, но также имел возможность складывать несколько блоков, расположенных рядом или один поверх другого, что дает возможность расширяться за счет создания прототипов и добавления других плат и компонентов.

В этом примере я использую ProtoStax для Arduino, прозрачный акриловый корпус для Arduino - он подходит как для Uno / Leonardo, так и для большего размера Mega / Due - который также может быть штабелирован и модулен и имеет удобное место для двоих. Щиты (с небольшими изменениями, которые я опишу). Он чистый и прочный, а также имеет резиновые ножки, чтобы немного приподнять его и защитить поверхность вашего стола, поэтому вы можете демонстрировать аудиовизуализатор и его световое шоу вместе с музыкальной системой! 😊

Хорошо, давайте начнем, ладно? 😊

Шаг 1. Установите Arduino на опорную пластину корпуса

Давайте сначала установим Arduino (Uno в нашем примере) на опорную пластину корпуса. Это дает ему защиту, предлагая полный открытый доступ к нему для настройки и настройки Arduino, а также поэкспериментировать с ним. Когда вы будете готовы закрыть его, легко добавить боковые стенки и верхнюю пластину и закрепить все винтами.

Установите Arduino на опорную пластину и добавьте ножки и другое оборудование, чтобы подготовить корпус в конфигурации платформы . . См. Шаги ниже в слайд-шоу - заголовок для каждого изображения пронумерован и дает дополнительное объяснение для каждого шага.

Вот все шаги в виде анимированного gif:

Шаг 2. Подготовьте SparkFun Spectrum Shield для Arduino

SparkFun Spectrum Shield не поставляется с заголовками. К счастью для нас, Adafruit NeoPixel Shield для Arduino поставляется как с заголовками стека, так и с простыми заголовками. Поскольку я хочу, чтобы NeoPixel Shield был наверху, я хочу использовать с ним простые заголовки, чтобы он был на одном уровне, и это оставляет заголовки стека для использования с Spectrum Shield, а это как раз то, что я хочу! 😉

Однако Spectrum Shield с заголовками стекирования не подходит плотно - порты USB и Power на Arduino Uno мешают, как показано на рисунке ниже.

Я сделал следующие две модификации -

• Отрежьте конец Spectrum Shield над портами USB и Power (на этой части есть область прототипирования, которая не используется. Даже если вы ее используете, вам придется отрезать только один ряд отверстий). Spectrum Shield плотно прилегает к Arduino.
• Ножки штабелируемых заголовков могут быть слишком длинными, чтобы Spectrum Shield мог плотно прилегать. Я немного подрезал ножки штабелирующих заголовков, чтобы Spectrum Shield плотно прилегал к Arduino вместе с штабелями.

Теперь он плотно прилегает!

Шаг 3. Вставьте Adafruit NeoPixel Shield для Arduino в заголовок стека Spectrum Shield

Adafruit NeoPixel Shield располагается поверх Spectrum Shield. Сначала вам нужно впаять обычные заголовки (которые были в комплекте). Я также припаял клеммный разъем, с которым он шел, хотя в этом примере я включаю его с помощью Arduino, так как все светодиоды не будут включаться одновременно, поэтому потребляемая мощность находится в пределах количества, которое может обеспечить Arduino. .

Сообщение со страницы Adafruit NeoPixel Shield для Arduino:

Шаг 4 - Демо-код

Давайте посмотрим на демонстрационный код и посмотрим, что он делает. Для этого мы можем разделить его на две основные части:

• Спектральный анализ и сохранение результатов
• Преобразование этого в схему отображения / цвета для матрицы NeoPixel 8x5.

Вы можете быстро сослаться на демонстрационный код здесь:

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

Спектральный анализ

Вы можете обратиться к Руководству по подключению Spectrum Shield для получения дополнительной информации о Spectrum Shield. Я обобщил информацию здесь.

Записывая цифровую последовательность на контакты STROBE и RESET Spectrum Shield, вы инициализируете микросхемы MSGEQ7, используемые Shield. Затем вы можете приступить к считыванию величины каждой из 7 различных полос частот, на которые разделен спектр. Считывается каждая полоса, за которой следует импульс на выводе STROBE, чтобы начать считывание следующей полосы. Значения сохраняются в Frequencies_One [7] и Frequencies_Two [7] для двух каналов стереовхода. Значения считываются с помощью 10-битных АЦП Arduino, и, таким образом, выходное значение может быть от 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]; int i; void setup () {... // Инициализируем анализаторы спектра digitalWrite (STROBE, LOW); задержка (1); digitalWrite (СБРОС, ВЫСОКИЙ); задержка (1); digitalWrite (СТРОБ, ВЫСОКИЙ); задержка (1); digitalWrite (СТРОБ, НИЗКИЙ); задержка (1); digitalWrite (RESET, LOW); ...} void loop () {... Read_Frequencies (); ...} / ******************* Извлечь частоты из Spectrum Shield ******************** / void Read_Frequencies () {... // Считываем частоты для каждой полосы для (freq_amp =0; freq_amp <7; freq_amp ++) {Frequencies_One [freq_amp] =(analogRead (DC_One) + analogRead (DC_One))>> 1; Frequencies_Two [freq_amp] =(analogRead (DC_Two) + analogRead (DC_Two))>> 1; ... digitalWrite (СТРОБ, ВЫСОКИЙ); digitalWrite (СТРОБ, НИЗКИЙ); }}  

7 полос частотного спектра:

• 63 Гц
• 160 Гц
• 400 Гц
• 1 кГц
• 2,5 кГц
• 6,25 кГц
• 16 кГц

Я разделил их на 3 диапазона - BASS, MID_RANGE и TREBLE. Типичный диапазон низких частот составляет от 60 до 250 Гц, поэтому первые две полосы находятся в диапазоне низких частот. Средние частоты обычно составляют от 500 Гц до 2 кГц, поэтому я группирую следующие 3 полосы в MID_RANGE. Я группирую оставшиеся 2 полосы в TREBLE.

[Примечание:я также отмечаю максимальное чтение каждой из полос в отдельной переменной. Это, возможно, можно использовать для автоматического масштабирования показаний до уровня, представленного столбцами матрицы RGB - это полезно в случае, когда входной сигнал низкий - в противном случае в этом случае загорится только очень небольшая часть матрицы RGB. ]

Матрица RGB

Дополнительную информацию, касающуюся NeoPixel Shield и NeoPixels в целом, можно найти в Überguide Adafruit NeoPixel. Я обобщил информацию, касающуюся нашего использования здесь.

Основной момент, который я постараюсь прояснить, который меня сначала немного запутал, - это направление и ориентация NeoPixel Shield и нумерация системы координат. Убергуид объясняет это, но я думаю, что смогу сделать это немного проще.

Прежде всего следует отметить, что в системе координат [0, 0] ВСЕГДА относится к левому верхнему углу, независимо от ориентации.

Далее следует отметить ШИРИНУ, за которой следует ВЫСОТА, любой интересующей вас ориентации (например, 5 x 8 против 8 x 5 в случае нашего щита)

В-третьих, обратите внимание на положение ФИЗИЧЕСКОГО светодиода №0 (отмеченного симпатичным логотипом Adafruit). TOP-RIGHT, TOP-LEFT, BOTTOM-LEFT и BOTTOM-RIGHT в зависимости от обстоятельств. Также обратите внимание на ориентацию физических светодиодов. Расположение на нашей плате ПРОГРЕССИВНО (следующий физический светодиод после конца одной строки начинается в начале следующей строки, как показано ЖЕЛТОЙ линией). Ориентация прогрессии - вдоль РЯДОВ, когда ширина больше (горизонтальная ориентация) (как показано короткими ЗЕЛЕНЫМИ стрелками), а КОЛОННЫ с шириной уже (вертикальная ориентация) (опять же, как показано короткими ЗЕЛЕНЫМИ стрелками) ).

Они проиллюстрированы 4 изображениями ниже в слайд-шоу. В заголовках указаны соответствующие настройки в каждом случае!

В нашем примере у нас есть 7 частотных диапазонов и матрица 8 x 5 (или 5 x 8, в зависимости от того, как вы на это смотрите!). Я решил отобразить 7 полос по восьмому измерению (оставив одну неиспользованной). Затем я бы отобразил представление амплитуды каждой полосы частот в 5-м измерении. Другими словами, я хочу, чтобы мой прогресс был следующим:

Я хочу, чтобы моя исходная точка начиналась в нижнем левом углу (представляя самый низкий уровень самой низкой полосы частот) и двигалась вверх. Но поскольку первое, что нужно отметить в системе координат, это то, что [0, 0] всегда относится к ВЕРХНУЮ-ВЛЕВО, вам следует наклонить голову влево и посмотреть на изображение ниже, чтобы понять выбор значений для инициализации NeoMatrix. ! 😊 (WIDTH =5, HEIGHT =8, TOP-RIGHT, COLUMNS PROGRESSIVE)

Давайте немного углубимся в демонстрационный код, относящийся к NeoMatrix, и построим графики частот. Во-первых, мы определили, что наш NeoPixel имеет WIDTH =5, HEIGHT =8, и нам нравится ориентация TOP-RIGHT и COLUMNS PROGRESSIVE. Следуйте настройке, необходимой для матрицы в функции setup ().

В цикле () мы читаем любой последовательный ввод, чтобы выбрать цветовую схему - я определил 3 разные цветовые схемы

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

Затем я вызываю Graph_Frequencies с выбранной цветовой схемой. Также обратите внимание на первый параметр, который может выбрать диапазон отображаемых частот (BASS, MID-RANGE или TREBLE)

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

На данный момент я выбираю все диапазоны для отображения - это оставлено читателю в качестве упражнения для реализации выбора диапазонов для отображения - либо через последовательный вход, либо путем включения кнопки мгновенного нажатия для переключения дисплея между BASS, MID_RANGE, TREBLE или ВСЕ. Выбор ДИАПАЗОНА определяет диапазон отображаемых строк «от» и «до».

Для каждой строки (полосы частот) мы выбираем большую из двух частотных величин (правый канал и левый канал стереовхода). Как мы уже обсуждали, это значение находится между 0 и 1023. Нам нужно отобразить это на 5 отдельных столбцов дисплея, поэтому мы разделим частоту на FREQ_DIV_FACTOR, который определен как 204 (1023/204 =5, что отобразит вывод 1023 на 5). На всякий случай мы также следим за тем, чтобы отображаемое число numCol не превышало 5. Это определяет количество отображаемых столбцов для каждой полосы частот.

Затем я использую matrix.drawPixel () для отображения соответствующего пикселя соответствующего цвета.

Я использую цветовое колесо HSV на моем графическом дисплее. Это потребовало дополнительных морщин.

Обычно используется матрица matrix.drawPixel (столбец, строка, цвет (r, g, b)), где Color (r, g, b) представляет собой цвет, указанный значениями КРАСНЫЙ, ЗЕЛЕНЫЙ и СИНИЙ. Однако использование HSV позволяет добиться приятных плавных цветовых переходов.

NeoMatrix предоставляет метод matrix.ColorHSV (uint16_t hue), который принимает одно значение оттенка uint16_t и возвращает цвет uint32_t HSV.

Однако matrix.Color (r, g, b) возвращает цвет uint16_t. matrix.drawPixel также ожидает 16-битного цвета.

Чтобы решить эту проблему, используйте matrix.setPassThruColor (32-битное значение цвета). Это устанавливает флаг в матрице, который заставляет drawPixel игнорировать свой аргумент цвета и вместо этого использовать 32-битный цвет, уже установленный указанным выше методом. Просто не забудьте вызвать matrix.setPassThruColor (), чтобы сбросить соответствующий флаг. Не супер элегантно, но работает. Например,

  статический uint16_t hue =0; // 21845 от 22250 до -250 uint16_t hueDelta =200; оттенок + =hueDelta; ... rgbcolor =matrix.ColorHSV (оттенок); ... matrix.setPassThruColor (rgbcolor); matrix.drawPixel (столбец, строка, (uint16_t) 0); // цвет здесь не имеет значения matrix.setPassThruColor (); ... matrix.show ();  

С помощью HSV можно увеличивать 16-битный оттенок и генерировать цветовой код HSV, тем самым получая приятные плавные переходы в цвете.

Вот различные фрагменты кода для справки:

Frequencies_One [строка])? Frequencies_Two [строка]:Frequencies_One [строка]; int numCol =(частота / FREQ_DIV_FACTOR); если (numCol> 5) numCol =5; for (int col =0; col

Далее следует выбор цветовой схемы. Обратите внимание, что я предусмотрел возможность выбора цвета для разных частотных диапазонов (bassHue, midHue, trebleHue). Я создал 3 разные цветовые схемы - в одной используется диапазон от зеленого до красного / розового для отображения от наименьшей амплитуды до наибольшей, а в другой используется более розовый / синий смещенный диапазон. Третья схема использует один и тот же цвет для всех пикселей, но циклически проходит через весь цветовой круг по мере продвижения. Я покажу вам видео всех 3-х цветовых схем.

  переключатели {case MAGNITUDE_HUE:bassHue =22250; midHue =22250; // 54613 trebleHue =22250; // 43690 if (row> =0 &&row <2) {rgbcolor =matrix.ColorHSV (bassHue - (7416 * col)); } else if (row> =2 &&row <5) {rgbcolor =matrix.ColorHSV (midHue - (7416 * col)); } else if (row> =5 &&row <7) {rgbcolor =matrix.ColorHSV (trebleHue - (7416 * col)); } ломать; case MAGNITUDE_HUE_2:bassHue =54613; midHue =54613; // 54613 trebleHue =54613; // 43690 if (row> =0 &&row <2) {rgbcolor =matrix.ColorHSV (bassHue - (7416 * col)); } else if (row> =2 &&row <5) {rgbcolor =matrix.ColorHSV (midHue - (7416 * col)); } else if (row> =5 &&row <7) {rgbcolor =matrix.ColorHSV (trebleHue - (7416 * col)); } ломать; case HSV_COLOR_WHEEL:rgbcolor =matrix.ColorHSV (оттенок); ломать; }  

Шаг 6 - Проверка всего

Вот видео тестирования всего

Шаг 6 - Закройте его

Установите верхние элементы распорки, боковые стенки, аудиокабели и верх. См. Шаги ниже в слайд-шоу - заголовок для каждого изображения пронумерован и дает дополнительное объяснение для каждого шага.

Вот все шаги в одном анимированном GIF:

Шаг 7. Покажите свое творение и сделайте красивую музыку еще красивее!

Теперь у вас может быть забавный аудиовизуализатор, который вы можете отображать вместе с вашей музыкальной системой, и добавить к вашей музыке крутые самодельные световые эффекты!

Шаг 8 - Дальнейшее развитие

Вот несколько идей по развитию проекта!

1. В настоящее время аудиокабели (вход и выход) подключены к Spectrum Shield в корпусе, и, таким образом, у вас есть этот корпус с подключенными проводами, свисающими снаружи. Вместо этого вы можете добавить пару стереоразъемов для монтажа на панели (перечисленных в списке используемых «вещей») к боковой стене рядом со стереоразъемами Spectrum Shield, а затем припаять аудиокабель с 3,5-мм штекерным стереофоническим аудиоразъемом. к каждому, а затем подключите их к аудиоразъемам Spectrum Shield. В этом случае ваш корпус становится очень аккуратным, а вся проводка является автономной, а на корпусе только аудиоразъемы для подключения внешних систем.

2. Вы можете добавить в свой аудиовизуализатор еще больше схем освещения - разные цветовые диапазоны, разные узоры.

3. Добавьте параметр для включения / отключения диапазонов частот с помощью последовательного входа - в настоящее время можно изменять только цветовые схемы, но не отображаемые диапазоны частот.

4. Добавьте переключатель для переключения между различными цветовыми схемами вместо использования последовательного ввода. Измените корпус, чтобы добавить отверстие в одной из длинных боковых стенок, чтобы разместить кнопочный переключатель мгновенного действия, устанавливаемый на панели (указан в списке используемых «вещей»).

5. Добавьте второй переключатель для переключения между различными отображаемыми частотными диапазонами (BASS, MID_RANGE, TREBLE, ALL) и прикрепите этот переключатель к боковой стене корпуса.

6. Поскольку корпус сделан из акрила, вы можете покрыть его синей малярной лентой, чтобы защитить поверхность, и сверлом, чтобы просверлить отверстие на нужной стороне для установки стереоразъемов и / или переключателей для монтажа на панели. Рекомендуется использовать ступенчатое сверло или начать с отверстия меньшего размера, а затем расширять отверстие до желаемого размера. Для перечисленных стереоразъемов требуется монтажное отверстие 5/16 ", а для коммутаторов - 0,47".

7. Слегка и равномерно отшлифуйте верхнюю поверхность верхней пластины. Это будет действовать как рассеиватель света и даст вам более рассеянный и мягкий световой эффект.

Если будет достаточный интерес, я обновлю проект, чтобы показать его с помощью аудиоразъемов и переключателей, а также верхней части непрозрачного светорассеивателя - пожалуйста, отправьте мне сообщение, если вы хотите увидеть обновленный проект! 😊

Вы можете придумать еще что-нибудь? Напишите комментарий ниже, чтобы сообщить нам об этом! 😊 Не стесняйтесь задавать любые вопросы, которые могут у вас возникнуть! 😊

Удачного создания! 😊

Код

Демонстрация аудиовизуализатора ProtoStax