Codificando el arte: cómo generamos gráficos y animación en proyectos de diseño

En JetBrains, nos encanta experimentar. Los resultados de nuestros experimentos no siempre se hacen públicos, pero estamos listos para compartir algo con usted en este momento.

Nuestro nuevo proyecto comenzó con el deseo de automatizar los procesos de diseño. Para cada lanzamiento del producto, el diseñador necesita preparar una gran cantidad de materiales de marketing. Al mismo tiempo, es completamente insuficiente simplemente multiplicar los gráficos en diferentes medios, debe ser capaz de hacer una variedad razonable y estéticamente justificada en cada copia.

La idea de generar gráficos para tales propósitos no es nueva, es importante que el diseñador tenga un control profundo y preciso sobre la imagen para variar y desplegar rápidamente nuevas configuraciones visuales sin una reescritura significativa de la estructura generadora y una interminable captura de errores en las diferentes etapas del ciclo de vida del código.
imagen

En una búsqueda de una solución a este problema, el programador se combinó con el diseñador y obtuvimos el generador de gráficos que demostramos el año pasado . El generador fue hecho no solo para entretenimiento: lo usamos para crear pantallas de presentación, pancartas, estampados en camisetas y otros adornos. El generador inicial solo era capaz de imágenes estáticas; los nodos reproducidos por la biblioteca RPD desempeñaban el papel de la interfaz de control.

Este año, necesitábamos urgentemente animación para videos, salvapantallas y pancartas interactivas. Para la animación en la web, el JavaScript que utilizamos la última vez también parecía demasiado propenso a errores, y elegimos Elm, que se compila en JS muy rápido.

Elm es el lenguaje funcional más simple y amigable de la familia ML con escritura estática, lo que permite escribir código de trabajo garantizado y describir estructuras de tipo de mayor complejidad. Desde su inicio, Elm ha apuntado a los gráficos web, y entre los paquetes ofrecidos en las primeras versiones del lenguaje, hubo un maravilloso collage de elm , y un poco más tarde apareció el paquete elm-webgl , que proporciona al usuario no solo un envoltorio minimalista alrededor de la API de WebGL, sino también el control sobre tipos de uniformes / atributos / variables en sombreadores.

code2art.jetbrains.com : aquí puede iniciar el generador y, después de descubrir la unidad de diseño, mover la configuración. Puede ajustar el marco que desee en .png o descargar la animación como una página HTML5 con los recursos necesarios.

No somos responsables del tiempo que pases presionando sin cesar el botón "Me siento afortunado". Si te gustan los "viajes" visuales, entonces este es un buen lugar para pasar el rato.

Entre otras cosas, nuevamente nos permitimos experimentar con una interfaz en un lenguaje puramente funcional y, como alternativa, le ofrecemos una interfaz a la TRON: code2art.jetbrains.com/#tron
imagen

Los autores del generador describirán detalles técnicos más profundos en un informe en la conferencia f (by) en Minsk el 26 de enero.

El código fuente del generador se puede encontrar aquí: github.com/JetBrains/elmsfeuer .

Tu equipo de JetBrains
El impulso para desarrollar

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


All Articles