Дослідіть візуалізацію даних з p5.js

P5.JS є найновішою реалізацією JavaScript знаменитого настільного творчого кодуючого середовища обробки. Це займає більшу частину потужності та простоти використання обробки та ставить його у ваш браузер. Це допомагає вам малювати полотно, але також інтегрується з вашою веб-сторінкою, дозволяючи вашій "ескізі" реагувати та маніпулювати домом.

p5.js забирає багато головних болів анімації і Візуалізація даних У Інтернеті і робить його супер-простим, щоб встати і запустити з анімацією за допомогою двох простих функцій: Налаштування () і малювати () .

Але не припускайте, що ця простота обмежує, оскільки ви можете обробляти довгий шлях, створюючи свої власні функції та розширюйте його з багатьма бібліотеками спільноти.

Для отримання додаткових веб-дизайну та поради див. Наш список блискучих веб хостинг Постачальники і обов'язково вибрати ідеальний Веб-будівельник і хмара зберігання .

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

Навіщо використовувати дані для керування анімацією?

Створення дизайну та анімаційних систем означає визначення набору правил, параметрів та змінних діапазонів, в які ви можете подавати різні дані. Можливість грати з параметрами системи та введення різних даних означає, що ви можете створювати безмежні вихідні варіанти з послідовністю систематичного підходу.

Різні дані можуть створювати абсолютно різноманітні візуальні виходи та велике джерело швидкого переміщення, багато текстурованих даних є аудіо. Це саме те, що ми будемо використовувати в нашій анімації.

Візуалізація даних VS даних

Чи є анімація даних, що керується даних? Так і ні. Ваша анімація буде візуальним представленням даних, як візуалізація, але мета відрізняється від традиційної візуалізації. Візуалізація даних використовується для отримання глядача представлення даних, тому графік знаходиться на службі зв'язку даних.

Однак ми будемо використовувати дані як творче насіння, щоб дозволити нам генерувати цікаві та текстурні графічні варіанти, тому дані є на службі графіки. Звичайно, однією дисципліною є взаємопов'язана і перехресна запилюється з іншим, але добре визнати ваш власний намір під час використання даних.

Що ми збираємося зробити?

P5.js дає нам швидкий і легкий доступ до даних, що надходять від аналізу звукового файлу (наприклад, MP3). Ми будемо використовувати p5.fft Для аналізу різних частот (басів і високих) у аудіо, оскільки він відтворює назад і візуалізуйте "енергію" або амплітуду цієї частоти.

Для того, щоб ми могли бачити "форму" звуку, як він грає, ми не просто хочемо показати поточну амплітуду звуку, але захопити "буфер" точок даних. Це дозволить нам показати рухому історію цінностей.

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

Що ми дізнаємося?

Робота через код, ми покритимемо:

• Налаштування нового ескізу P5
• Завантаження та аналіз звуку
• Відображення значень даних до візуальних елементів, як розмір, форма та колір
• Використовуючи заняття для малювання, підтримувати стан нашої анімації та даних і зробити наш код багаторазовим.

Де файли?

Файли для анімації розміщені Відкрита обробка , відмінна платформа для обміну, виявлення та вилучення інших людей. Це чудове місце для вас коду.

Оскільки ми будемо використовувати аудіодані, вам знадобиться MP3-файл, щоб перетягнути на ескіз. Ми створимо новий ескіз на відкритому процесі; Ось як ваш ескіз буде виглядати після того, як ми завантажили звук, отримали дані та намалювали просту "Форма даних":

І це, як буде виглядати завершений ескіз:

Крім того, ви також можете використовувати p5.js онлайн редактор Або просто включати бібліотеку у власному проекті Через завантаження або CDN .

01. Почніть новий ескіз

Отримайте безкоштовний обліковий запис OpenProcessing та, з сторінки профілю, натисніть Створити ескіз. Потім це буде створювати найбільш основні ескізи, що містять дві вбудовані функції P5.js:

1. Налаштування () - Це працює лише один раз, і використовується для створення нового полотна
2. малювати () - Ось де ви кладете код, який ви хочете запустити кожен кадр

Ви помітите це фон () тільки називається один раз у створенні. Це очищає екран, тому, якщо ви хочете очистити екран кожен кадр, включіть це на початку малювати () функція теж.

Грайте з деяким кодом тут, використовуючи кілька прикладів, які ви можете знайти на сайті p5.js .

02. Створіть перший ескіз за допомогою аудіоданих

Йти до мого Приклад ескізу стартера .

Натисніть кнопку відтворення, і ви побачите якийсь текст, просячи, щоб ви відкинуте MP3-файл на полотно. Зачекайте кілька секунд, щоб він завершив завантаження, а потім натисніть полотно, щоб розпочати відтворення. Ви повинні побачити еліпс, після миші, яка масштабування та зміна кольору разом з амплітудою басів у музиці, яку ви завантажили.

Значна частина коду коментується, але давайте подивимося на кілька ключових елементів:

Прямо на початку ескізу, попереду Налаштування () , ми створили деякі глобальні змінні.

У межах Налаштування () У нас є кілька важливих рядків:

colorMode(HSB,360,100,100);

Colormode () Дозволяє встановити P5.js працювати в різних кольорових просторах, як RGB та HSB, а також налаштувати шкалу, яку ви використовуєте для переміщення каналів. Тут ми встановили HSB діапазону до цінностей, які ви можете бути більш знайомими з Photoshop, а не налаштування за замовчуванням (від 0 до 255).

canvas.drop(gotFile);

Ця супер корисна функція p5.js дозволяє нам слухати будь-які події для падіння файлів на нашому полотні. Коли ми отримуємо подію файлу, ми називаємо gotfile () Щоб перевірити, чи це правильний тип і почати аналіз звуку.

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

Тут ми вмикаємо наші дані для файлів у a Звуковий файл . Коли ми маємо звуковий файл, ми використовуємо наступний код:

1. INITSound () Щоб встановити новий екземпляр БПФ (для аналізу звуку)
2. Аналіз () для аналізу поточного блоку звуку кожен кадр
3. getnewsounddatavalue () використовувати fft.getenergy () Кожен кадр, щоб дати нам поточну амплітуду звуку. Це перетворюється з колишнього діапазону від 0 до 255 до 0 до 1.

Порада. Це корисно перетворити ваші дані в діапазон від 0 до 1, оскільки ви можете використовувати його легше використовувати його при відображення даних до візуальних параметрів, таких як шкала, швидкість та колір.

Давайте подивимося на функцію нічия (). Ця лінія запитує амплітуду струму (від 0 до 1) частоти басів і призначає його змінну міставаль .

var myDataVal = getNewSoundDataValue(“bass”)

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

var myDataColor = getDataHSBColor(myDataVal);

Перш ніж ми зможемо намалювати наше еліпс, ми повинні дати йому розмір, помножуючи 200 (PX) нашим значенням даних. Отже, чим вище значення, тим більший еліпс.

var myEllipseSize = 200 * myDataVal;

03. Використовуйте аудіо дані як кисть

Для трохи веселощів, коментуйте фон () зателефонувати малювати () Функція, і ви можете використовувати свій звуковий реактивний еліпс для фарбування!

05. Заповніть свій ескіз

Нанесення одного еліпсу даних для однієї частоти велика, але тепер ми створимо серію дуг даних для басів, так і для високих. Ми також малюватимуть буфер попередніх значень, щоб допомогти нам краще бачити форму звуку.

Візит Це закінчила версію ескізу , запустіть його, а потім киньте на ньому mp3.

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

Дивлячись на код, ви побачите більшу частину налаштування, завантаження, аналізу та отримання даних такий самий, як останній ескіз, тому ми можемо ігнорувати це. Тут так, як і раніше, давайте просто вибираємо кілька ключових моментів.

Замість того, щоб малювати дуги безпосередньо в малювати () , ми насправді створюємо деякі користувацькі класи:

1. клас Radialarc {} утримує значення індивідуальної дуги і малює дугу
2. клас Radialarcs {} керує нашою колекцією екземплярів 'Radialarc'

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

Radialarc {} Клас:

Це клас, який містить одне значення даних і малює пару симетричних дуг.

SetValue () і GetValue () дозволяйте нам отримувати дані та вийшли з дуги та натиснути дані через масив нашої дуги як оновлення даних. redrawfromdata () Покликається перерахувати і переробити дугу.

Drainc () де ми називаємо зручну функцію p5.js АРК () . АРК () Швидше, ніж робити тригонометрію, але нам потрібно пройти кілька значень, таких як положення, розмір і, найважливіший, початковий і кінцевий кут для нашої дуги.

Цей кут вимірюється в "Радіанах", а не ступеня. Радіани схожі на градуси, але в іншому масштабі: 360 ° така ж, як 2 x pi radians. P5.js має корисні вбудовані константи для Піт , Half_pi і CAPER_PI та ін

Radialarcs {} Клас:

Це клас управління, який створює масив нашого Radialarc {} Класи і зберігає їх до теперішнього часу, переміщаючи дані та з кожної та викликають дугу redrawfromdata () функція.

Щоб ініціалізувати Radialarcs () Класи для високого та басу, подивіться Налаштування () . Ви можете побачити, що ми створюємо два Radialarcs () інстанції, а також проходження в наших власних параметрах.

Ці параметри: кількість дуг, розміри внутрішніх та зовнішніх дуг, вихідний кут, макс вага лінії та діапазон відтінків кольору. Створюючи ці користувацькі класи, це дозволяє нам повторно використовувати наш код, але також робить кожну інстанцію людини, пропускаючи їх ці параметри.

Після того, як об'єкти дугових об'єктів кожен кадр зателефонує Updateradialarcs () і drawradialarcs () В основному P5 малювати () Функція, яка полягає в тому, як анімація оновлюється і рухається.

06. Візьміть його далі

Ми охопили багато коду, але принципово я сподіваюся, ви можете побачити, як ми приймаємо дані та застосовуємо його до візуальних елементів, як розмір, положення, довжина, вага та колір.

Щоб піти далі, грати навколо з кількістю дуг, груп та кутів. Змініть діапазони кольорів та створювати нові класи, щоб зробити різні форми.

У цьому прикладі ми використовували дані, які постійно течуть і, поєднується з швидкою частотою кадрів, він створює ілюзію анімації. Однак не всі дані подібні до того, що можуть оновлювати повільніше. Для повільних даних ви все ще можете створити плавну анімацію, "Tweening" анімація вашої форми між їх поточними та їх цільовими розмірами.

Удачі з наступною анімацією керування даними!

Ця стаття була опублікована у випуску 320 сітка , журнал найкращого у світі для веб-дизайнерів та розробників. Купити проблему 320 тут або Підписатися тут .

Пов'язані статті:

• Як додати анімацію до SVG з CSS
• Тенденція даних встановлюється до революції дизайну програми
• 12 чудових ресурсів анімації CSS