A Work of Desktop Art
Update: Read the update from 2020 about our next iteration of code generated art: the new version of the graphics generator using a neural network to create both animated and static graphics.
There is a certain intangible beauty and satisfaction to be gained when the worlds of art and science come together to create a cataclysm of functional form with a mastery of technical skills.
For many developers, coding is a form of creation and the code is their art.
Our code-generated art is a testament to this.
We’ve continually been developing the generator to make art from code, which we use internally to combine these two worlds and create beauty by striking the perfect balance between the experimentation of art and the cognizance of science. This may not be news to you. After all, we’ve covered the improvements we have been making to this generator over the years, from its first inception in 2017 to the later developments brought out in 2018.
Now by the end of 2019, we are continuing to expand on the unlimited potential of the technology.
What’s new
We are using our code-generated art to create original artwork for all our splash screens, banners, and release graphics. Each product will have its own unique design to bring pleasing aesthetics to your desktop.
This version of the graphics generator creates both animated and static graphics based on the computational model of metaballs, which predict how drops of fluid (or elastic spheres) would interfere with each other in a vacuum.
The beautiful premade JetBrains screensavers and desktop wallpapers now have a new home on our website. You can get to them easily on the Desktop Art page of the JetBrains website.
If you are after something a little more unique, our generator can produce art that is absolutely exclusive to you. Create a wallpaper that expresses your individuality, for a desktop that is truly yours. Simply visit the Desktop Art page on our website or go to code2art.jetbrains.com directly.
Here are just some examples of what you can create with the help of our generator.
Metarings
Myopia and biomorphs
Khokhloma
Chromatic Holes
ARRT!
Not only can you use the wallpapers and screensavers you love the most for your desktop, but they can also become a custom background for your JetBrains IDE. Check out this guide for step-by-step instructions.
The technical details
We continued developing the generator in the Elm language, and the animation is powered by the Elm-WebGL library.
Thanks to its strict typing and functional approach, we completely rebuilt the structure of the project just in a few weeks. Now the layers are truly modular, and you can toggle them on and off to compose visual effects to your liking. You can use any graphic source as a layer: 2D canvas animation, WebGL with shaders, just some HTML or SVG (also animated), and so on. A layer can even be written in JavaScript and included in the system.
It is done using Elm Architecture that is similar to one that is used for nested components. Each layer has its Model/Update/View cycle, is in charge of importing and exporting itself, and can also receive global events, such as "I feel lucky". In the case of the "I feel lucky" event, the layer itself generates a random version of its model.
From a technical standpoint, Elm is a great choice for generating the graphics:
- It helps us describe the layers model as well as any complex structures using Algebraic Data Types in their purest form, and it’s the easiest and most natural way for us to do so.
- This functional way of programming is super-friendly with generative algorithms – it’s easy to separate them into independent functions and reuse them with any type of input.
- Together, the Algebraic Data Types and functionality help us organize the code in a modular way, where it’s easy to unplug or plug in just about anything.
- The code in Elm is much more readable (when you take some time to get used to the new syntax) than code in most other languages – even Haskell code, which it borrows most of its ideas from.
- Elm-WebGL package is not just a wrapper. Rather it’s a friendly API that offers useful and easy ways to create a scene, check the types of the data you provide to the shaders, load textures in an Elm way, and many other useful things.
- Having JavaScript ports allows us to include
gui.jsas the current GUI and still keep and operate the model on the Elm side.
There are some downsides of writing in Elm for us too, however:
- The Elm-WebGL package lacks some of the functionality that we need (i.e. dynamic rendering to the texture and passing arrays of data to the shaders), and in Elm is now restricted to using native JavaScript code. We tried using a JS-driven replacement, but we couldn’t, so we have some layers written in pure JS-WebGL and the model is sent back and forth on updates using JS ports.
- For now, the Elm/url package does not support file:///-kind of URLs for no obvious reason, so to let users download the self-hosted server-less version of the generated artwork, we have to patch the output of the WebPack JavaScript using Regular Expressions.
Ongoing changes are always being added to the platform. The application source code, as always, is available on GitHub under the Creative Commons license.
Enjoy playing with the generator and don’t forget to share your results with others on social media and tag JetBrains. We would love to see your art!
JetBrains
The Drive to Develop
Subscribe to JetBrains Blog updates
