Пиксельный дождь и бесконечный джазхоп: как устроен генеративный мир Lofi Cities
В окне разрешением ровно 480 на 270 пикселей мерно раскачивается фонарь над мокрым асфальтом, пока браузер высчитывает новую басовую партию. Здесь нет видеофайлов на сотни мегабайт и зацикленных треков из стоков. Разработчик Сафа Элмали запустил веб-сервис Lofi Cities, соединив низкополигональную городскую эстетику с генеративной аудиосистемой, которая звучит без пауз и никогда не повторяется.
Архитектура живого звука
Сердце проекта — браузерный интерфейс Web Audio API. Музыка не воспроизводится из готовых семплов: движок генерирует композиции на лету прямо на устройстве пользователя. Система рассчитывает аккордовые сетки, гармонии, басовые линии и партии ударных с нуля. Финальный штрих — процедурные искажения вроде теплого треска виниловой пластинки и легкого плавания скорости магнитной ленты.
Палитра стилей в меню Vibe разделена на девять направлений:
- Jazzhop: установленный по умолчанию режим с мягким электропианино Rhodes, джазовыми последовательностями и ленивым свингом в темпе 68–88 BPM;
- Piano: медленные фортепианные пассажи с деликатной перкуссией;
- Ambient: размытые синтезаторные пэды без четкой ритмической сетки;
- Bossa: классический рисунок босса-новы под аккомпанемент нейлоновых струн;
- Synth: ностальгический синти-поп с эстетикой восьмидесятых годов;
- House: легкий ритм four-on-the-floor для монотонной работы;
- Guitar: чистый звук электрогитары поверх спокойных ударных;
- Sad: минорная гармония с приглушенной трубой;
- Medieval: старинная лютня и флейта с акцентом на ручные барабаны.
Плотность звука настраивается вручную. Можно переключить общее настроение с медитативного на бодрое, убрать ударные инструменты вовсе или оставить одну лишь аккордовую основу.
Шестнадцать панорам и цифровое пространство
Визуальная часть сервиса опирается на шестнадцать локаций. Каждая представляет собой четырехминутную бесшовную пиксельную зарисовку с узнаваемыми ориентирами и локальным шумом улицы — от шума дождя и ветра до гудков речных пароходов. В список вошли Токио, Париж, Лондон, Нью-Йорк, Стамбул, Гонконг, Рио-де-Жанейро, Сидней, Сан-Франциско, Гамбург, Амстердам, Дубай, Мадрид, Рим, Прага и Мюнхен.
Сцены чутко реагируют на окружение. Пользователь может щелчком мыши включить снегопад, ливень, листопад или чистое небо. Картинка и звуковой фон перестраиваются синхронно. Для тех, кто не хочет задерживаться в одной точке, предусмотрен режим тура: города сменяются каждые 5, 10, 15 или 30 минут. Есть и более поэтичный сценарий — алгоритм ищет город, где местное время ближе всего к часу ночи, и включает его панораму.
В платформу встроены утилиты для концентрации. Таймер Помодоро работает в классических циклах 25/5 или 50/10 минут с негромким звуковым оповещением. Таймер сна постепенно снижает громкость музыки и полевых записей на протяжении отрезка от 15 до 90 минут, после чего останавливает воспроизведение.
Интерактивный слой связывает слушателей без тяжеловесных соцсетей. На экране можно запускать парящие бумажные фонарики, отправлять реакции в виде сердец, звезд, нот или луны, а также писать анонимные реплики до 80 символов в локальный чат города. Сервис сам выдает авторам нейтральные имена в духе «sleepy fox» и фильтрует внешние ссылки.
Стримерам и моушн-дизайнерам пригодится режим интеграции с OBS: сервис запускается как источник браузера с параметром ?obs, позволяя контролировать аудиопоток и погоду прямо через адресную строку.
Локальный код и рекламные щиты
Техническая сторона Lofi Cities интересна полным отказом от слежки и серверных нагрузок. Здесь нет авторизации, сбора файлов cookie или тяжелых скриптов. Параметры интерфейса, уровень громкости и выбранные города хранятся исключительно в памяти браузера. Страница загружается один раз и способна полноценно играть в офлайн-режиме: код синтезаторов и спрайты уже находятся на компьютере.
Монетизацию автор выстроил прозрачно. В каждом городе нарисован пиксельный рекламный билборд: сейчас там крутятся вымышленные плакаты, но место открыто под аренду сторонними брендами через форму заявки. На площадке Gumroad Элмали продает пак из 16 зацикленных видеороликов в разрешении 1920×1080 с частотой 60 кадров в секунду без звука — под футажи и стримы, а поддержать проект напрямую можно через Buy Me a Coffee.
Нас подкупило, как минималистичный инжиниринг решает задачу, под которую стриминги гоняют терабайты сжатого видео. Это напоминание арт-директорам и цифровым художникам: выразительная среда строится не перегруженным рендером, а точным балансом процедурного кода и нескольких сотен пикселей.
