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

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

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

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

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

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

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

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

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

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

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

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

Комментарии (18)


  1. Fengol
    30.12.2018 18:34

    Просто нет слов! Огромное Вам спасибище! ЯлюблюВас! Желаю всем сотрудникам JB, в новом году, такого же настроения, которое вы подарили мне.


    1. advertka Автор
      30.12.2018 01:28

      И вам спасибо :) С наступающими!


  1. Alexneisc
    30.12.2018 20:12

    Я уже несколько лет плачу от съехавшего прогресс-бара

    Картинка


    1. maximw
      30.12.2018 21:52

      Классно выглядит. Мне нравится.


    1. Grox
      30.12.2018 00:00

      Я было думал, что это баг. Но похоже, что фича )
      Почему бы и нет. Свежо.


      1. Alexneisc
        30.12.2018 00:01

        Этой «фиче» уже 3 года минимум :) Больно уж глаз режет


    1. advertka Автор
      30.12.2018 01:18

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


  1. KvanTTT
    30.12.2018 20:21

    Классно!

    А по каком принципу вы выбираете цвета к каждому продукту?


    1. advertka Автор
      30.12.2018 01:10
      +1

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


  1. Valery4
    30.12.2018 21:19

    Elm — это замечательный, на мой взгляд, выбор. Но прямо напрашивается — почему не выбрали Kotlin? Возможно Elm больше соответсвует задаче, но как-то получается не последовательно, с точки зрения компании.


    1. advertka Автор
      30.12.2018 00:47

      У Elm с графикой действительно пока что ситуация лучше, он изначально для неё затачивался. Именно этим и обусловлен выбор. А что касается точки зрения компании, то мы в JetBrains открыты к использованию других языков.


  1. Cerberuser
    30.12.2018 21:40

    То, что в интерфейсе написано "warp in html5" — это фича? А то руки чешутся спросить, на каком физическом принципе гипердрайв смастерили :)


    1. advertka Автор
      30.12.2018 01:13

      Да, всё правильно, это именно warp и blast. Знаете, когда ставили кнопки, это показалось весело :)


  1. UbuRus
    30.12.2018 13:23

    Так и не сохраняется png в firefox


    1. advertka Автор
      31.12.2018 02:03

      Ваша правда, есть такой баг. Починим в следующей версии.


  1. punksta
    30.12.2018 13:54

    Мечта всех дизайнеров лендингов с летающими отрезками в хедере.


  1. Manwe_SandS
    30.12.2018 18:31

    Что может быть лучше чем TRON + демосцена?!


  1. avigmati
    31.12.2018 02:02

    вы лучшие! я drive ту develop!