Главная » Хабрахабр » Coding the Art: как мы генерируем графику и анимацию в дизайн-проектах

Coding the Art: как мы генерируем графику и анимацию в дизайн-проектах

В JetBrains мы любим экспериментировать. Результаты наших экспериментов не всегда становятся достоянием широкой публики, но кое-чем мы готовы поделиться с вами прямо сейчас.

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

Генератор был сделан не только для развлечения: мы использовали его для создания сплеш-скринов, баннеров, принтов на футболках и прочей мишуры. Идея генерировать графику в таких целях не нова, для дизайнера важно иметь глубокий и точный контроль над изображением, чтобы быстро варьировать и разворачивать новые визуальные конфигурации без значительного переписывания генерирующей структуры и бесконечного отлова ошибок на разных стадиях жизненного цикла кода.
image
В поиске решения этой проблемы программистское объединилось с дизайнерским, и получился генератор графики, который мы демонстрировали в прошлом году. Изначальный генератор был способен только на статичные изображения, роль интерфейса контроля играли ноды, подкачанные библиотекой RPD.

Для анимации на вебе JavaScript, который мы использовали в прошлый раз, показался слишком, что называется, error-prone, и мы выбрали язык Elm, компилирующийся в очень быстрый JS. В этом году нам остро понадобилась анимация для видеороликов, скринсейверов и интерактивных баннеров.

С самого своего создания, Elm нацеливался на веб-графику, и среди пакетов, предлагавшихся в первых версиях языка, был прекрасный elm-collage, а чуть позже появился пакет elm-webgl, предоставляющий пользователю не только минималистичную обертку вокруг WebGL API, но и контроль над типами Uniforms / Attributes / Variables в шейдерах. Elm — самый простой и дружелюбный функциональный язык из ML-семейства со статической типизацией, что дает возможность писать гарантированно работающий код и описывать структуры типов повышенной сложности.

Можно обернуть понравившийся кадр в .png или скачать анимацию в виде HTML5-страницы с необходимыми ресурсами. code2art.jetbrains.com — здесь вы можете запустить генератор и, обнаружив в себе дизайнерский драйв, пошевелить настройки.

Если вы любите визуальные «трипы», то это хорошое место, чтобы зависнуть надолго. Мы не несем ответственности за ваше время, проведенное за безостановочным нажатием кнопки «I feel lucky».

Кроме прочего, мы снова позволили себе эксперимент с интерфейсом на чисто функциональном языке и в качестве альтернативы предлагаем вам интерфейс а-ля TRON: code2art.jetbrains.com/#tron
image

Более глубокие технические подробности авторы генератора опишут в докладе на конференции f(by) в Минске 26 января.

Исходный код генератора вы можете найти здесь: github.com/JetBrains/elmsfeuer.

Ваша команда JetBrains
The Drive to Develop


Оставить комментарий

Ваш email нигде не будет показан
Обязательные для заполнения поля помечены *

*

x

Ещё Hi-Tech Интересное!

Внедряйте статический анализ в процесс, а не ищите с его помощью баги

Написать эту статью меня сподвигло большое количество материалов о статическом анализе, всё чаще попадающихся на глаза. Во-первых, это блог PVS-studio, который активно продвигает себя на Хабре при помощи обзоров ошибок, найденных их инструментом в проектах с открытым кодом. Недавно PVS-studio ...

[Перевод] Как рендерится кадр Rise of the Tomb Raider

Rise of the Tomb Raider (2015 год) — это сиквел превосходного перезапуска Tomb Raider (2013 год). Лично я нахожу обе части интересными, потому что они отошли от стагнирующей оригинальной серии и рассказали историю Лары заново. В этой игре, как и ...