Original size 850x1326

Сигнал в тумане

PROTECT STATUS: not protected
The project is taking part in the competition
big
Original size 3226x1882

Концепция

В основе проекта лежит связь музыкальной композиции и природной формы. Пиано позволяет выстроить мелодию и гармонию. Дерево создает изменяющееся звуковое окружение: его ветви становятся резонаторами, которые откликаются на удары, шум и дождь.

Loading...

Два голоса

Первый голос — пианоМягкий синтезированный тембр для мелодии и ручной игры. В нотном редакторе можно менять высоту, положение, длительность и силу нот. Во вкладке «Гармония» выбирается аккорд для каждого такта.Второй голос — деревоРезонансный инструмент, связанный с геометрией ветвей. Размеры сегментов определяют высоту звука, громкость и затухание. На дереве можно играть кликами, с клавиатуры и через записанную нотную партию.

Стиль

Визуальный образ инструмента связан с лесом, сумерками и мягким светом.Темный зеленый фон объединяет рабочее пространство. Светлые подписи и спокойные цветовые акценты помогают различать голоса и элементы управления.

Original size 1672x941

Структура инструмента

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

Организация интерфейса

Экран разделен на две панели по голосам. Слева: пиано, вкладки «Ноты» и «Гармония», редактор партии и клавиатура для ручной игры. Справа: дерево, его нотная партия и настройки звучания.Над панелями расположен общий транспорт: воспроизведение, остановка, повтор цикла, темп, метроном и громкость. Настройки дерева объединены в четыре группы: «Форма», «Тон и резонанс», «Воздух и шум», «Дождь и выход».

Компоненты и нейминг

Названия элементов интерфейса описывают действие или назначение: «Играть», «Приглушить», «Вырастить заново». В коде используется такая же логика.Общие CSS-классы задают единый вид панелей, вкладок и кнопок. Названия функций отражают действие: addNote, updateNote, renderForest. Функция createVoiceChannel создает отдельную цепочку обработки голоса.

Дизайн-промт

Создай веб-синтезатор с пианино и интерактивным лесом, в котором деревья издают звуки. Идея — мысль как мелодия, блуждающая по лесу, который мы сами создаем. Добавь возможность играть, сочинять мелодии и менять звучание леса. Размести интерфейс в одном окне в темных природных оттенках.

Сигнал в тумане
Project created at 30.10.2026