Генеративная графика в брендинге
Графический дизайнер Nimax Ника Торопцова делится своим опытом создания генеративной графики: как из экспериментов с TouchDesigner перейти к разработке айдентики международных брендов.
Генеративный подход в айдентике стал следующим шагом после появления и активного развития динамического брендинга: более вариативного и пластичного.
В основе генеративного дизайна лежат алгоритмы, результаты которых могут быть рандомными, сгенерированными частично или созданными управляемым потоком конкретных данных.
Генеративы могут быть реализованы разными инструментами, например:
- языками программирования изображений и анимации, как Processing;
- системами библиотек для креативного программирования типа p5.js, OpenFrameWorks и Cinder;
- программами для создания генеративной графики: Touchdesigner, VVVV, Max/MSP;
- скриптами в привычных для дизайнеров программах: Adobe Illustrator или Cinema 4D;
- нейросетями, например, генеративно-состязательной сетью StyleGan.
Порог вхождения в каждый инструмент может быть разным: от уверенного знания программирования до понимания базовой логики скриптов и их применения в софте.
Что такое TouchDesigner
TouchDesigner — редактор интерактивных сред и визуальный язык программирования от компании Derivative, который предназначен для работы с интерактивными медиа в реальном времени (часть его разработчиков — авторы софта Houdini).
Возможности TouchDesigner позволяют создавать собственный пользовательский интерфейс, работать с визуализацией звука, лазерами и LED-панелями, 3D-графикой, генерацией изображений, подключать OSC и DMX-протоколы, управлять сценическим оборудованием, интегрировать Microsoft Kinect, нейросети и даже управлять промышленными роботами.
Рабочая среда TouchDesigner строится на визуальном программировании. Его принципы не отличаются от привычного текстового формата. Но в визуальном инструкции и связи в программе определяются через графический пользовательский интерфейс. Вместо ввода текста создается цепочка из готовых узлов (чаще их называют нодами).
Такой же принцип используется, например, в Houdini или в модуле Xpresso для Cinema 4D. Итоговую систему нодов с конечным результатом называют патчем.
На примере нескольких кейсов в режиме making of рассмотрим, как с помощью TouchDesigner можно решить технические и концептуальные задачи брендинга.
Кейс №1. Undatify. Генератив как эксперимент
Undatify — проект инновационного хаба «Лаборатории Касперского». Он помогает людям узнать, какие персональные данные хранят частные компании, и, если нужно, удалить их.
Наша задача — создать для сервиса понятный и привлекательный фирменный стиль, который будет транслировать образ защитника частной жизни пользователя. Основным визуальным образом стал буквенный паттерн, который состоит из названий мест, где могут храниться данные пользователей.
В развитии айдентики буквенные паттерны образовывали портреты людей, которые «стирал» логотип Undatify.
Первый приём сделали с помощью плагина для Adobe Illustrator. Но для кейса проекта подумали, что круто попробовать реализовать подход в динамике. Тем более одним из потенциальных носителей был сайт компании Undatify.
Уже несколько лет я периодически изучаю разные интерактивные инструменты в медиа-лабораториях и на онлайн-курсах. Изначально эксперименты в TouchDesigner были просто моим увлечением. Но сейчас применяю навыки работы с генеративом в клиентских проектах.
В качестве эксперимента для проекта Undatify решили попробовать TouchDesigner, так как у меня были в нём наработки с похожим принципом реализации.
Процесс
После анализа исходного изображения, собрали в TouchDesigner основу для генератива на примере подхода из Adobe Illustrator.
Один из возможных способов: представить паттерн как сетку, где каждый квадрат — материал с отдельной буквой.
Чтобы буквы на квадратах последовательно сложились в слова, ими управляет выражение на языке Python.
Размер букв паттерна зависит от уровня освещенности участков исходного изображения. В TouchDesigner есть специальный способ управления геометрией: в данном случае числовые значения цвета задают параметры каждого квадрата. Чем светлее участок, тем меньше размер буквы. Чем темнее — тем больше.
Затем все перенесли на айдентику. Вместо абстрактной картинки в основе — портреты. Подключили на вход видео или фото, обесцветили, добавили контрастности. Поменяли черно-белые настройки на фирменные цвета.
Так как процесс в TouchDesigner идёт в реальном времени, появилась идея добавить в патч интерактива. Вместо отснятых видео в качестве источника изображения подключили ноду вебкамеры. Появилась возможность оцифровать себя прямо здесь и сейчас.
Преимущество TouchDesigner — в его потенциале для реализации нетривиальных носителей: интерактивных стендов и инсталляций для мероприятий. Можно вовлекать посетителей как с помощью простых средств вроде веб-камеры, так и сложными техниками.
Например, Microsoft Kinect, синхронизацией с мобильным приложением и другими технологиями.
Кейс №2. ГК «Морская геодезия». Генератив как основа концепции
Группа компаний «Морская геодезия» занимается изучением морских глубин, инженерными работами и поставками оборудования. Наша задача — обновить айдентику, сохранить связь с существующим фирменным стилем и запустить удобный современный сайт, который будет транслировать ценности компании.
«Морская геодезия» — это романтика морских работ, передовые технологии и тяжелый труд людей в море. В основе концепции — идея взаимодействия природы, техники и человека.
Генеративная графика лучше всего подходила для выражения основной мысли: с одной стороны как технологичный приём для основы айдентики, с другой — нечто стихийное и изменчивое, как море.
Процесс
Числовые параметры, которые управляли генеративом, помогли связать подход с отраслью по смыслу. Для них рассматривали разные типы данных: от погодных явлений до показателей различных приборов. Потом появилась идея использовать что-то эмоциональное, и в качестве источника данных использовали звуки моря, ветра, китов и сонара.
За визуальную основу взяли систему частиц, которую оптимизировали с помощью языка программирования GLSL. Код помог меньше нагружать компьютер и позволил быстро обрабатывать большое количество объектов в сцене.
Референсом для визуального подхода стала графика показателей приборов, которые компания использует в работе.
Их преобразовали в систему частиц — основу для генератива.
Сетап преобразовывался в три визуальных мотива: карта глубин, морская волна и штормовой ветер. Частично рисунок генеративов был задан постоянными параметрами.
Для дополнительной динамики скоростью и геометрией управляют числовые параметры, которые были преобразованы из частот звукового сигнала.
Играем с приёмом синестезии — взаимосвязи звука и изображения, которые формируют особый опыт взаимодействия.
Кейс «Морской геодезии»раскрывает возможности генеративной графики для нестандартных идей: реализовывать концепции не только с помощью визуальных метафор, но и через звук, показания приборов и другие потоки данных.
Кейс №3. Softline computers. Генератив как развитие концепции
Softline computers оказывает услуги по индивидуальной сборке компьютеров, серверов, систем хранения данных. Входит в ГК Softline — одну из пяти крупнейших российских международных IT-компаний.
Перед нами стояла задача обновить платформу бренда, фирменный стиль и дизайн сайта в соответствии с новым позиционированием. Подробнее о кейсе рассказали в этой статье.
При работе над концепцией генератив стал инструментом, который поддержал эмоциональную сторону ключевого образа — сетки. А так же стал ярким идентификатором для B2C-аудитории компании — геймеров.
Процесс
Формообразующей основой для генератива стала модульная сетка, по которой строились основные элементы фирменного стиля. Мы изменили угол обзора с помощью камеры, чтобы изображение стало объёмным и динамичным.
TouchDesigner позволяет работать как с плоской, так и с объёмной графикой: экспортировать из разных 3D-форматов, настраивать рендер и создавать геометрические примитивы.
По сетке располагаются параллелепипеды. Их высота зависит от цветовой насыщенности изображения, которое подаётся на основную ноду.
Этот приём уже рассмотрели в первом кейсе, где геометрией также управляли цветовые данные изображения. В данном случае задействовали другую ось координат и ракурс — так изображение переходит из плоскости в объём.
В качестве основы для такого генератива может быть любое подходящее изображение. Абстрактный подход разбавили фигуративным. Кроме эмоциональных цветных переходов добавили и отраслевые изображения: видеокарты, процессоры, микросхемы.
В качестве дополнительного приёма можно подключить аудио — оно будет управлять параметрами цвета, которые связаны с высотой параллелепипедов. Изображение станет аудиореактивным и подойдет для рекламных видео, где есть аудиодорожка.
Такой приём напоминает Mograph в Cinema 4D. Но по скорости обработки в TouchDesigner он более оперативный и позволяет быстро заменять и генерировать новые изображения в реальном времени.
Генеративный дизайн открывает возможности внедрения интерактивных технологий и помогает расширить набор приёмов при работе с айдентикой:
- создать нетривиальные носители бренда, вроде интерактивных стендов или проекций для мероприятий и презентаций;
- применять генератив как смысловую основу фирменного стиля. Такой приём позволяет подойти к разработке концепции с необычного угла, например, взять звук в качестве формообразующего элемента визуальной системы;
- использовать генератив как дополнительный визуальный приём, который обладает рядом преимуществ: скоростью генерации, высокой вариативностью, возможностью внедрять интерактив в веб (webGL) и другими;
- создавать множество элементов в рамках общей визуальной концепции бренда. С таким подходом работа с носителями становится более гибкой: при изменении параметров можно получить новый результат в рамках единого стиля.
Помимо этих преимуществ работа с генеративной графикой может стать интересным опытом и возможностью приобрести новые навыки. А ещё посмотреть на свою работу с необычной стороны и получить много любопытных результатов в ходе экспериментов.
Подборка ресурсов для вдохновения и знакомства с генеративным дизайном:
OpenProcessing.org — примеры скетчей на языке Processing;
DevArt — обширный сборник генеративных примеров, созданных с помощью разных технологий;
Derivative.ca — обзор проектов, которые разработали с помощью Touchdesigner;
Math Chaos Patterns — генерация изображений на основе нескольких математических моделей, доступная для скачивания и изучения.
Самое прекрасное в статье, как авторы пытаются натянуть на специфический технический прием глубинные смыслы, все эти
изменчивые моря, поддерживающие эмоциональную сторону сетей. Ну, как если бы у художника была кисть в форме зайчика, и в одном проекте этот зайчик символизировал бы собой свободу от условностей, в другом — скорость, в третьем — детство.
Но ведь вы даже сами не верите в эту чушь. Тогда зачем натягивать ее на глобус? Генеративка клево, MSP мое почтение, при чем здесь яркие идентификаторы для b2b компании? Это ПРОСТО инструмент, в нем нет собственных смыслов. Тем более, в генеративном арте. Он же, блин, генеративный, в этом вся суть.
Не вижу в нашем разборе никаких глубинных и притянутых смыслов, все идеи достаточно понятные и лежат на поверхности. К тому же это просто один из примеров, инструмент можно использовать по-разному. прикладные задачи в примерах так же есть. Насчет зайчика это вы точно подметили, в метафорах примерно так все и работает
А мне статья понравилась.
Кейсы интересные, и подача смысла, как по мне, не притянута за уши.
Он же, блин, генеративный, в этом вся суть.Конечно, можно нагенерить каких-нибудь фракталов или полный психодел, но в статье не об этом.
Солидарен, в последнее время простые вещи начинают усложнять и всё фаршировать соусом англицизмов. Сама техника и работы отличные, Nimax давно немного дальше других студий. Только так и не понял, какие задачи решает такой визуал? И понятное дело коммуникация в стилистике генеративка только для мультимедиа — проекторы, тв и прочее железо.
Даже и не думал тогда что в итоге этот инструмент так сможешь применять. Пушка 🚀 Статья отличная) +
В инструментах нашёл незнакомый для себя p5.js, список 3D софта, помимо Cinema 4D, конечно же шире. Стоит отметить Blender хотя бы потому, что он бесплатный и на него есть куча туторов и плагинов.
Так как процесс в TouchDesigner идёт в реальном времени, появилась идея добавить в патч интерактива.Всё же весь этот интерактив ограничился процессом создания.. описаны техники и приемы в контексте создания видео, как конечного продукта.
Ваш подход положить бы на что посерьёзнее, типа GLSL (shadertoy.com) или запихнуть прямо в WebGL (threejs.org).
Или прикрутить на какой-нибудь user input. На Geek Picnic 2021 были интересные стенды с генеративом по датчикам приближения, созданию сновидений по распознанным рисункам и т.п.
Да, вы правы, список шире в целом по всем пунктам. В примеры тут попало либо то, что использовала сама, либо с чем сталкивалась косвенно. Надеемся в будущем реализовать что-то более навороченное, тк эксперименты будем продолжать)