Небольшой making of… по следам нашего последнего демо для CAFe'2019 ZX Spectrum demo compo.

To Sync or not to Sync

Идея демо, тотально синхронизированного с музыкой, возникла в наших умах уже очень давно. Что греха таить, мы слушаем электронную, не всегда богатую на инструменты, а порой и вовсе примитивную музыку, да и просмотр pc/amiga дем от некоторых команд типа MFX давно вызывает зависть к их фиксу под музыку. Но синк всегда был каким-то ускользающим, неосязаемым, но при этом сильно доставляющим компонентом, на который никогда не хватало времени при создании демы. Ведь как оно обычно бывает? Рисуется графика, придумываются эффекты, пишется музыка, затем кодер все это собирает в кучу. Да, обычно есть какой-то таймлайн-файл с описанием последовательности сцен, понятен порядок частей, примерно есть понимание, какая часть к какому фрагменту музыки подходит и после чего должна идти. Но этого ведь катастрофически мало для зрителя, структура 1 эффект – 4(8) паттернов уже давно стала минимальным стандартом, за пределы которого нет-нет да хочется выйти.

Конечно, отдельные, особо заметные музыкальные ходы нам удавалось иногда подчеркнуть визуальной составляющей, например, — пропадание изображения на эффекте с «гайками» в Machined. Не говоря уже о тривиальном моргании бордером и экраном под особо смачные кики в треке. Есть примеры и более проработанного фикса, не сомневаюсь, что вы вспомните эти четкие моменты в своих любимых демах (кстати, напишите об этом в комментариях!). Из последнего мне вспоминаются, прежде всего, работы DenisGrachev и sibCrew – когда тексты выводятся четко под музыку, либо вариации эффекта меняются в четких точках внутри 4-паттерновых блоков.
Что такое полная синхронизация мод музыку? Визуальные плагины винампа (олды здесь?) тоже вроде бы полностью синхронизированы с музыкой, но они основаны только на анализе звукового спектра. Казалось бы, на спектруме тоже можно анализировать звуковой поток, или даже ноты и эффекты в тексте трека, все же ведь написано музыкантом, привяжи только определенные эффекты к этим меткам и все само собой заработает.

Но не все так просто. Во-первых, в современных треках на ZX Spectrum уже не просто 3 канала. Умудренные опытом музыканты, каким, естественно, является n1k-o (не даром же все 3 демо на его музыку заняли 3 первых места на CAFe'2019?), умещают в 3 канала 4-5-6 слоев инструментов. Это с одной стороны. С другой стороны, каким образом можно придумать такие эффекты, чтобы наслаивать их 4-5-6 штук на стареньком ZX Spectrum одновременно? Ну пиксели и атрибуты – это 2 слоя. Ну черно-белые чанки 4x4 – там 2 слоя уже в кашу превратиться могут, если текстуру не очень удачно подобрать.

Во-вторых, если автоматически привязываться к тексту трека, то фикс всегда будет одинаковый. То есть на каждом одинаковом звуке будет одинаковый визуальный элемент. Это с одной стороны хорошо – задал набор эффектов и демо готово, с другой плохо — демо будет однообразным. Подобные эксперименты в жанре трекмо были и они даже довольно-таки круто выглядят с точки зрения ощущения синхронности, например, Laya by 3SC (даже название говорит нам о слоях). Что-то подобное я даже пытался сделать на бейсике в Zeitwerk. Но, каким образом выйти за пределы 1 сцены и формата мини-демо? И каким образом сделать при этом интересные цветные эффекты? Нам было не понятно.

GABBA и ABBA

Сложно вспомнить, каким образом мы дошли именно до gabber-музыки. Наверное, это всегда было в нас, еще с 90-х. Но каким-то образом в определенный момент мы решили, что мы хотим gabber-музыку в демо. Скорее всего, это было перед CC’2015, когда мы в очередной раз пытались сделать демо и выйти из затянувшегося перерыва после Aeon. Трек без аббовского вступления и концовки был написан n1k-o в августе 2015 года. Это был ремикс на “Me vs Myself” от Radium. Вот оригинал на youtube:



Демо мы тогда не сделали, и трек лег на полку. Понятное дело, что из обсуждения он не ушел, все нереализованные идеи то и дело всплывали в чатике на ирц. Во время одного из таких обсуждений и родилась идея шуточного интро, когда на экране демо начиналось бы с АББЫ, а потом переходило бы в габбер. Тогда же nodeus визуализировал эту идею в виде gif-intro:



Примерно в то же время был модифицирован и трек, в части добавления ABBA-intro, а чуть позже в 2016 году было добавлено и логичное ABBA-outro. Результат можно прослушать на soundcloud:



Но дальше процесс не сдвинулся, потому что никто так и не понял на тот момент, какие все же эффекты должны быть в демо на такую музыку. Тогда мы еще не созрели, т.к. мыслили исключительно старыми эффект-сценами как в Aeon, да и deMarche постоянно сбивали с толку своими блокбастерами, так и манили посоревноваться на их поле.

CAFe'2019

Идея демо окончательно выкристаллизовалась в конце августа – начале сентября 2019 года. Когда уже стало понятно, что мы точно едем на пати, а ехать на пати без демо – стыдно и грустно. Тем более, что ожидалось прям немало работ в демокомпо, по донесениям разведки чуть ли не более 10. А по листу регистрации на сайте CAFe'2019 уже было понятно, что русскоязычная демосцена выбрала это событие главным в 2019 году.

Наработок как таковых за 1,5 месяца до пати у нас практически не было, почти всё было использовано в Break Space, а новое — еще далеко от завершения. Мы понимали, что мы не сделаем с ходу 10-15 блокбастерных цветных частей, хотя бы половина из которых произведет на зрителя вау-эффект. В запасе были только лишь некоторые идеи различных демо, в том числе идея шуточного перехода ABBA-GABBA и, конечно же, давняя мечта сделать демо «про синк».

Годы обсуждений и острая необходимость сделали своё дело. Мы попробовали новый подход: чтобы сделать демо про синк мы практически полностью отказались от стандартных частей-эффектов, которые крутятся на экране минимум 4 паттерна. Если вы пересмотрите демо, то в нем нет ни одного эффекта на уровне прошлых tbk4d или deMarche. В конечном итоге на 100% нам это не удалось, в целом мы так и остались в рамках 4-паттерновой структуры трека и много мест, где визуальная часть не меняется целый паттерн, но об этом чуть позже.

На чем же тогда было строить демо? По первым прикидкам визуальная часть могла бы состоять только из следующего:
а) простые визуальные эффекты
б) анимации небольшого размера
в) возможно эффекты в чанках 8х8 (атрибутные)
г) текстовые месседжи
д) моргание экраном и бордером

Ничего другого просто не уместить на одном экране и не реализовать в сжатые сроки.

Простыми визуальными эффектами стали паттерновые эффекты. Их сотни раз делали в 90ые, правда всегда по одному и тому же принципу – один анимированный или статический паттерн заполнял экран, иногда паттерны скроллировались по 1-2 осям. У нас был опыт паттернового эффекта в Break Space. По началу у нас в запасе была только одна фреймовая паттерновая анимация edgetouch, которая была придумана для nodemo, но не вошла в него:



Все это не вызывало особого энтузиазма, т.к. не было понятно, сможем ли мы выжать хоть что-то интересное из паттернового принципа построения и мы попробовали вдохновиться гифками из интернета. Например:



Это натолкнуло нас на мысль, что подбор карты анимации паттернов может давать некие другие мета-эффекты, отличные от простой спирали из Break Space.

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



Ловким движением руки получается следующий эффект только лишь из-за разного направления и скорости анимации в столбцах:



В качестве анимационных секвенций было выбрано самое простое и действенное – силуэты людей, танцующих gabber. Далеко ходить было не надо, есть прекрасный ролик на youtube – Gabber Dance, в котором продемонстрированы практически все основные движения этого танца, да еще и на белом фоне (спасибо авторам!)



По части атрибутных вижуалсов за работу взялся G.D. , старый опытный Adobe Flash Ranger, автор таких хитов как Weed и detroYT, а так же части «Mondrian» в Break Space. Ручная оцифровка силуэтов и цветная анимация в начале демо – его рук дело:

Как, черт побери, синхронизироваться под конкретные фреймы?

А вот тут самое интересное. Не знаю, приходилось ли кому-то из читателей рисовать структуру музыкальных произведений, но, подозреваю, что кодеры, имевшие дело с фиксом эффектов не только под границы паттернов, меня поймут.

Что представляет собой трек на ZX Spectrum? Это последовательность паттернов. Обычно сгруппированных по 4, иногда по 2. Внутри каждого паттерна, как правило, 64 ноты. Найти внутри паттерна 1-2 характерных кика (звука ударных) или характерных кислотных звучка огибающей можно, погоняв паттерн туда-сюда в vortex tracker, пошаманив с отключением каналов и, в конце концов, точно определив под какую ноту и фрейм мы запустим событие в демо. Ситуацию когда вы «кодер-музыкант-демодизайнер» в одном флаконе, и можете проделывать такие трюки не напрягаясь, не рассматриваем, это частные случаи.

А теперь представьте, что надо описать ВСЕ точки внутри каждого паттерна. Буквально каждый инструмент, – в какой момент и КАК меняется его звучание. Вспоминаем, что у нас примерно до 6 слоев инструментов при этом, внутри 3 каналов. Я пробовал делать подобные вещи на слух с реальной музыкой. В принципе, для некоторых электронных треков с небольшим количеством инструментов, для меня, как для не музыканта, это возможно, т.к. есть более удобная, чем в VT перемотка, инструменты звучат четко и раздельно. Но только примерно по секундам, а не по фреймам. То есть дискретизация, во-первых, нужна более мелкая, а во-вторых — абсолютно точная.

Единственным решением, при этом самым простым и логичным, оказалось, конечно же, привлечь к этому процессу музыканта, написавшего сам трек на ZX Spectrum, т.к. никто лучше него не знает структуру трека и не читает ноты с листа. Окажись это старый трек неактивного музыканта – мы бы просто не смогли этого сделать. Но у нас был ремикс от Олежи. Поэтому процесс быстро завертелся. Это была отдельная работа музыканта, которая заняла несколько подходов в течение нескольких дней. Результат выглядел следующим образом:



После того, как мы увидели структуру музыки – мы просто выдохнули. Ведь когда ты слушаешь музыку – ты конечно слышишь некоторые ходы, повторы, характерные лупы. Но ты воспринимаешь произведение, прежде всего целиком. Немузыканту чтобы понять, что период кика в конкретном треке на протяжении всей основной части составляет 15 фреймов, состоящих из последовательности нот на скоростях 4-4-4-3 — необходимо проанализировать буквально весь трек, при этом еще контролируя, где там кик, а где не кик. Автору трека-же это понятно изначально. А как посчитать количество и структуру узоров изменения кислотной огибающей (под которую, надо сказать, в результате и была засинхронизирована смена паттерновых эффектов), если ты не музыкант? Не реально. Поэтому полная раскладка трека по слоям и инструментам — это реальный клондайк для выстраивания синхронизации.

Проблема контента

За пару недель до дэдлайна с нашими скоростями генерации вижуалсов и превращения их в код нам стало понятно, что мы НЕ УСПЕВАЕМ. То есть, у нас на ZX Spectrum к этому моменту была почти готова 1 минута демо, включавшая интро с ABBA и раскачку трека на протяжении 12 паттернов, но мы и это не вывозили. Дальше был тупик. Таким темпами мы могли сделать только 2 минуты демо, и в рядах команды начали возникать упаднические идеи типа «давайте порежем трек». К слову сказать, в пати-версии демо, трек остался неизменным с момента его написания в 2015-2016 гг., а длится он 4 минуты.

В запасе по контенту были еще танцующие мужики, но они были совсем простые: только силуэты на белом фоне. Был текст и было понимание, что на мужиках можно что-то попробовать изобразить атрибутами.
Проблему контента придумали решать клиповой нарезкой. Это такой метод резкого перехода между сценами, противоречащий всем правилам киномонтажа, и при этом перегружающий восприятие зрителя. Расчехлив видеоредактор мы попробовали быстро чередовать картинки с частотой 2-3 фрейма под имеющуюся музыку. Это сработало. В результате они конечно чередуются не так быстро, скорее через 5-7-8 фреймов, но очевидно, что прием надо было расширять и углублять.

Для нашей задумки идеально было бы сделать так, чтобы визуальные эффекты не повторялись вообще. Но наша креативность, как и память ZX Spectrum, закончились примерно в один и тот же момент. Поскольку менять эффекты на экране надо практически мгновенно, то времени на их распаковку нет иногда ни одного фрейма. Подробнее об этом в своей статье ещё напишет sq . Оставалось придумать, каким же образом мы осуществим свою давнюю мечту – нормально займемся монтажом демо под музыку.

Шараж-монтаж

Голубой мечтой каждого демодизайнера на ZX Spectrum является конечно же демотул, в котором возможно компоновать эффекты демо на визуальном таймлайне. Мы никогда не оставляли попыток вообразить, как бы это могло выглядеть, сперва на спектруме, затем на high-end платформах. Каждый раз мы натыкались на непомерную сложность реализации. Какие-то простые вещи появлялись — паковщики анимации, запилятор (и исчезали), но все это не приносило удовлетворения. Интуитивно мы догадывались, что никто и никогда не сделает общий демотул для ZX Spectrum. Но одна возможность использовать современные инструменты для монтажа демо ZX Spectrum все же есть — это видеоредакторы.

На помощь пришли буржуйские технологии. Тут надо сказать, что 1 или 2 раза в прошлом уже у нас были попытки грубого прототипирования демо в Pinnacle Studio для iOS. Но бесплатная его версия умеет только в 30 FPS, а платная хоть и декларирует выбор FPS, но по факту не дает его сделать. Как оказалось, авторы Pinnacle Studio уже давно забросили этот проект и сделали новый — видеоредактор Luma Fusion (так же для iOS). Он поддерживает широкий спектр aspect ratio, включая конечно же 4:3, большой набор разных фреймрейтов, включая столь необходимые нам 50 FPS, импорт музыки, статических картинок и почти любого видео. Конечно в нем есть еще сотни разных возможностей (не даром он позиционируется как профессиональный), но нам достаточно было уже и того, что видео в нем можно легко резать и компоновать с дискретностью в 1 спектрумовский фрейм и тут же видеть результат. Выглядело это примерно вот так:



Но и тут есть некоторые подводные камни. Расхождения в схемотехнике клонов ZX Spectrum, Vortex Tracker, mp3-сжатие и нарезка трека на фрагменты могут сыграть злую шутку в процессе видеомонтажа, которая уже вышла нам боком при фиксе в «Mondrian». А именно – частоты пентагона, оригинального ZX Spectrum, частоты звукового чипа – они разные, и надо внимательно следить, какой длительности музыка на выходе при экспорте из аудиоредактора и какую длительность она имеет в фреймах при загрузке в видеоредактор.

На ZX Spectrum в процессе работы над демо мы имеем дело с фреймовой дискретизацией в 1/50 секунды, а в wav и mp3 длительность дискретизируется немного по-другому. Пример: mp3 файлы после сжатия кодеком lame отличаются по длительности на несколько фреймов, поэтому использовать можно только WAV. Аналогично, сохранение блоков трека по 4 паттерна даже в WAV дает погрешность в 2 фрейма по сравнению с длительностью этих же 4 паттернов внутри цельного трека. Соответственно работать с отдельными частями возможно, что мы и делали, собирая общее демо из отдельных фрагментов видео длиной в 1 паттерн, но надо контролировать фреймовую длительность каждой части вручную.

Но вернемся к Luma Fusion. На момент ввода его в бой уже была неделя пати. Вторник ушел на оцифровку и нарезку уже имеющихся вижуалсов. Среда ушла на фикс в видеоредакторе. При этом вижуалсы еще допридумывались на ходу и в ход шло уже всё, что было, любые черновые наброски и неудачные дубли. Вариативность визуальных элементов стала чуть ли не важнее их качества. К вечеру среды благодаря тестовому рендеру в видеоредакторе мы знали, как должно выглядеть демо еще даже не собрав его. Впервые за наверное 20-25 лет демомейкинга мы работали с фиксом напрямую, не пересобирая и не перематывая демо каждый раз, когда нам надо подвинуть вспышку на 2 фрейма в предпоследней части.

Последние штрихи

В четверг вечером мы с Rollerbob’ом уже сели в поезд. При этом у нас не было даже понимания, что можно показывать на танцующих мужиках. Какие-то идеи мы нагенерировали ночью в поезде, тыкая в видеоредактор, остальные записали на бумажке.

Вот так выглядело демо в видеоредакторе на этот момент (сейчас я лишь добавил disclaimer и watermark при загрузке на youtube), до 1:10 это оцифровка 4-паттерновых кусков демо, затем уже монтажная склейка в LumaFusion:



Пятница, ночь с пятницы на субботу и вся суббота ушли на то чтобы реализовать почти все, что было набросано в видеоредакторе и зафиксировано на бумаге. При этом вручную осуществлялся перенос списка событий из видеоредактора в excel для того чтобы кодер мог преобразовать это в демоскрипт. Об экспорте и парсинге формата проекта видеоредактора даже никто не заикался.

Последние билды были доделаны уже после дэдлайна – в зале пати, во время показа других компо — бегающие за силуэтом атрибуты и атрибутные полоски в буквальном смысле по кадрам мы рисовали и скриптовали во время показа графики и музыки, рисуя и считая кадры прямо на бумажке:



И зрители увидели GABBA, можно сказать, с пылу с жару, только что снятую с нашей креативной печи — последний билд загружен был загружен на events уже практически в ночи.

К сожалению, при показе был рассинхрон между изображением на проекторе и звуком в колонках, по ощущениям он составлял примерно 4-5 или около того фреймов. То есть фикс в буквальном смысле был сбит, острота восприятия смазана, зрителю только оставалось подсознательно додумывать «о, кажется тут есть буквальная синхронизация». Но это тоже опыт, как для нас, так и для организаторов. Избежать подобного можно как подстройкой синхронизации в самом демо, подобно тому, как в 90х перед началом демо подстраивали мультиколор по бордеру, так и специальным оборудованием, регулирующем задержку звука по сравнению с тем, что выдается на экран.

Благодарности

Организаторам CAFe'2019 за все пати и возможность показать нашу работу на большом экране.
nodeus за идею и визуализацию интро.
G.D. за его безбашенные анимации и идеи.
sq за терпение и за то, что вывез всё это закодировать.
n1k-o за музыку и помощь в её понимании.
psndcj , bfox , kowalski за помощь с кодом, паковкой музыки и отдельными частями демо.
Всем зрителям (особенно wbcbz7 !).
Всем, кто поддерживает нас фидбеком на pouet.net и других ресурсах.
Мы сделали это демо прежде всего для вас, для того чтобы вы могли увидеть его именно на пати и во время пати.