Listen to the town

Listen to the town — веб-инструмент, на котором можно играть, слушая город от дня до ночи.Днем ритм плотный и играет звонкая мелодия, вечером все замедляется и становится мягче, ночью остается сердцебиение, редкие окна и дождь.Окна в домах работают как секвенсор, по ним слева направо идет невидимая каретка, и каждое горящее окно звучит, когда до него доходит очередь. Чем выше окно, тем выше нота. Зажигая и гася свет, на фасадах сочиняется мелодия.Капли падают с неба и звенят, когда касаются крыш, луна держит фоновый гул, туман растворяет звук в эхе. Три режима, день, вечер и ночь, меняют лад, темп, тембр окон и ритм.

Прототип № 1: Клик по окну гасил свет и приглушал шум города, луна управляла дрон-пэдом, туман добавлял реверберацию, клик по небу перемешивал ноты капель.Что не сработало: окна были почти декоративными, потому что меняли только громкость шума, клик по небу почти ничего не менял на слух, а звук оставался однообразным на протяжении всего сета.

Прототип № 2: Окна превратились в секвенсор, капля теперь падает из точки клика. Добавилась панель-инструкция в формате «объект, действие, что происходит» и тоггл звука, который останавливает все механики. Также появились заготовки трех режимов (день / вечер / ночь) в разных ладах и темпах и с разными тембрами.

Прототип № 3: Режимы из заготовок стали полноценными. При переключении темп плавно перетекает в новый, а у окон меняются тембр и эффекты. Днем звук короткий и звонкий, вечером в нем появляются хорус и дилей, ночью он тонет в длинном эхе. Луна в каждом режиме играет свои аккорды, и ночью ее гул звучит громче, чем днем. Город к ночи затихает, а дождь, наоборот, становится гуще. Ритм сменяется с бочки на каждую долю на редкие удары вечером и сердцебиение ночью. У каждого режима есть и свой стартовый рисунок окон. Днем горит много окон, ночью всего пять.У режимов появился свой интерфейс. День окрашен в голубое небо с солнцем и светлыми окнами, вечер в фиолетовое, ночь в темно-синее с желтыми окнами. Под инструкцией добавились выключатели для окон, капель, гула, города и ритма. Голос плавно затихает и так же плавно возвращается. Если выключить капли, дождь останавливается, а если окна, город гаснет и мелодия замолкает.

В инструменте 5 голосов, у каждого своя цепочка эффектов и свой канал.Окна (голос 1): полифонический FM-синтезатор, дальше хорус, дилей, фильтр и реверберация. На десктопе 16 колонок окон по всем домам дают 16 шагов по восьмой, это два такта по кругу. Нота окна зависит от его высоты на экране, несколько горящих окон в одной колонке звучат аккордом.Капли (голос 2): простой синтезатор с короткой огибающей, дилей и реверберация. Капля звучит в момент касания крыши, на октаву выше мелодии окон. Чем правее капля, тем выше нота. Дождь идет сам, а клик по небу добавляет капли.Луна (голос 3): пэд на широкой треугольной волне, фильтр и реверберация, по аккорду на такт. Чем выше луна, тем громче и ярче гул.Город (голос 4): коричневый шум через AutoFilter, создающий эффект проезжающих машин.Ритм (голос 5): мембранный синтезатор с фильтром низких частот.Туман (общая ручка): макро-контроллер, наложенный поверх всех. Чем он выше, тем больше реверберации на окнах, каплях и луне, и тем глуше звучат окна.

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

Инструмент: Claude (Anthropic), claude.aiС помощью ИИ доработаны настройки режимов и голосов, цепочки эффектов и секвенции, а также реализована адаптивная версия интерфейса по готовым макетам.Концепция, визуальный дизайн, интерфейс, основная html и css верстка, интерактивные механики и база для звучания выполнены без использования нейросетей.Как работала с моделью: Перенесла макет из фигмы в код, реализовала взаимодействия и задала структуру пяти голосов. После этого подключила Claude, чтобы подобрать параметры синтезаторов, собрать цепочки эффектов и настроить последовательности для разных режимов. Адаптивные версии интерфейса сначала нарисовала в фигме, затем с помощью Claude перенесла их в код, корректируя результат и задавая логику изменения домов в зависимости от ширины экрана.