После очередного посещения органного концерта встала задача раз и навсегда разобраться в том, как работает этот инструмент. Зачем ему столько клавиатур и столько разных кнопочек. Так я решил сделать интерактивный лонгрид об устройстве органа.
Добро пожаловать — organ.evlkv.ru
А далее я расскажу о процессе создания и тонкостях, встретившихся на пути.
Изображения генерировались в Grok и Nanobanana. И это представляло отдельную сложность. Орган не такой распространённый инструмент, поэтому нейросети постоянно ошибались в его конструкции. Перепутанные клавиши на клавиатуре, неправильное строение трубок — всё это требовало внимания и постоянной регенерации. А также миллион мелких огрехов, которые правились вручную.
Особенно сложно было добиться изображения внутреннего устройства трубок, так как это редко показано на картинках, в основном только в старых видео на ютубе от мастеров.
Отдельно надо было показать устройство органа и то, за счёт чего он производит такой богатый звук. Чтобы сделать эту часть интерактивной и живой, я собрал схему работы одной ноты органа в SVG.
Схема реагирует на нажатия клавиатуры. Клапан движется синхронно с клавишей, и вместе они подпружинивают в начале и в конце движения, чтобы анимация не ощущалась деревянной.
SVG из фигмы экспортируется однородным по структуре. Если нет понятной структуры и группировки объектов, то таким SVG очень сложно управлять кодом. А расчёт был сделать интерактивную SVG анимацию, чтобы она реагировал на нажатия клавиатуры. Для этого SVG после экспорта был доработан в виде текста — элементы обёрнуты в группы, к которым стало легко обращаться из кода для трансформации.
Так получилась анимация, управляемая с клавиатуры и переключателями на экране. Нажатие на клавиатуру двигает клавишу и визуализирует движение звука по тем трубкам, которые включены в панели рядом с визуализацией.
Такая интерактивная визуализация позволяет собрать собственный тембр, и послушать, как он звучит для одиночной ноты и аккорда.
Какой же сайт про музыкальный инструмент и без звука. Следующей встала задача подготовки аудиофайлов и настройки аудиодвижка.
Для звука каждой трубки были синтезированы ноты. Далее, эти звуки были нарезаны так, чтобы звучать циклично, не прерываясь. Для этого начало и конец файлов поставлены по нулевой амплитуде звуковой волны. А длина подобрана так, чтобы учесть крупные модуляции в звуке. Один период самой низкой ноты длится 2 мс. Помимо этого, в характеристике волны происходит лёгкое изменение, которое длится, в среднем, около секунды. Это нужно, чтобы звук не вызывал ощущения статичности и зацикленности. Ноты звучят мягче и естественней.
Так с помощью коротких файлов появилась возможность непрерывного звучания ноты любой длины. А из-за того, что звуки разных нот получились разными по длине, это дало дополнительное разнообразие — если держать ноту долго, то звуки в аккорде слегка смещаются по фазе относительно друг-друга.
Для правильной имитации звука органа недостаточно просто воспроизводить звук его трубы. При нажатии клавиши воздух в органе вырывается через узкую щель клапана, что создаёт характерный «пшикающий» призвук в начале ноты. Этот призвук длится примерно 50 миллисекунд, но это та деталь, которая делает из скучного звука «у-у-у-у» звук «Ч-у-у-у», характерный органу.
Этот «пшик» в начале нельзя просто встроить в звуки нот, потому что он будет зацикливаться вместе с ними. Поэтому он накладывается поверх, каждый раз, когда начинается нота.
Часть звука органа — это зал в котором он находится. Большое помещение обладает множеством переотражений, что даёт длинный и насыщенный «хвост» к звуку.
Чтобы добиться этого, использовалась свёрточная реверберация — это методика, для которой сначала делают слепок эха конкретного помещения, а потом его можно использовать для создания такого же эха на других звуках.
Чтобы всё работало слитно — без обрывов эха между частями лонгрида, — аудиодвижок играет ноты в одну «шину», на которую накладывается реверберация. Так получается объём звука, который путешествует с пользователем по мере движения по сайту.
Это был массивный и сложный проект, где столкнулись графика, интерактив и саунд-дизайн — мои самые сокровенные области интересов. Мне будет очень приятно, если вы поставите лайк или расскажете у себя про лонгрид:
🌐 organ.evlkv.ru
Сходите и послушайте орган в хорошем зале. Я уверен, этот опыт приоткроет вам что-то новое.
