Веб-синтезатор, который притворяется увлажнителем воздуха.
Концепция
Когда в комнате работает увлажнитель воздуха, он тихо булькает, шуршит и ровно светится. В этом размеренном звуке и свете есть что-то успокаивающее.
Многие увлажнители ещё и аромадиффузоры. Можно закрыть глаза и на минуту представить, что ты не дома, а на йога-практике или на чайной церемонии: пар, запах, тёплый свет, далёкий звон колокольчика. Из этого ощущения и вырос инструмент.
Три голоса — три части одной сцены.
WATER — капли воды, внутреннее бульканье прибора. Короткие высокие ноты, которые держат ритм.
BELL — колокольчики, как на чайной церемонии. Долгие звенящие удары, после каждого пар слегка вздрагивает.
MIST — сам пар: ровный мягкий шум, фон, в котором живут два других голоса.
Вода. Синусоида выбрана потому, что это самый чистый и мягкий тон: с короткой атакой он звучит как упавшая капля. Фильтр убирает резкие верха, и капля не царапает слух. Задержка повторяет каплю то слева, то справа, как отзвук в комнате. Реверберация даёт ощущение пространства вокруг.
Колокольчики. FM-синтез выбран потому, что частотная модуляция даёт металлический звенящий призвук, как у настоящего колокольчика, а долгое затухание делает каждый удар протяжным. Фильтр смягчает звон. Хорус слегка расплывает звук, и кажется, что звенит не один колокольчик, а несколько. Реверберация отодвигает звон вдаль, как в храме или саду.
Пар. Розовый шум выбран потому, что он ровный и мягкий, как шипение работающего увлажнителя. Фильтр делает шум темнее, и он ложится фоном, а не шумит поверх музыки. Реверберация растворяет его в пространстве, как туман в комнате. Эха у пара нет: ровному шуму нечего повторять.
У всех голосов один темп, и это принципиально.
Общая кнопка темпа меняет «погоду» сразу для всех: 40, 52, 70 или 100 ударов в минуту.
Представьте, что идёт дождь и капли падают на колокольчики. Если дождь медленный, вода капает редко и колокольчики звенят едва. Если дождь усиливается, учащаются и капли, и удары. Вода и колокольчики не могут жить в разном времени, потому что одно вызывает другое.
Структура кода и нейминг
Голоса везде называются одинаково: water, bell, mist. От них строятся имена узлов звука: waterSynth, waterFilter, waterDelay, waterReverb, waterChannel и так же для bell и mist.Кнопки пульта описаны данными, а не именами: data-voice="water» data-act="up» — плюс воды, data-fn="sun | tempo | moon» — большие кнопки, data-param="filter | reverb | pan | echo» — ползунки. Один обработчик читает эти атрибуты и передаёт их в Voices.Элементы сцены названы по тому, чем они являются в комнате: scene (стена и стол), device, devlight (свечение корпуса), print (надписи на корпусе), steam, cover, через двойной дефис, как в BEM: .key--big, .rc--closed / .rc--open, .shadow--device, .cord--light. Состояния через префикс is-: .is-up (пульт в руке), .is-open (крышка открыта), .is-lit и .is-blink (огонёк горит и мигает), .is-hit, .is-dragging.Цвет и свет передаются через CSS-переменные: --lr, --lg, --lb (цвет лампы), --lit (яркость), --night. JavaScript меняет числа, а CSS сам перекрашивает крышку, корпус и стену.
Интерфейс
Особенность в том, что это сцена, а не панель управления: на столе стоит увлажнитель, рядом лежит пульт, а по клику он «берётся в руку».
Любой «плюс» запускает пар. Кнопка голоса ещё и выбирает его: после неё лампа перетекает в цвет голоса, а ползунки под крышкой показывают его настройки, где уровень громкости, номер режима, темп и значение ползунка; точка слева горит цветом выбранного голоса. Чем громче все голоса вместе, тем он гуще; вздрагивает на удар колокольчика.
В кадре нет ни одного музыкального слова. Даже надписи на корпусе взяты у настоящего увлажнителя и ничего не выдают. Вместо индикаторов и графиков музыку показывают пар, лампа и огоньки на корпусе.
Стиль и визуальное оформление
В коде нарисованы серо-лиловая стена и глянцевый стол, в котором отражается прибор. Сам увлажнитель и пульт сделаны из перламутрового пластика с мягким радужным отливом.
В тишине кадр почти монохромный. Единственные яркие цвета в нём — цвета трёх голосов: синий, зелёный и оранжевый. Они появляются, только когда инструмент звучит: загорается крышка, свет ложится на стену, оживают огоньки на корпусе.
Моё музыкальное высказывание
Дождь, который рождается из тишины комнаты, нарастает и уходит в ночь: четыре минуты, чтобы закрыть глаза рядом с обычным увлажнителем и услышать в нём чайную церемонию.
Промпт-дизайн
