Техника генеративных FUI

Оригинал статьи на Medium.

Техника генеративных FUI

Что такое FUI?

Для тех, кто не знает, FUI чаще всего расшифровывается как футуристический пользовательский интерфейс (future user interface) или фантастический пользовательский интерфейс (fiction user interface), но есть и другие варианты. Обычно FUI используется в фильмах или видеоиграх для создания hi-tech образов или усиления визуального повествования. Есть производственные компании, которые полностью специализируются на разработке подобных вещей. Перейдем к сути.

Техника генеративных FUI

Что я хотел сделать?

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

Давайте начнем

Я использовал Adobe Illustrator для создания этих основных элементов.

Техника генеративных FUI

Затем я использовал After Effects и плагин Trapcode Particular. Используя эти формы в качестве спрайтов, появляющихся в flat box emitter, мы получаем что-то вроде этого:

Добавляем два зеркала.

Вы поняли идею, верно? Увеличиваем плотность, добавляя больше зеркал.

Это отчасти излишне, но может использоваться в качестве bump maps и displacement maps.

Та же самая техника может быть применена к округлым формам или сегментам с общим центром, но вместо box emitter мы используем точку.

Или тонкие длинные элементы для создания плоских, линейных композиций.

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

Кастомные UV-плоскости

Теперь, когда мы закончили с частицами и зеркалами, пришло время для более сложных вещей. Я не буду здесь углубляться в объяснения того, что такое UV-mapping, надеюсь, что вы понимаете основные принципы.

Во-первых, нам нужно перейти в 32-битный цветовой режим (для более точных значений с плавающей запятой каждого пикселя) и сделать простую плоскую UV-карту, добавив красный горизонтальный градиент к зеленому вертикальному градиенту. Сглаживание градиента должна быть установлена на 0, для линейного распределения значений. Затем нужно сделать одинаковые значения красного от 20% до 40% местоположения на градиенте. Вот так.

Техника генеративных FUI

После этого мы используем плагин 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

Если вам понравилась тема статьи, вы также можете прочитать об FUI в киновселенной Marvel

Подписывайтесь на нас в Facebook, Telegram, Vkontakte, Pinterest.

196196
24 комментария
13
Ответить

Комментарий недоступен

2
Ответить

Когда работаешь над реальными интерфейсами, FUI вызывает дикий тупак в духе "что ты такое, как мне понять тебя?". Но визуально и тем более в анимации это выглядит круто

8
Ответить

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

7
Ответить

Пиздец, да ты крут! Никогда не понимал почему никто не сделает такую ось или надстройку для неё

6
Ответить

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

7
Ответить