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 still images, role play control interface nodes, Defined library RPD .

    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. 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 alternatively we offer you an interface a la TRON: The

    authors will describe the deeper technical details in the report at the f (by) conference in Minsk on January 26th.

    The source code of the generator can be found .

    Your Team JetBrains
    The Drive to Develop

    Also popular now: