Техника генеративных FUI
Оригинал статьи на Medium
Что такое FUI?
Для тех, кто не знает, FUI чаще всего расшифровывается как футуристический пользовательский интерфейс (future user interface) или фантастический пользовательский интерфейс (fiction user interface), но есть и другие варианты. Обычно FUI используется в фильмах или видеоиграх для создания hi-tech образов или усиления визуального повествования. Есть производственные компании, которые полностью специализируются на разработке подобных вещей. Перейдем к сути.
Что я хотел сделать?
Идея и концепция заключались в том, чтобы провести несколько экспериментов и попытаться создать простой и легкий в настройке инструмент для генерирования абстрактных визуально сложных конструкций из нескольких готовых фигур.
Давайте начнем
Я использовал Adobe Illustrator для создания этих основных элементов.
Затем я использовал After Effects и плагин Trapcode Particular. Используя эти формы в качестве спрайтов, появляющихся в flat box emitter, мы получаем что-то вроде этого:
Добавляем два зеркала.
Вы поняли идею, верно? Увеличиваем плотность, добавляя больше зеркал.
Это отчасти излишне, но может использоваться в качестве bump maps и displacement maps.
Та же самая техника может быть применена к округлым формам или сегментам с общим центром, но вместо box emitter мы используем точку.
Или тонкие длинные элементы для создания плоских, линейных композиций.
Для сеток можно использовать плагин Trapcode Form и очень простые спрайты, такие как точки, крестики, ромбы, числа и т. д.
Кастомные UV-плоскости
Теперь, когда мы закончили с частицами и зеркалами, пришло время для более сложных вещей. Я не буду здесь углубляться в объяснения того, что такое UV-mapping, надеюсь, что вы понимаете основные принципы.
Во-первых, нам нужно перейти в 32-битный цветовой режим (для более точных значений с плавающей запятой каждого пикселя) и сделать простую плоскую UV-карту, добавив красный горизонтальный градиент к зеленому вертикальному градиенту. Сглаживание градиента должна быть установлена на 0, для линейного распределения значений. Затем нужно сделать одинаковые значения красного от 20% до 40% местоположения на градиенте. Вот так.
После этого мы используем плагин PixMap на этой карте, а для текстур применяем то, что мы сгенерировали ранее.
Также можно использовать UV-карту, созданную путем добавления зеленого углового градиента к красному радиальному градиенту. После чего применить карту для текстуры тонкой линейной композиции, которую мы создали ранее, чтобы обернуть ее в круг. Этот трюк может сделать ваш рабочий процесс намного быстрее, чем создавать круговые композиции вручную.
Mesh mapping
Используя Videocopilot Element 3D, мы можем отобразить ранее созданные текстуры на цилиндрах и других сетках.
Применив текстуры к маске лица в SparkAR, можно добиться интересного результата.
Добавление движения
Установив скорость нашим частицам, мы получим движение и глубину.
Используя карты displacement и evolving vertical noise, мы можем получить интересные, более «органичные» результаты.
Добавление цвета
Помимо раскрашивания вручную при композитинге, мы можем установить цвет частиц на прямую (color over life) или использовать произвольный цветовой слайдер (random color slider) в плагине Particular. Добавив немного свечения, мы можем получить психоделический неоновый материал.
Резюме
Комбинируя эти приемы, вы можете применять данную технику во многих случаях и не только в After Effects, но и с любым программным обеспечением, которое имеет системы частиц, зеркала и UV-карты (Unreal Engine, Touchdesigner, Houdini и т. д.). Она может использоваться в качестве автоматизированного инструмент для поиска форм и композиций, создания прототипов или получения идей и вдохновения. Также эта техника может быть основой для создания ассетов игрового или кинематографичного VFX с менее повествовательным и более абстрактным эстетическим подходом к FUI, в аудиореактивных виджей сетапах, музыкальных видео, AR-масках для лиц и т. д.
Надеюсь, вы найдете этот материал полезным.
Статья написана Sasha Martinsen
Подписывайтесь на нас в Facebook, Telegram, Vkontakte, Pinterest.