The Art of Code, Visualized

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

This entry was posted in BehindTheScenes and tagged , , , . Bookmark the permalink.

27 Responses to The Art of Code, Visualized

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

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

    • Eugene Toporov says:

      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:

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

  3. Kenneth Aalberg says:

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

  4. Jade White says:

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

    • Eugene Toporov says:

      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:

    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 :-)

  6. Michal says:

    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:

      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.

  7. Dmitry says:

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

  8. Jimmy says:

    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:

      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:

      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:

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

      • Jimmy says:

        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:

          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:

            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:

            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:

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

Leave a Reply

Your email address will not be published. Required fields are marked *