The Art of Code, Visualized

Eugene Toporov

Update: Read the update from 2018 about our approach to creating product artwork.


Most of us who write code treat it as something special, more than just a bunch of characters stored in files. A lot of experience, thought and trial and error is put into it. For many, coding is creating and the code is their art. Some believe software development is rather art than science. And while we can’t settle the discussion, we can certainly try and bring some art to science!

Back in 2015 while working on our rebranding, the agency we were working with pitched the idea of trying code-generated art. We instantly loved it and started experimenting.

Code-generated artwork made its first appearance on the rebranded JetBrains home page:

We used the following process:

  1. Create a wavy shape
  2. Generate the visual “network” within the above shape
  3. Add finishing touches in PS. That’s PhotoShop, not PhpStorm 😉

We found it went well and then thought of applying this approach to our product artwork. And so each of three JetBrains Toolbox updates in 2016 got a unique set of product artwork – all code-generated.

The process is interesting and exciting and what’s even better, we love the result. You just can’t stop endlessly tweaking stuff to make the image even more perfect! Therefore, we are already working on an updated visual look for 2017, all code-generated of course.

But code is meant to run, there’s no fun in keeping it to ourselves. So today we want to share something we’ve created for you to play with: the interactive JetBrains Themed Artwork Generator. By using this simple tool you can create your own unique generated artwork or desktop wallpapers based on our graphics style and product palette. Have fun!

NOTE: Our Artwork Generator is still an experiment and has been tested only in Google Chrome for now (sorry), so please use it with care 🙂 But feel free to report any glitches to us.

Under the hood

For the curious (we know you’d want to know more), here’s how it’s done.

The graphic is generated using Processing and p5.js library. It’s great!

The UI is created using the RPD engine for Node-Based User Interfaces. It’s gonna be huge!

The whole application is available on GitHub, if you want to take a look, under the Creative Commons license.

How to use JetBrains Artwork Generator

The UI may seem a bit unusual from the first look, but you can surely get the idea after trying it a little. And it gives you gazillions of options.

A few simple steps to get you started:

Step 1: Choose the product you want in the Palette. JetBrains is selected by default.
The image is re-rendered every time you switch the product.

Step 2: Press SPACE to hide the UI and enjoy the image you created. Repeat steps 1 and 2 until you are happy.

Step 3: Press SPACE to show the UI and click the ‘Save’ icon to save the image.

You can experiment with various parameters by using the UI. To completely re-render the image, click the ‘Bang’ button under the Palette. Hint: try ‘Bong’ too.

Important: To create the right-size desktop wallpaper, you first need to switch your browser window to full-screen (View->Enter Full Screen and make sure no toolbars are visible) and then refresh the page.

We’d love to see your creations! Feel free to share and help us find them by using the #Drive2Create hashtag.

Here are some examples for you to realize the possibilities. Create anything!

Enjoy!
The JetBrains design team

Comments below can no longer be edited.

31 Responses to The Art of Code, Visualized

  1. Даниил Водопьян says:

    February 8, 2017

    How do I get more interesting curves? For example the spiral that you used for the R# demo image above.

    • Eugene Toporov says:

      February 8, 2017

      Every product has its own curve assigned. You can see them if you click ‘Bong’ under Product Palette.

      Also you can create your own curve (black and white) and add it as your custom background using `jb/image` node. Just type “image” in the search box of the node list, drop your custom (black-and-white preferred) image onto this node and connect the outlet to any node accepting pixels.

      But it’s a non-documented feature. Use at your own risk 😉

  2. Oussama HAFFERSSAS says:

    February 8, 2017

    This tool is AWESOME and the result is beautiful ! Thank you !

    • Eugene Toporov says:

      February 8, 2017

      Thank you Oussama! Enjoy!

  3. Kenneth Aalberg says:

    February 9, 2017

    This is beautiful. There needs to be a version that procedurally generates this kind of wallpaper based on code repositories.

    • Eugene Toporov says:

      February 9, 2017

      Thank you Kenneth!
      Yes, we are thinking about something like this 🙂 Would be interesting. Maybe some day.

      • Daniel Hilgarth says:

        February 17, 2017

        Maybe similar to how gource is working

        • Eugene Toporov says:

          February 17, 2017

          Exactly! Gource is beautiful! I remember we were hypnotized by it when watching our own intellij repository history 🙂

  4. Jade White says:

    February 10, 2017

    Is there a hub where people post their results? I would love some sick wallpaper!

    • Eugene Toporov says:

      February 10, 2017

      Hi Jade! Nothing like this at the moment, but maybe some day 🙂
      We suggested people to share their creations but don’t think I saw many…

  5. Sergio Ribeiro says:

    February 10, 2017

    I’ve always thought that the rebranding was awesome and it’s a great idea to make it accessible to everyone.
    Oh, and I love the emphasised text at the “Under the hood” section 🙂

    • Eugene Toporov says:

      February 10, 2017

      Thank you Sergio! Appreciate the feedback 🙂

  6. Michal says:

    February 13, 2017

    Hi,

    I have troubles with saving result image. I don’t see save icon in Chrome. In Firefox I do but it does not do anything. (I use Archlinux with Awesome WM).

    • Eugene Toporov says:

      February 14, 2017

      Hi Michal,

      Thanks for the report! It appears you do not have this unicode symbol that we use for save icon (http://www.fileformat.info/info/unicode/char/1f4be/index.htm) on your system.

      To save the image you can try to run this in your browser console:
      var clickEvent = document.createEvent(“SVGEvents”);
      clickEvent.initEvent(“click”,true,true);
      document.querySelector(‘.rpd-node.rpd-jb-save .rpd-process text’).dispatchEvent(clickEvent);

      Or try to install and use the font that has this symbol.

      Hope it works out for you.

      • Michal says:

        February 14, 2017

        Great! JS code works. Thank you very much 🙂

  7. Dmitry says:

    February 16, 2017

    Is it possible to save the result in a vector format like SVG?

    • Eugene Toporov says:

      February 17, 2017

      Dmitry, no, it is not possible at the moment. But we have discussed it inside the team. Could you please create an issue for this on Github?

      Thank you!

      • Dmytro Yatsenko says:

        February 20, 2017

        Yes, sure! 🙂

  8. Jimmy says:

    November 20, 2017

    Wow, i find the generated output pretty appealing, but unfortunately i am not able to generate anything similar. Maybe you guys could provide one or two more detailed examples?

    • Jimmy says:

      November 20, 2017

      Sorry: With “not anything similar” I mean that it doesnt matter which parameter i manipulate or if I click ‘Bang’ or ‘Bong’ afterwards … simply nothings changing. Whether on MacOS or Windows with Chrome.

    • Eugene Toporov says:

      November 20, 2017

      Hi Jimmy!
      There seems to be some problem with the app. Sorry for the inconvenience. We’ll try to fix it and will notify you here.
      Thank you!

    • Eugene Toporov says:

      November 21, 2017

      Jimmy, we’ve fixed it.
      Interestingly enough, it was caused by a name change from Gogland to GoLand 🙂
      Have fun!

      • Jimmy says:

        November 21, 2017

        Haha you guys are the best! I hate to say it, but this time its like killing my chrome when trying to render the initial page … 😀

        Is it working without problems on your side?

        • Eugene Toporov says:

          November 21, 2017

          Do you mean the browser crashes? No, no crashes here. It can be quite slow and take time but works otherwise.
          Can you tell us the details? OS, browser version, etc. Thanks!

          • Jimmy says:

            November 21, 2017

            Well, Chrome is still alive, but it killed my Twitch Streams i have been looking and chrome hang for some time 😛

            I am on Windows 10 x64 with Chrome @ Version 62.0.3202.94

          • Jimmy says:

            November 21, 2017

            Okay yeah its pretty slow and very unresponsive until its loaded/generated. But in the meantime Chrome is unusable on my side. But thats OK for the moment!

            Thanks again for the fast fixes guys!

  9. Jimmy says:

    November 21, 2017

    So it finally worked for me with the latest Chrome Canary version. In “normal” Chrome I was not able to get it work properly.

  10. Coding the Art, Continued | JetBrains Team says:

    December 11, 2018

    […] 2 years ago, we shared a story of how we create artwork at JetBrains, along with a cool and geeky tool you could play with to create your own […]

  11. Coding the Art: как мы генерируем графику и анимацию в дизайн-проектах – CHEPA website says:

    December 29, 2018

    […] генератор графики, который мы демонстрировали в прошлом году. Генератор был сделан не только для развлечения: мы […]

  12. 编程的艺术 | JetBrains中国 says:

    January 17, 2019

    […] 2 年前,我们分享了在 JetBrains 我们如何创造艺术,以及炫酷和极客的工具,用来创建您自己 JetBrains […]

  13. アートをコーディング | JetBrains ブログ says:

    January 29, 2019

    […] 約2年前、JetBrainsでアートワークを作成している方法についてのストーリー(英)と、皆様独自のJetBrainsスタイル付きアートを作成するために使える、クールで少しマニアックなツールを共用しました。 […]