Codificando a arte: como geramos gráficos e animação em projetos de design

No JetBrains, gostamos de experimentar. Os resultados de nossos experimentos nem sempre são divulgados, mas estamos prontos para compartilhar algo com você agora.

Nosso novo projeto começou com o desejo de automatizar os processos de design. Para cada versão do produto, o designer precisa preparar um grande número de materiais de marketing. Ao mesmo tempo, é completamente insuficiente simplesmente multiplicar os gráficos em diferentes mídias; você precisa fazer uma variedade razoável e esteticamente justificada em cada cópia.

A ideia de gerar gráficos para esses fins não é nova, é importante que o designer tenha controle profundo e preciso sobre a imagem para variar rapidamente e implantar novas configurações visuais sem reescrever significativamente a estrutura geradora e interceptar interminavelmente erros em diferentes estágios do ciclo de vida do código.
imagem

Em busca de uma solução para esse problema, o programador se uniu ao designer e obtivemos o gerador gráfico que demonstramos no ano passado . O gerador foi feito não apenas para entretenimento: nós o usamos para criar telas de apresentação, banners, impressões em camisetas e outros enfeites. O gerador inicial era capaz apenas de imagens estáticas; os nós desempenhados pela biblioteca RPD desempenhavam o papel da interface de controle.

Este ano, precisamos urgentemente de animação para vídeos, protetores de tela e banners interativos. Para a animação na Web, o JavaScript que usamos na última vez também parecia muito propenso a erros, e escolhemos Elm, que é compilado em JS muito rápido.

Elm é a linguagem funcional mais simples e amigável da família ML com tipagem estática, o que torna possível escrever código de trabalho garantido e descrever estruturas de tipos de maior complexidade. Desde a sua criação, o Elm visava os gráficos da web e, entre os pacotes oferecidos nas primeiras versões do idioma, houve uma colagem de elm maravilhosa, e um pouco depois o pacote elm-webgl apareceu, fornecendo ao usuário não apenas um invólucro minimalista em torno da API WebGL, mas também controle sobre tipos de uniformes / atributos / variáveis ​​em shaders.

code2art.jetbrains.com - aqui você pode iniciar o gerador e, depois de descobrir a unidade de design, mover as configurações. Você pode quebrar o quadro que você gosta em .png ou fazer o download da animação como uma página HTML5 com os recursos necessários.

Não nos responsabilizamos pelo tempo gasto pressionando incessantemente o botão "Sinto-me com sorte". Se você gosta de “viagens” visuais, esse é um bom lugar para ficar por um longo tempo.

Entre outras coisas, novamente nos permitimos experimentar uma interface em uma linguagem puramente funcional e, como alternativa, oferecemos uma interface à TRON: code2art.jetbrains.com/#tron
imagem

Os autores do gerador descreverão detalhes técnicos mais profundos em um relatório na conferência f (by) em Minsk, em 26 de janeiro.

O código fonte do gerador pode ser encontrado aqui: github.com/JetBrains/elmsfeuer .

Sua equipe JetBrains
O impulso para desenvolver

Source: https://habr.com/ru/post/pt434796/


All Articles