Публикации и ответы на комментарии в блогах JetBrains не выходят на русском языке с 2022 года.
Приносим извинения за неудобства.
Генерация тайловой графики: когда дизайнеры и алгоритм работают вместе
Прошло пять лет, с тех пор как мы впервые начали использовать вычислительные технологии для создания фирменной графики JetBrains. Поначалу энтузиасты такого подхода к созданию графики работали в разных командах, но в итоге объединились в команду под названием Computational Arts Initiative (Инициатива вычислительного искусства), и с этого момента генерация графики стала неотъемлемой частью наших дизайн-процессов. Мы работали с разными алгоритмами и технологиями, экспериментировали с созвездиями частиц, жидкими метасферами, пробовали диаграммы Вороного и нейронные сети.
В этом году мы разработали новый генератор графики, который называется Tiler (в переводе с английского — «паркетчик» или «плиточник»). Как можно догадаться по названию, он «кладет паркет» — создает матрицу — из случайно распределенных плиток (тайлов). Из них формируется рисунок, который никогда не повторяется при перезагрузке страницы.
В Tiler все тайлы сгруппированы в наборы (тайлсеты) по стилю и формам. Эти тайлсеты были разработаны вручную нашими графическими дизайнерами. Мы пошли на эксперимент и применили подход, в котором творчество художника сочетается с вычислительным алгоритмом паркетирования. Было интересно наблюдать, как код превращает отдельные монохромные тайлы в цельное и выразительное произведение цифрового искусства. В то же время каждый тайлсет отражает художественное видение человека, который его создал: одни тайлы содержат множество геометрических элементов, другие — минималистичны, третьи состоят преимущественно из органических криволинейных форм.
В интерфейсе Tiler на панели Tile можно выбирать и пробовать разные тайлсеты, ограничивать разнообразие тайлов с помощью параметра Randomness, перетасовывать их на артборде или обновлять тайлы в выбранном тайлсете.
Гиперпространство (тайлсет Benjamin)
Цвет
Как видно, форма тайла никак не связана с его цветом, при этом за окрашивание отвечают два разных алгоритма. По умолчанию каждый тайл заливается независимо от цвета соседних тайлов. Здесь мы просто назначили каждому тайлу случайный цвет и больше ничего не меняли. Но если вам нужно больше градаций цвета, можно выбрать параметр Randomness и включить градиентную заливку (Gradient). В этой функции для получения изящных цветовых переходов используется алгоритм «шум Перлина». Кроме того, с помощью параметра Gradient size можно изменить размер и масштаб градиентного узора, сделав его более зернистым.
Ризома (тайлсет Deleuze)
Хотите еще больше цвета? Зайдите в раздел Color и выберите один из трех доступных цветов, чтобы изменить фон. С помощью параметров Mix и Base color также можно регулировать его насыщенность и яркость.
Закат (тайлсет Gombrich)
Размер
Многое зависит не только от цвета, но и от размера тайла, за счет которого можно до неузнаваемости преобразить рисунок. В панели Sizes можно менять размер тайла (Cell), а также масштабировать его внутренние фигуры (Shape). Попробуйте их увеличить — результат может вас удивить!
Летнее цветение (тайлсет Lem)
Изменение отдельных тайлов
Параметры, о которых речь шла выше, затрагивают все тайлы в мозаике. Но что если вам захочется изменить только один конкретный тайл? Никаких проблем: просто нажмите на нужный тайл на артборде. По умолчанию (активен параметр Modify tile) он заменится на другой из того же тайлсета. Продолжая на него нажимать, можно перебрать все варианты тайлов данного тайлсета, после чего вы вернетесь к исходному тайлу и перебор начнется заново. Кроме того, на панели Click action вы можете изменить действие, которое будет происходить при нажатии на тайл, при помощи параметров Rotate и Change opacity. В итоге после нажатия на тайл он будет поворачиваться или станет прозрачнее.
Торжество (тайлсет Stephenson)
Сохранение рисунка
Создав свое произведение искусства, вы наверняка захотите его сохранить. Когда все готово, нажмите Make URL. При этом сохранятся все ваши текущие пресеты, а в адресной строке отобразится URL-адрес вашего рисунка. Теперь, если открыть эту ссылку в другой вкладке, Tiler в точности воспроизведет созданный вами рисунок.
С помощью кнопки Export вы сможете скачать свой рисунок. Генератор создает векторные изображения, которые можно экспортировать как SVG-файл.
Воображаемый пейзаж (тайлсет Guattari)
Анимация
Как и в наших предыдущих генераторах, в Tiler есть режим анимации. Это все еще экспериментальная функция, но ее уже можно попробовать, выбрав Animate на панели Animation. Анимированный процесс длится случайное количество секунд от нуля до значения на шкале Duration. Двигая бегунки, можно изменять это значение, а также задавать задержку между шагами анимации (шкала Delay).
Городские огни (тайлсет King)
Технические особенности
Tiler написан на чистом JavaScript и использует SVG.js для отрисовки графики. Изначально мы не были уверены в том, что JavaScript — оптимальное средство для реализации веб-версии системы паркетирования, но в результате он прекрасно подошел для решения этой задачи. Было весьма увлекательно использовать JavaScript в чистом виде для создания сложных генеративных изображений.
Структура самого генератора довольно проста: есть матричный объект, который описывает всю систему паркетирования, и тайловый объект, который хранит информацию об отдельном тайле. Сначала Tiler создает экземпляр матричного объекта и присваивает ему все параметры по умолчанию. Затем он формирует массивы со случайными данными для цвета, распределения тайлов и поворота, после чего инициализирует множество тайловых объектов. Каждый из них формируется особым способом отрисовки цветного векторного тайла, относящегося к этому объекту.
Однако отрисовка графики с помощью нативного SVG DOM API может вызывать затруднения, поскольку его код довольно сложно читать и поддерживать. В итоге, чтобы избежать этой проблемы, мы решили использовать SVG.js. Эта библиотека имеет минималистичный и понятный синтаксис — не нужно отвлекаться на поддержание порядка в коде и можно сосредоточиться на творческом процессе.
Интерфейс Tiler основан на нашей новой библиотеке Tron GUI, написанной на Elm и полностью совместимой с JavaScript. Поэтому если вам нравятся футуристические панели управления, рекомендуем задействовать Tron в своих приложениях!
А теперь самое время приступить к генерации своего рисунка. Нам не терпится увидеть, что у вас получится! Не стесняйтесь делиться результатами своего творчества в социальных сетях, добавляя теги #code2art и @JetBrains.
Ваша команда JetBrains
The Drive to Develop
Автор оригинальной статьи:
Subscribe to JetBrains Blog updates
