Вот давно не заходил на один из сайтов. Полазил чуть и сразу наткнулся на вот такую классную идею.
Так вот сегодня мы рассмотрим, как создать базовую визуализацию в стиле линий в браузере,будем использовать p5.js для наших рисунков и его библиотеки p5.sound для анализа звуков.
Анализ звука
Если вы хотите, чтобы рисунок реагировал на звуковой сигнал, самое основное, что вы могли бы сделать, это заставить его реагировать на громкость общего сигнала, его амплитуду. Это даст вам возможность анимировать рисунок, но только на основе одного входа. Что делать, если вы хотите создать различные анимации для низких частот и для высоких или использовать пользовательский диапазон частот для анимации различных частей вашего рисунка? Здесь быстрое преобразование Фурье может расширить ваши варианты.
В основе FFT - алгоритм, который анализирует форму волны и предоставляет данные о ее разных частотах. Поэтому после запуска анализа БПФ на звуковой дорожке вы можете получить подробный отчет о его полном частотном спектре и амплитуде каждого частотного диапазона. Затем, используя эти разные диапазоны, вы можете заставить свой рисунок реагировать по-разному для низких, средних или высоких частот сигнала.
Библиотека p5.sound имеет встроенный объект FFT, который пригодится множеству полезных методов в зависимости от того, что вам нужно делать. Для наших демонстраций мы в основном используем getEnergy() который возвращает значение от 0 до 255, представляя объем этой частоты.
Выполняя этот анализ во время воспроизведения музыки, вы можете заставить свои видео реагировать на разные частоты
// Initiate the FFT object
var fft = new p5.FFT();
// Run the analysis, while the audio is playing
fft.analyze();
// Get different values for different frequency ranges
// -----------------------------------------------------
// p5.sound comes with predefined keywords,
// but giving getEnergy() 2 numbers instead of a keyword
// you could use your custom range if needed
var bass = fft.getEnergy( "bass" );
var treble = fft.getEnergy( "treble" );
var mid = fft.getEnergy( "mid" );
var custom = fft.getEnergy( 100, 200 );
Основная концепция всех демоверсий может быть суммирована в 4 части:
1.Создать начальный чертеж
2.Анализ аудиосигнала
3.Анимация рисунка на основе разных частотных диапазонов
4.Добавление визуальных взаимодействий при перемещении мыши
Чтобы создать наш базовый рисунок, мы разделим круг на четные части и нарисуем вокруг него некоторые основные фигуры. На следующем изображении вы можете увидеть различные варианты, которые вы получите, если вы разделите круг на 4 части, 8 штук и т. Д. (Черные линии представляют эффект перехода в противоположную сторону для каждой линии).
// Define in how many pieces you want to divide the circle
var pieces = 32;
// Circle's radius
var radius = 200;
// Move the origin to the center of the canvas
translate( width/2, height/2 );
// The centered circle
stroke( 0, 0, 255 );
ellipse( 0, 0, radius );
// For each piece draw a line
for( i = 0; i < pieces; i++ ) {
// Rotate the point of origin
rotate( TWO_PI / pieces );
// Draw the red lines
stroke( 255, 0, 0 );
line( 10, radius/2, 0, radius );
//Optionally also draw to the opposite direction
stroke( 0 );
line( -10, radius/2, 0, radius );
}
Начальная ,интересная часть начинается, если вы переключаете эти статические переменные с динамическим числом, которое постоянно изменяется со временем, например громкость определенной частоты, бас, средняя частота и т. Д. Затем вы можете сопоставить эти значения с вашим собственным диапазоном, который подходит для вашей анимации и получает полный контроль над движением ваших фигур.
// Run the FFT analysis
fft.analyze();
// Get the volumes of different frequency ranges
var bass = fft.getEnergy("bass");
var mid = fft.getEnergy("mid");
var treble = fft.getEnergy("treble");
// Map the range of each volume with your desired numbers
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 );
// Draw the bass lines
line( mapBass, radius/2, 0, radius );
// Draw the mid lines
line( mapMid, radius/2, 0, radius );
// Draw the treble lines
line( mapTreble, radius/2, 0, radius );
}
Имейте в виду, что эти демонстрации необходимо запускать на серверной среде
Ну и так ,если кто не понял, объясняю, скачиваем архив Вы не можете скачивать файлы с нашего сайта ,рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.
Распаковываем, и смотрим .Там 5 вариантов , смотрим какой нам нравится, выбираем. Смотрим файл index.html ,ну то я показываю на первом примере, там нам нужна секция для отображения нашей графики
<div class="content main">
<div id="uploading-animation" class="p5_loading">
<div class="p5_loading__inner">
<span></span>
</div>
</div>
<canvas id="webglcanvas"></canvas>
</div>
Далее подключаем скрипты из хранилища, если захотите можете их скачать от туда
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/p5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/addons/p5.dom.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.5.11/addons/p5.sound.min.js"></script>
Тоже подключаем
<script src="{{ tpl_url }}/js/main1.js"></script>Если что то будет не понятно, могу объяснить.
Можешь почитать и вот эту статейку "Замена текста во всех статьях "
Это тоже интересно
29.06.17Будем фиксировать менюшку
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.