Исследуйте визуализацию данных с P5.JS

P5.JS - самый последний JavaScript внедрение знаменитой настольной творческой обработки среды кодирования. Он принимает большую часть силы и простоту использования обработки и помещает его в ваш браузер. Это помогает вам рисовать в холсте, но также интегрироваться с вашей веб-страницей, позволяя вашему «эскизу» ответить и манипулировать домом.

P5.JS. убирает много головных болей анимации и Визуализация данных В Интернете и делает его супер-простым, чтобы встать и работать с анимацией, используя две простые функции: настраивать() и рисовать() Отказ

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

Для получения дополнительных инструментов и советов веб-дизайна см. В нашем списке блестящих веб хостинг поставщики и обязательно выбрать идеальный Строитель сайта и облачное хранилище Отказ

• 6 способов попасть в творческое кодирование

Зачем использовать данные для привода анимации?

Создание конструктивных и анимационных «систем» означает определение набора правил, параметров и переменных диапазонов, в которые вы можете пилить разные данные. Возможность воспроизведения с параметрами системы и ввода различных данных означает, что вы можете создавать безграничные вариации вывода с согласованностью систематического подхода.

Различные данные могут создавать совершенно разнообразные визуальные выходы и отличный источник быстрого перемещения, богато текстурированных данных - это аудио. Это именно то, что мы собираемся использовать в нашей анимации.

Визуализация данных, управляемая данными VS

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

Тем не менее, мы будем использовать данные в качестве творческого семена, чтобы мы могли создавать интересные и текстурные графические варианты, поэтому данные на обслуживании графики. Конечно, одна дисциплина взаимосвязана и перекрестная опылиняна с другой, но хорошо распознавать свое собственное намерение при использовании данных.

Что мы собираемся сделать?

P5.JS дает нам быстрый и легкий доступ к данным, которые исходят из анализа звукового файла (например, mp3). Мы будем использовать P5.FFT. Проанализировать различные частоты (бас и срок) в аудио, когда он воспроизводится и визуализирует «энергию» или амплитуду этой частоты.

Для того, чтобы мы могли видеть «форму» звука, так как он играет, мы не просто хотим отображать текущую амплитуду звука, но захват «буфер» точек данных. Это позволит нам показать движущуюся историю значений.

Чтобы показать наши точки данных, мы создадим ряд концентрических дугов от центра к внешнему краю экрана. Длина дуги будет представлять амплитуду данных. Мы также использовали другие визуальные кодировки для наших данных, таких как вес и цвет линии.

Что мы узнаем?

Работаю по коду, мы будем покрывать:

• Настройка нового эскиза P5
• Загрузка и анализ звука
• Сопоставление данных данных на визуальные элементы, такие как размер, форма и цвет
• Использование классов для рисования, поддерживать состояние нашей анимации и данные и сделать наш код многоразовым.

Где файлы?

Файлы для анимации размещены на OpenBrocessing , отличная платформа для обмена, открытия и раздувающихся набросков других людей. Это отличное место для вас, чтобы кодировать тоже.

Как мы будем использовать аудиоданные данные, вам понадобится файл MP3 для перетаскивания в эскиз. Мы создадим новый эскиз на OpenProcessing; Вот как ваш эскиз будет выглядеть после того, как мы загрузили аудио, получили данные и нарисованные простым «формой данных»:

И вот как завершенный эскиз будет выглядеть:

Альтернативно, вы также можете использовать P5.JS Онлайн редактор или просто включите библиотеку в своем собственном проекте через скачать или CDN Отказ

01. Начните новый эскиз

Получите бесплатную учетную запись OpenProcessing и, с вашего профиля, нажмите Создать эскиз. Затем это создаст самые основные эскизы, содержащие два встроенных функция P5.JS:

1. настраивать() - Это работает только один раз и используется для настройки нового холста
2. рисовать() - вот где вы положите код, который вы хотите запустить каждый кадр

Вы заметите это фон() называется только один раз в настройке. Это очищает экран, поэтому, если вы хотите очистить экран каждый кадр, включите это в начале рисовать() Функция тоже.

Играйте с некоторым кодом здесь, используя несколько примеров, которые вы можете найти на площадке P5.JS Отказ

02. Создайте первый эскиз с помощью аудиоданных

Перейти к моему Пример наброски стартера Отказ

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

Большая часть кода прокомментирована, но давайте посмотрим на несколько ключевых элементов:

Прямо в начале эскиза, впереди настраивать() Мы создали несколько глобальных переменных.

В настраивать() У нас есть пара важных линий:

colorMode(HSB,360,100,100);

Colormode () Позволяет установить P5.js для работы в разных цветовых пространствах, таких как RGB и HSB, а также настроить масштаб, который вы используете для навигации по каналам. Здесь мы установили HSB-диапазоны на значения, которые вы можете быть более знакомы с Photoshop, а не настройки по умолчанию (от 0 до 255).

canvas.drop(gotFile);

Эта функция Super Treledful P5.JS позволяет слушать любые события падения файлов на нашем холсте. Когда мы получим событие Drop файла, мы называем gotfile () Чтобы проверить, является ли это правильный тип и начать анализировать звук.

soundFile = new p5.SoundFile(file.data);

Здесь мы превращаем наши данные сброшенные файлы в SoundFile. Отказ Когда у нас есть звуковой файл, мы используем следующий код:

1. initsound () Чтобы создать новый экземпляр FFT (для анализа звука)
2. анализ () Проанализировать текущий блок звука каждый кадр
3. getnewsounddatavalue () использовать FFT.GetEnergy () Каждый кадр, чтобы дать нам текущую амплитуду звука. Это преобразуется из диапазона по умолчанию от 0 до 255 до 0 до 1.

Совет: полезно преобразовывать ваши данные в диапазон от 0 до 1, потому что вы можете использовать его легче при оформлении данных на визуальные параметры, такие как масштаб, скорость и цвет.

Давайте посмотрим на функцию Draw (). Эта строка запросиет текущую амплитуду (от 0 до 1) баса и присваивает ее переменной MyDataval Отказ

var myDataVal = getNewSoundDataValue(“bass”)

Мы называем наш обычай getdatahsbcolor () Функция, которая отображает наше значение данных отдельно в оттенках, насыщенность и яркость и возвращает нам цвет. Чем выше данные, тем дальше цвет переменяется через спектр оттенка и более яркий и более насыщенный цвет.

var myDataColor = getDataHSBColor(myDataVal);

Прежде чем мы сможем нарисовать наш эллипс, нам нужно дать ему размер, умножая 200 (PX) наше значением данных. Таким образом, чем выше значение, тем больше эллипс.

var myEllipseSize = 200 * myDataVal;

03. Используйте аудио данные как кисти

Насколько раз весело прокомментируйте фон() позвонить в рисовать() Функция, и вы можете использовать свой звук реактивный эллипс, чтобы покрасить!

05. Завершите свой эскиз

Рисование одного элемента данных ELLIPSE на одну частоту великолепно, но теперь мы создадим ряд дуг данных для баса, так и сроки. Мы также нарисуем буфер предыдущих значений, чтобы помочь нам лучше увидеть форму звука.

Посещение Эта законченная версия эскиза , запустите его, а затем нажмите на нем mp3.

Теперь вы увидите ряд дуг, возникающих из центра экрана. Горизонтальные дуги - это визуализация баса, а вертикальные выбирают срок MP3.

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

Вместо того, чтобы рисовать дуги прямо в рисовать() На самом деле мы создаем некоторые пользовательские занятия:

1. Class RadialArc {} Удерживает значение данных отдельных дуги и рисует дугу
2. Class Radialarcs {} Управляет нашей коллекцией экземпляров «RadialArc»

Каждое определение класса имеет конструктор, в котором мы устанавливаем некоторые ключевые значения, а также передаем параметры, которые позволяют нам изменять поведение класса. Давайте посмотрим на них сейчас.

Класс Radialarc {}:

Это класс, который содержит одно значение данных и рисует пару симметричных дуг.

setvalue () и GetValue () Включите нами, чтобы получить данные и выходить из дуги и выдвинуть данные через массив нашей дуги в качестве обновлений данных. RedRawfromdata () призван пересчитать и перерисовать дугу.

drawarc () где мы называем удобную функцию P5.js дуга () Отказ Дуга () Быстрее, чем делать тригонометрию себя, но нам нужно пройти несколько ценностей, таких как положение, размер и, важно, начало и конечный угол для нашей дуги.

Этот угол измеряется в «радианах», а не градуса. Радианы похожи на градусы, но в другом масштабе: 360 ° то же самое, что и 2-х х радианов PI. P5.JS имеет полезные встроенные константы для ЧИСЛО ПИ , Half_pi. и Quarter_pi. и Т. Д.

Radialarcs {} класс:

Это класс управления, который создает массив нашего RadialArc {} Классы и сохраняют их в курсе, перемещая данные в и вынесении каждого и вызов дуги RedRawfromdata () функция.

Инициализировать RadialArcs () классы для тройных и басов, посмотрите в настраивать() Отказ Вы можете увидеть, что мы создаем два RadialArcs () экземпляры, а также проходящие в наших пользовательских параметрах.

Эти параметры: количество дугов, размеров внутренних и внешних дуг, начальный угол, максимальный вес линии и диапазон оттенков цвета. Создавая эти пользовательские классы, он позволяет нам повторно использовать наш код, но также сделать человека каждый экземпляр, передавая их эти параметры.

После инициализации объектов дуги каждый кадр позвонит UPDATALADIALARCS () и DrawRadialArcs () в пределах главного P5 рисовать() Функция, имеющаясь, как обновления анимации и перемещения.

06. Возьми его дальше

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

Чтобы пойти дальше, играть с количеством дугов, групп и углов. Измените диапазоны цвета и создайте новые классы, чтобы нарисовать разные формы.

В этом примере мы использовали данные, которые постоянно текут, и в сочетании с быстрой частотой кадров оно создает иллюзию анимации. Тем не менее, не все данные такие, и могут обновлять медленнее. Для более медленных данных вы все равно можете создавать гладкую анимацию «Tweening» анимацией ваших форм между их текущим и их целевыми размерами.

Удачи с вашей следующей анимацией, управляемой данными!

Эта статья была первоначально опубликована в вопросе 320 сеть Самый продаваемый журнал мира для веб-дизайнеров и разработчиков. Купить выпуск 320. здесь или Подписаться здесь Отказ

Статьи по Теме:

• Как добавить анимацию на SVG с CSS
• Trend Trend набор для революции дизайна приложений
• 12 Большие ресурсы анимации CSS