Coding The Art: Как Мы Генерируем Графику И Анимацию В Дизайн-Проектах

В JetBrains мы любим экспериментировать.

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

Наш новый проект начался с желания автоматизировать процессы проектирования.

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

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

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



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

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

в прошлом году .

Генератор создан не только для развлечения: мы использовали его для создания заставок, баннеров, принтов на футболках и прочей мишуры.

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

В этом году нам срочно понадобилась анимация для видео, заставки и интерактивные баннеры.

Для анимации в Интернете JavaScript, который мы использовали в прошлый раз, показался слишком подверженным ошибкам, поэтому мы выбрали язык Elm, который компилируется в очень быстрый JS. Elm — самый простой и дружелюбный функциональный язык семейства ML со статической типизацией, позволяющей писать гарантированно работающий код и описывать весьма сложные структуры типов.

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

code2art.jetbrains.com — здесь вы можете запустить генератор и, обнаружив в себе привод конструкции, изменить настройки.

Вы можете обернуть понравившийся кадр в .

png или загрузить анимацию в виде HTML5-страницы с необходимыми ресурсами.

Мы не несем ответственности за время, потраченное вами на постоянное нажатие кнопки «Мне повезет».

Если вы любите визуальные путешествия, то это хорошее место, чтобы провести время надолго.

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

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

Более подробные технические подробности авторы генератора расскажут в докладе на конференции.

е (по) в Минске 26 января.

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

Ваша команда JetBrains Стремление к развитию Теги: #дизайн #Графический дизайн #jetbrains #анимация #графика

Вместе с данным постом часто просматривают: