Почему дизайнеру в 21 веке нужно быть немножко программистом?
Генеративный дизайн (или procedural design) подкрался очень исподволь, и методы, которые раньше были только во власти программистов, сейчас активно используются художниками, медиа-художниками, дизайнерами. В материале мы рассмотрим, где можно использовать генеративный дизайн, какие существуют принципы работы с ним, и поделимся полезными ссылками на сайты и литературу. Поговорим об основных направлениях, в которых используются принципы генеративного дизайна: динамические логотипы, новые медиа, стилизованные иллюстрации. Об этих темах мы поговорим чуть подробнее.
Области применения
Динамическая айдентика
Хороший пример динамического логотипа — логотип лаборатории Массачусетского технологического университета. Там как раз исследуют методы генеративного дизайна в программировании, дизайне, искусстве. Если вы когда-либо занимались web-дизайном, то наверняка сейчас вспомнили про адаптивный дизайн, который стал моден в последние годы в связи с распространением устройств совершенно разных форматов: стационарных компьютеров, планшетов, смартфонов и т.д. Адаптивная верстка — один из примеров генеративного дизайна, когда контент подстраивается под форму.
Стилизация фотографий
Вероятно, вы встречали подобного типа изображения в русском Esquire. Здесь методом триангуляции было сгенерировано изображение. По ссылке — сайт, где вы можете загрузить свое фото и получить собственный стилизованный портрет. А здесь вы можете найти специальный плагин для Adobe Illustrator, который позволяет использовать генеративный подход в дизайне. Там написано сейчас порядка 60 скриптов, которые позволяют использовать подобные стилизации в своей работе, не обладая при этом навыками программиста.
Создание объектов и уровней для компьютерных игр
Идея заключается в следующем. Есть растровая карта, которая определяет уровень будущей игры. Происходит заселение объектами — деревьями, зданиями, дорогами, которые по заданным алгоритмам выбирают, где им оказаться. Этот пример хорошо иллюстрирует принцип работы генеративного дизайна: на основе простых данных строятся более глубокие и сложные — леса, города, популяции. Количество усилий, чтобы вручную “посадить” каждое дерево или поместить здание — титаническое, количество переделок также стремится к бесконечности в реальном производстве. Поэтому любой способ ускорения — очень приветствуется.
Ассеты для кино и анимации
Мы часто сталкиваемся с такой проблемой: режиссеры в процессе работы сильно видоизменяют модель. Усилие, которое нужно потратить на переделку будет, как вы можете догадаться, очень значительное. Сейчас для кино и анимации используют подход генеративного дизайна для создания цифровых ассетов, когда на основе модели с помощью кода создается живая модель, которую можно переделывать и видоизменять. Примечательно, что создатель генеративной (или сейчас часто говорят процедурной) модели зачастую сам даже не представляет, сколько моделей можно создать с помощью его ассетов.
Анимация сделана в Cinema 4D. Исходник вы можете скачать здесь.
Инфографика
Примером генеративного дизайна также могут быть разнообразные способы визуализации данных. В результате визуализации мы можем получить из сырых данных — некоторое знание. Необычные способы визуализации часто могут подталкивать к раскрытию гипотез, их проверке и, как следствие, — открытию новых фактов.
Шрифты
Несмотря на аналитическую природу шрифта, каждый вариант глифа (рисунка символа) раньше отрисовывался вручную. И по-прежнему отрисовывается так и сейчас. Слишком велико коммуникативное значение шрифта, и права на ошибку у шрифтового дизайнера в дизайне глифа нет. Но начинает появляться новое поколение шрифтов, variable fonts. Толщина штриха, наклон не имеют фиксированных значений, вместо фиксированных нескольких вариантов можно выбирать собственные промежуточные.
Стандарт был предложен совсем недавно, в 2018 году, и полноценной поддержки его пока нет. Но уже сейчас появилась поддержка vairables fonts в After Effects с помощью плагина VairiFont.
Интересно, что еще в 2013 году был предложен экспериментальный проект prototypo.io, который предвосхитил возможности стандарта Variable Fonts, но сильно превосходит новый стандарт по возможностям. Однако эксперимент так и остался экспериментом.
Моушн-дизайн
Нельзя обойти стороной моушн-дизайн при разговоре о генеративе. Это создание всевозможных движущихся фигур.Он уже стал целой традицией для моушна. В Cinema 4D есть специальный объект, клонер, и он тиражирует заданные примитивы вдоль кривой. То есть, мы можем поменять форму этой кривой, можем отредактировать данный объект, расстояние между элементами, скорость, и у нас поменяется количество элементов, их распределение. Сайты и новые медиа, любые технологии, связанные с маппингом, особенно интерактивным.
Технологии
Единого пакета, в котором можно было бы делать генеративный дизайн нет. Подойдет любая среда с возможностью программирования, отображения данных, но тем не менее стоит отметить некоторые вещи с их плюсами и минусами. Традиционно много книг, посвященных генеративному дизайну, написаны о таком языке программирования, как Processing. Он открытый и бесплатный, это не собственность корпорациий, диктующих свои правила для лицензирования. И он достаточно простой для изучения.
Технологии vvvv/puredata — создание интерактивных приложений, часто используются для VJ, маппинга.
Houdini (традиционно используется в кино), touchdesigner (маппинг) — достаточно дорогие системы, со своей логикой. Некоторые студии их очень любят в силу гибкости первого и удобства подключения к любому оборудованию второго.
Для Illustrator есть подключаемый пакет — scriptographer, который позволяет писать разные генеративные программы.
В After Effects есть много полезного: скрипты, программирование, expressions. Они позволяют делать все, что угодно. Это отличное расширение обычной анимации, в данном случае — в сторону генеративной.
Как ни странно, InDesign. Есть несколько программ, которые позволяют генеративно создавать верстку в книге.
Ну и Web в целом построен на генеративе, тут используются такие технологии, как Flash, JavaScript, WebGL.
Если вы никогда не пробовали себя в генеративе — советуем вам начать с Processing, как с самого простого для написания графических приложений. И попробуйте expressions в After Effects — там представлено достаточно тривиальное программирование, но при этом несколькими строчками можно сделать сложные программы.