Technitone.com - це поєднання WebGL, елемента canvas, веб-сокетів, CSS3, JavaScript, Flash і нового API веб-аудіо в Chrome.

У цій статті ми торкнемося всі аспекти розробки додатків: планування, серверну частину, звуки, візуальні ефекти і послідовності операцій, які використовуються для створення інтерактивності. Більшість розділів містять фрагменти коду, демонстраційні приклади і матеріали для завантаження. В кінці статті наводиться посилання, по якій можна скачати всі відразу в одному ZIP-файл.

Завдання.

У gskinner.com немає звукоинженеров, але якщо поставити перед цією групою цікаве завдання, то вона придумає план.

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

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

Ми також:

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

Ми зберегли знайому сітку, помістили її в тривимірний простір, додали освітлення, текстуру і ефекти частинок і забезпечили все це гнучким (або весь екран) інтерфейсом CSS на базі JS.

Маршрут.

Дані інструменту, ефекту і сітки консолідуються і серіалізуются на клієнті, а потім відправляються серверному скрипту Node.js , Що забезпечує спільну роботу користувачів за схемою Socket.io . Потім дані повертаються клієнтові зі змінами, внесеними кожним з учасників, і розподіляються по шарах CSS, WebGL і WebAudio, що відповідає за рендеринг призначеного для користувача інтерфейсу, семплів і ефектів під час відтворення за участю кількох користувачів.

JavaScript-скрипти на клієнті і сервері обмінюються даними через сокети в режимі реального часу.

Вся робота сервера реалізується в скрипті Node. Це одночасно статичний веб-сервер і сервер сокетов. В кінцевому підсумку ми перейшли на повнофункціональний веб-сервер Express , Створений на базі Node. Він прекрасно масштабується, добре налаштовується і виконує низькорівневі серверні операції (як, наприклад, Apache і Windows Server). До завдань розробника входить тільки створення програми. Завантажте більш детальну схему взаємодії між клієнтом і сервером.

Демонстраційний приклад многопользовательского додатки (скріншот)

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

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

Працювати з Node дуже просто. Поєднання Socket.io і персоналізованих POST-запитів позбавляє нас від необхідності створювати складні підпрограми для синхронізації. Socket.io прозоро виконує це завдання і передає об'єкти JSON .

Наскільки це просто? Дивіться самі.

Всього три рядки JavaScript-коду дозволяють активувати веб-сервер і запустити Express.

Ще кілька рядків встановлюють з'єднання з модулем socket.io для обміну даними в режимі реального часу.

Далі ми тільки слухаємо вхідні з'єднання зі сторінки HTML.

Перевірка звуку.

Було абсолютно невідомо, наскільки складно буде використовувати API веб-аудіо. Перші результати нашої роботи показали, що цифрова обробка сигналів (DSP) - це дуже складно і не зовсім нам під силу. Другий висновок: Кріс Роджерс (Chris Rogers) вже виконав всю найважчу роботу з API.

У Technitone не використовуються складні математичні алгоритми і обробка звуку: ці функції відкриті для всіх зацікавлених розробників. Нам потрібно було тільки привести в порядок термінологію і прочитати документи . Хочете рада? Не нехтуйте ними. Прочитайте їх уважно від початку і до кінця. Документація забезпечена графіками і фотографіями і дуже цікава.

Якщо ви вперше чуєте про API веб-аудіо або не знаєте, що з ним робити, зверніться до демонстраційним прикладів Кріса Роджерса. Шукаєте натхнення? Вважайте, що ви його знайшли.

Демонстраційний приклад API веб-аудіо

Ваш браузер не підтримує API веб-аудіо. Спробуйте запустити демонстраційний приклад в Chrome.

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

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

Зміст WebGL виводиться на елемент canvas HTML5 і складається з наступних основних блоків:

• вершини об'єкта (його геометрія);
• матриці положення (тривимірні координати);
• шейдери (опис зовнішнього вигляду геометрії, прив'язане безпосередньо до графічного процесора);
• контекст ( "ярлики" для елементів, на які посилається графічний процесор);
• буфери (канали для передачі контекстних даних графічного процесора);
• основний код (бізнес-логіка інтерактивної взаємодії);
• метод малювання (активує шейдери і малює пікселі на елементі canvas).

Нижче наведена найпростіша процедура виведення змісту WebGL на екран.

1. Вибір матриці перспектив (коригування налаштувань камери, спрямованої в тривимірний простір, і визначення площині зображення).
2. Вибір матриці положення (оголошення точки відліку в тривимірних координатах, щодо якої визначаються положення).
3. Заповнення буферів даними (положення вершини, колір, текстура і т. Д.) Для передачі контексту через шейдери.
4. Витяг і систематизація даних з буферів в шейдерах і їх передача графічного процесора.
5. Виклик методу малювання, який дає контексту команду активувати шейдери, виконати запуск з даними і оновити елемент canvas.

Нижче описано, як ця процедура виглядає в дії.

Вибір матриці перспектив:

Вибір матриці положення:

Визначення геометрії і зовнішнього вигляду:

Заповнення буферів даними і їх передача в контекст:

Виклик методу малювання:

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

Місце.

Всі елементи інтерфейсу, крім сітки і тунелю частинок, створені за допомогою HTML або CSS, а також інтерактивних алгоритмів JavaScript.

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

Для цього потрібно було ретельно продумати процес навчання нових користувачів. Ми включили непомітні підказки, наприклад зміна властивостей покажчика CSS в залежності від положення миші в просторі WebGL. Якщо покажчик знаходиться над сіткою, він набуває форму руки (оскільки з програмою можна взаємодіяти, вибудовуючи тони). Потрапляючи в порожню область навколо сітки, він отримує форму спрямованого хреста (показуючи, що сітку можна обертати і розділяти на шари).

Підготовка до шоу

пакети LESS (Засіб попередньої обробки CSS) і CodeKit (Корисні інструменти для веб-програмування) набагато скоротили час, необхідний для перетворення файлів проекту в чистий HTML- і CSS-код. Вони допомогли нам систематизувати, записати і оптимізувати CSS-код, використовуючи змінні, функції і навіть математичні алгоритми.

сценічні ефекти

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

Скрипт Backbone.js дозволяє перехоплювати події зміни кольорів і застосовувати новий колір до відповідних елементів моделі DOM. Прискорені графічним процесором переходи CSS3 обробляють зміни в стилі кольору, практично не впливаючи на продуктивність.

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

Демонстраційний приклад переходу кольорів: скільки квітів ви здатні створити?

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

Завантажити демонстраційний приклад зміни кольорів

Давайте подивимося, що в цей час відбувається в HTML-, CSS- і JavaScript-коді і як підготувати художні матеріали для цього ефекту.

HTML: основа

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

<! - Basic HTML Setup -> <div class = "illo color-mixed"> <div class = "illo color-primary"> </ div> <div class = "illo color-secondary"> </ div > </ div>

CSS: проста, але стильна структура

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

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

Список підтримуваних в даний момент браузерів і рекомендовані способи застосування переходів CSS3 можна знайти на веб-сайті HTML5.

JavaScript: втілення в життя

Динамічне призначення квітів - це просто. Ми задали в DOM пошук всіх елементів потрібного класу і встановили колір фону відповідно до кольору, обраним користувачем. Ефект переходу застосовується до елементів DOM шляхом додавання класу.

Це створює дуже легку, гнучку і масштабовану архітектуру.

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

Ілюстрація архітектури HTML і CSS: надання індивідуальності областям зміни кольору

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

На зображенні в 24-бітному форматі PNG фоновий колір елементів HTML видно через прозорі області.

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

Рішенням стало створення ілюстрації, на якій краю колірних областей не потрапляли б в прозорі ділянки.

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

Подивіться на файл Photoshop і зверніть увагу на те, як інформація про структуру CSS відображається в назвах шарів.

Завантажити демонстраційний приклад зміни кольорів

На біс.

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

Якщо вас зацікавили роботи Technitone, стежте за новинами в нашому блозі .

Завантажити все демонстраційні приклади одним файлом

Ансамбль.

Дякуємо за увагу. Можливо, скоро ми влаштуємо з вами джем-сейшн !