Как создать креативную звуковую визуализацию в онлайн-режиме

Как создать креативную звуковую визуализацию в онлайн-режиме

От автора: исследование современной звуковой визуализации в линейном стиле, основанной на p5.js и его библиотеке p5.sound.

Сегодня мы рассмотрим, как в создать визуализацию онлайн в линейном стиле. Мы будем использовать p5.js и его библиотеку p5.sound.

Анализ звука

Если вы хотите, чтобы рисунок реагировал на звуковой сигнал, самое основное, что вам нужно сделать, это заставить его реагировать на громкость общего сигнала, его амплитуду. Это даст вам возможность анимировать рисунок, но только на основе одного входного сигнала. Что делать, если вы хотите создать различные анимации для низких частот и для высоких, или использовать пользовательский диапазон частот для анимации различных частей рисунка? Здесь вам на помощь придет Быстрое преобразование Фурье (FFT).

В основе FFT лежит алгоритм, который анализирует форму волны и предоставляет данные о ее разных частотах. Поэтому после запуска анализа звуковой дорожки с помощью FFT вы можете получить подробный отчет о ее полном частотном спектре и амплитуде каждого частотного диапазона. Затем, используя эти диапазоны, вы можете заставить свой рисунок реагировать по-разному на низкие, средние или высокие частоты сигнала.

Библиотека p5.sound имеет встроенный объект FFT, который используется для множества полезных методов в зависимости от того, что вам нужно. Для наших демо-версий мы в основном используем getEnergy(), который возвращает значение от 0 до 255, представляя громкость этой частоты.

Бесплатный курс «Full-Stack практика»

Изучите курс и создайте веб-приложение с нуля на JavaScript, NodeJS, ExpressJS

Получить курс

Выполняя этот анализ во время воспроизведения музыки, вы можете заставить видео реагировать на разные частоты!

Построение холста

Основная концепция всех демоверсий состоит из 4 частей:

Создание начального рисунка

Анализ аудиосигнала

Анимирование рисунка на основе разных частотных диапазонов

Бесплатный курс «Full-Stack практика»

Изучите курс и создайте веб-приложение с нуля на JavaScript, NodeJS, ExpressJS

Получить курс

Добавление визуальных взаимодействий при перемещении мыши

Чтобы создать базовый рисунок, мы разделим круг на четные части и нарисуем вокруг него несколько простых фигур. На следующем изображении вы можете видеть различные варианты, которые вы получите, если разделите круг на 4 части, 8 частей и т. д. (Черные линии представляют эффект перехода в противоположную сторону для каждой линии).

Как создать креативную звуковую визуализацию в онлайн-режиме

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

И это все! Вы можете поэкспериментировать с различными фигурами или разными входными параметрами и создать уникальные представления для вашей любимой музыки. Учтите, что эти демо-версии необходимо запускать в серверной среде.

Демо-версия | Скачать исходный код

Автор: Yannis Yannakopoulos

Источник: https://tympanus.net/

Редакция: Команда webformyself.

Бесплатный курс «Full-Stack практика»

Изучите курс и создайте веб-приложение с нуля на JavaScript, NodeJS, ExpressJS

Получить курс

Курс по Angular 4 NgRx

Прямо сейчас посмотрите курс по Angular 4 NgRx

Смотреть курс

Метки:

Похожие статьи:

Комментарии Вконтакте:

Комментарии Facebook:

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *

Можно использовать следующие HTML-теги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">

Я не робот.

Spam Protection by WP-SpamFree