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

Дата публикации: 2018-03-20

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

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

Анализ звука

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

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

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

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

// Инициализация объекта FFT
  var fft = new p5.FFT();

  // Запуск анализа при воспроизведении аудио
  fft.analyze();

  // Получение различных значений для различных диапазонов частот
  // -----------------------------------------------------
  // p5.sound поставляется с предопределенными ключевыми словами, 
  // однако задав для getEnergy() 2 числа вместо ключевых слов, 
  // вы можете при необходимости использовать пользовательский диапазон
  var bass    = fft.getEnergy( "bass" );
  var treble  = fft.getEnergy( "treble" );
  var mid     = fft.getEnergy( "mid" );     
  var custom  = fft.getEnergy( 100, 200 );

// Инициализация объекта FFT

var fft = new p5.FFT();

// Запуск анализа при воспроизведении аудио

fft.analyze();

// Получение различных значений для различных диапазонов частот

// -----------------------------------------------------

// p5.sound поставляется с предопределенными ключевыми словами,

// однако задав для getEnergy() 2 числа вместо ключевых слов,

// вы можете при необходимости использовать пользовательский диапазон

var bass = fft.getEnergy( "bass" );

var treble = fft.getEnergy( "treble" );

var mid = fft.getEnergy( "mid" );

var custom = fft.getEnergy( 100, 200 );

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

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

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

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

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

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

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

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

// Определяем, на сколько частей мы хотим разделить круг
  var pieces = 32;

  // Радиус круга
  var radius = 200;

  // Перемещаем начальный рисунок к центру холста
  translate( width/2, height/2 );

  // Отцентрированный круг
  stroke( 0, 0, 255 );
  ellipse( 0, 0, radius );

  // Рисуем для каждой части линию
  for( i = 0; i < pieces; i++ ) {
    
    // Вращаем точки исходного рисунка
    rotate( TWO_PI / pieces );
    
    // Рисуем красные линии
    stroke( 255, 0, 0 );
    line( 10, radius/2, 0, radius );
    
    //Опционально также рисуем линии в обратном направлении
    stroke( 0 );
    line( -10, radius/2, 0, radius ); 
  }

// Определяем, на сколько частей мы хотим разделить круг

var pieces = 32;

// Радиус круга

var radius = 200;

// Перемещаем начальный рисунок к центру холста

translate( width/2, height/2 );

// Отцентрированный круг

stroke( 0, 0, 255 );

ellipse( 0, 0, radius );

// Рисуем для каждой части линию

for( i = 0; i < pieces; i++ ) {

// Вращаем точки исходного рисунка

rotate( TWO_PI / pieces );

// Рисуем красные линии

stroke( 255, 0, 0 );

line( 10, radius/2, 0, radius );

//Опционально также рисуем линии в обратном направлении

stroke( 0 );

line( -10, radius/2, 0, radius );

}

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

// Запускаем FFT-анализ
  fft.analyze();

  // Получаем значение громкости для различных диапазонов частот
  var bass    = fft.getEnergy("bass");
  var mid     = fft.getEnergy("mid");     
  var treble  = fft.getEnergy("treble");

  // Задаем соответствие диапазонов громкости с собственными числами 
  var mapBass     = map( bass, 0, 255, -100, 100 );
  var mapMid      = map( mid, 0, 255, -150, 150 );
  var mapTreble   = map( treble, 0, 255, -200, 200 );

  
  for( i = 0; i < pieces; i++ ) {
    
    rotate( TWO_PI / pieces );
    
    // Рисуем линию басов
    line( mapBass, radius/2, 0, radius );
    
    // Рисуем линию средних частот
    line( mapMid, radius/2, 0, radius );    

    // Рисуем линия высоких частот
    line( mapTreble, radius/2, 0, radius );        
    
  }

// Запускаем FFT-анализ

fft.analyze();

// Получаем значение громкости для различных диапазонов частот

var bass = fft.getEnergy("bass");

var mid = fft.getEnergy("mid");

var treble = fft.getEnergy("treble");

// Задаем соответствие диапазонов громкости с собственными числами

var mapBass = map( bass, 0, 255, -100, 100 );

var mapMid = map( mid, 0, 255, -150, 150 );

var mapTreble = map( treble, 0, 255, -200, 200 );

for( i = 0; i < pieces; i++ ) {

rotate( TWO_PI / pieces );

// Рисуем линию басов

line( mapBass, radius/2, 0, radius );

// Рисуем линию средних частот

line( mapMid, radius/2, 0, radius );

// Рисуем линия высоких частот

line( mapTreble, radius/2, 0, radius );

}

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

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

Автор: Yannis Yannakopoulos

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

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

Метки: JavaScript