• 168
  • 0
  • Автор: Yannis Yannakopoulos
  • Адаптировал: irbees2008
  • Источник:
  • Уровень сложности исполнения: нужны навыки css html
  • Демо:

Вот давно не заходил на один из сайтов. Полазил чуть и сразу наткнулся на вот такую классную идею.
Так вот сегодня мы рассмотрим, как создать базовую визуализацию в стиле линий в браузере,будем использовать 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 штук и т. Д. (Черные линии представляют эффект перехода в противоположную сторону для каждой линии).
circle_.gif (29.02 Kb)

Код:
// 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>
Ну и еще один скрипт которым все и настраиваем, это тоже по вариантам, у меня это main1.js (они все в папке JS).
Тоже подключаем
Код:
<script src="{{ tpl_url }}/js/main1.js"></script>
Ну в скрипте можно настроить цвет фона,цвет линий
Если что то будет не понятно, могу объяснить.

Можешь почитать и вот эту статейку "Теги <mark> "

mistakes

Это тоже интересно

Уважаемый посетитель, Вы зашли на сайт как незарегистрированный пользователь.
Мы рекомендуем Вам зарегистрироваться либо войти на сайт под своим именем.

Ваше мнение

Ваше отношение к TWIG
Результаты

Облако тегов

Anything in here will be replaced on browsers that support the canvas element