Вот давно не заходил на один из сайтов. Полазил чуть и сразу наткнулся на вот такую классную идею. Так вот сегодня мы рассмотрим, как создать базовую визуализацию в стиле линий в браузере,будем использовать p5.js для наших рисунков и его библиотеки p5.sound для анализа звуков.
Анализ звука Если вы хотите, чтобы рисунок реагировал на звуковой сигнал, самое основное, что вы могли бы сделать, это заставить его реагировать на громкость общего сигнала, его амплитуду. Это даст вам возможность анимировать рисунок, но только на основе одного входа. Что делать, если вы хотите создать различные анимации для низких частот и для высоких или использовать пользовательский диапазон частот для анимации различных частей вашего рисунка? Здесь быстрое преобразование Фурье может расширить ваши варианты.
В основе FFT - алгоритм, который анализирует форму волны и предоставляет данные о ее разных частотах. Поэтому после запуска анализа БПФ на звуковой дорожке вы можете получить подробный отчет о его полном частотном спектре и амплитуде каждого частотного диапазона. Затем, используя эти разные диапазоны, вы можете заставить свой рисунок реагировать по-разному для низких, средних или высоких частот сигнала.
Библиотека p5.sound имеет встроенный объект FFT, который пригодится множеству полезных методов в зависимости от того, что вам нужно делать. Для наших демонстраций мы в основном используем getEnergy() который возвращает значение от 0 до 255, представляя объем этой частоты.
Выполняя этот анализ во время воспроизведения музыки, вы можете заставить свои видео реагировать на разные частоты
// but giving getEnergy() 2 numbers instead of a keyword
11
// you could use your custom range if needed
12
varbass = fft.getEnergy( "bass");
13
vartreble = fft.getEnergy( "treble");
14
varmid = fft.getEnergy( "mid");
15
varcustom = fft.getEnergy( 100, 200 );
Основная концепция всех демоверсий может быть суммирована в 4 части:
1.Создать начальный чертеж 2.Анализ аудиосигнала 3.Анимация рисунка на основе разных частотных диапазонов 4.Добавление визуальных взаимодействий при перемещении мыши
Чтобы создать наш базовый рисунок, мы разделим круг на четные части и нарисуем вокруг него некоторые основные фигуры. На следующем изображении вы можете увидеть различные варианты, которые вы получите, если вы разделите круг на 4 части, 8 штук и т. Д. (Черные линии представляют эффект перехода в противоположную сторону для каждой линии).
// Define in how many pieces you want to divide the circle
02
varpieces = 32;
03
04
// Circle's radius
05
varradius = 200;
06
07
// Move the origin to the center of the canvas
08
translate( width/2, height/2 );
09
10
// The centered circle
11
stroke( 0, 0, 255 );
12
ellipse( 0, 0, radius );
13
14
// For each piece draw a line
15
for( i = 0; i < pieces; i++ ) {
16
17
// Rotate the point of origin
18
rotate( TWO_PI / pieces );
19
20
// Draw the red lines
21
stroke( 255, 0, 0 );
22
line( 10, radius/2, 0, radius );
23
24
//Optionally also draw to the opposite direction
25
stroke( 0 );
26
line( -10, radius/2, 0, radius );
27
}
Начальная ,интересная часть начинается, если вы переключаете эти статические переменные с динамическим числом, которое постоянно изменяется со временем, например громкость определенной частоты, бас, средняя частота и т. Д. Затем вы можете сопоставить эти значения с вашим собственным диапазоном, который подходит для вашей анимации и получает полный контроль над движением ваших фигур.
// Map the range of each volume with your desired numbers
10
varmapBass = map( bass, 0, 255, -100, 100 );
11
varmapMid = map( mid, 0, 255, -150, 150 );
12
varmapTreble = map( treble, 0, 255, -200, 200 );
13
14
15
for( i = 0; i < pieces; i++ ) {
16
17
rotate( TWO_PI / pieces );
18
19
// Draw the bass lines
20
line( mapBass, radius/2, 0, radius );
21
22
// Draw the mid lines
23
line( mapMid, radius/2, 0, radius );
24
25
// Draw the treble lines
26
line( mapTreble, radius/2, 0, radius );
27
28
}
Все! Вы можете играть с различными формами или разными отображениями и создавать уникальные формы, которые отвечают на вашу любимую музыку.
Имейте в виду, что эти демонстрации необходимо запускать на серверной среде
Ну и так ,если кто не понял, объясняю, скачиваем архив Вы не можете скачивать файлы с нашего сайта ,рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем. Распаковываем, и смотрим .Там 5 вариантов , смотрим какой нам нравится, выбираем. Смотрим файл index.html ,ну то я показываю на первом примере, там нам нужна секция для отображения нашей графики
29.06.17Будем фиксировать менюшку
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.