Coding the Art: how we generate graphics and animation in design projects
At JetBrains, we love to experiment. The results of our experiments are not always available to the general public, but we are ready to share something with you right now.
Our new project began with a desire to automate design processes. For each product release, the designer needs to prepare a large amount of marketing materials. In this case, it is absolutely not enough just to multiply the graphics on different carriers; you need to be able to bring in a reasonable and aesthetically sound variety to each copy.
The idea to generate graphics for such purposes is not new; it is important for a designer to have deep and precise control over the image in order to quickly vary and deploy new visual configurations without significant rewriting of the generating structure and endless catching of errors at different stages of the code's life cycle.
In the search for a solution to this problem, the programmer has united with the design one, and the graphics generator has turned out, which we demonstrated last year . The generator was made not only for entertainment: we used it to create splash screens, banners, prints on T-shirts and other tinsel. The original generator was capable only of static images, the role of the control interface was played by the nodes pumped up by the RPD library.
')
This year we urgently needed animation for videos, screensavers and interactive banners. For the animation on the web, JavaScript, which we used last time, seemed too, what is called, error-prone, and we chose the Elm language, which compiles to very fast JS.
Elm is the simplest and most friendly functional language from the ML-family with static typing, which makes it possible to write guaranteed working code and to describe structures of types of increased complexity. Since its inception, Elm has been aiming for web graphics, and among the packages offered in the first versions of the language, there was an excellent elm-collage , and a little later the elm-webgl package appeared, providing the user with not only a minimalist wrapper around the WebGL API, but also control over types of Uniforms / Attributes / Variables in shaders.
code2art.jetbrains.com - here you can start the generator and, having discovered the design drive, move the settings. You can wrap the frame you like in .png or download an animation in the form of an HTML5 page with the necessary resources.
We are not responsible for your time spent nonstop pressing the “I feel lucky” button. If you like visual "trips", then this is a good place to hang for a long time.
Among other things, we again allowed ourselves an experiment with the interface in a purely functional language and as an alternative, we offer you an interface a la TRON: code2art.jetbrains.com/#tron
The authors will describe the deeper technical details in the report at the f (by) conference in Minsk on January 26.
The source code of the generator can be found here: github.com/JetBrains/elmsfeuer .
Your JetBrains team
The Drive to Develop
Our new project began with a desire to automate design processes. For each product release, the designer needs to prepare a large amount of marketing materials. In this case, it is absolutely not enough just to multiply the graphics on different carriers; you need to be able to bring in a reasonable and aesthetically sound variety to each copy.
The idea to generate graphics for such purposes is not new; it is important for a designer to have deep and precise control over the image in order to quickly vary and deploy new visual configurations without significant rewriting of the generating structure and endless catching of errors at different stages of the code's life cycle.
In the search for a solution to this problem, the programmer has united with the design one, and the graphics generator has turned out, which we demonstrated last year . The generator was made not only for entertainment: we used it to create splash screens, banners, prints on T-shirts and other tinsel. The original generator was capable only of static images, the role of the control interface was played by the nodes pumped up by the RPD library.
')
This year we urgently needed animation for videos, screensavers and interactive banners. For the animation on the web, JavaScript, which we used last time, seemed too, what is called, error-prone, and we chose the Elm language, which compiles to very fast JS.
Elm is the simplest and most friendly functional language from the ML-family with static typing, which makes it possible to write guaranteed working code and to describe structures of types of increased complexity. Since its inception, Elm has been aiming for web graphics, and among the packages offered in the first versions of the language, there was an excellent elm-collage , and a little later the elm-webgl package appeared, providing the user with not only a minimalist wrapper around the WebGL API, but also control over types of Uniforms / Attributes / Variables in shaders.
code2art.jetbrains.com - here you can start the generator and, having discovered the design drive, move the settings. You can wrap the frame you like in .png or download an animation in the form of an HTML5 page with the necessary resources.
We are not responsible for your time spent nonstop pressing the “I feel lucky” button. If you like visual "trips", then this is a good place to hang for a long time.
Among other things, we again allowed ourselves an experiment with the interface in a purely functional language and as an alternative, we offer you an interface a la TRON: code2art.jetbrains.com/#tron
The authors will describe the deeper technical details in the report at the f (by) conference in Minsk on January 26.
The source code of the generator can be found here: github.com/JetBrains/elmsfeuer .
Your JetBrains team
The Drive to Develop
Source: https://habr.com/ru/post/434796/
All Articles