De l’art pour votre desktop

Pour beaucoup de développeurs, coder est un art.
JetBrains partage cette idée et notre Artwork Generator, qui résulte de la rencontre entre créativité et science, en atteste.

JetBrains Artwork Generator v3

Depuis sa création en 2017 nous avons développé JetBrains Artwork Generator en continu et nous vous avions présenté ses premières améliorations en 2018.

Nous arrivons à présent à la fin de 2019 et continuons à utiliser le potentiel illimité de la technologie pour le faire évoluer.

Nouveautés

Nous utilisons notre art généré par code pour créer des illustrations originales pour tous nos écrans de démarrage, bannières et graphismes pour les publications des nouvelles versions de nos outils. Chacun de nos produits dispose d’une identité graphique unique.

Cette version d’Artwork Generator crée des graphismes animés et statiques à partir du modèle de calcul des metaballs, qui prédit les interférences de gouttes de fluide (ou sphères élastiques) entre elles dans le vide.

Les écrans de veille et fonds d’écran de JetBrains sont disponibles sur la page Art du desktop de notre site.

Si vous êtes à la recherche de quelque chose d’unique, notre générateur vous permet de produire des graphismes personnalisés : code2art.jetbrains.com.

Voici quelques exemples de ce que vous pouvez créer avec le générateur.

Metarings
Metarings

Myopia and biomorphs
Myopia and biomorphs

Khokhloma
Khokhloma

Chromatic Holes
Chromatic Holes

ARRT !
ARRT!

Vous pouvez utiliser les écrans de veille et les fonds d’écran pour votre bureau, mais aussi comme arrière-plan de votre EDI JetBrains. Consultez ce guide pour des instructions étape par étape

Les détails techniques

Nous avons poursuivi le développement du générateur avec le langage Elm, et l’animation utilise la bibliothèque Elm-WebGL.

L’approche fonctionnelle et le typage strict nous ont permis de reconstruire entièrement la structure du projet en quelques semaines. Les couches sont désormais véritablement modulaires et vous pouvez les activer ou les désactiver pour composer les effets visuels de votre choix. Vous pouvez utiliser n’importe quelle source graphique comme couche : animation de tableaux 2D, WebGL avec des scripts shaders, du simple HTML ou un SVG (également animé), etc. Une couche peut même être écrite en JavaScript et incluse dans le système.

C’est possible grâce à l’Architecture Elm , similaire à celle utilisée pour les composants imbriqués. Chaque couche a son cycle Model/Update/View, est responsable de l’importation et de l’exportation et peut également recevoir des événements globaux, tels que “I feel lucky”. Dans le cas de l’événement “I feel lucky”, la couche elle-même génère une version aléatoire de son modèle.

D’un point de vue technique, Elm est un excellent choix pour générer des graphismes :

  • Il nous aide à décrire le modèle de couches ainsi que toutes les structures complexes en utilisant les types de données algébriques dans leur forme la plus pure, et c’est le moyen le plus simple et le plus naturel de le faire pour nous.
  • Cette façon fonctionnelle de programmer est extrêmement conviviale avec des algorithmes génératifs ; il est facile de les séparer en fonctions indépendantes et de les réutiliser avec n’importe quel type d’entrée.
  • Combinés, les types de données algébriques et les fonctionnalités nous aident à organiser le code de façon modulaire. Il est facile de débrancher ou de brancher ce que l’on souhaite.
  • Le code dans Elm est beaucoup plus lisible (si vous prenez le temps de vous habituer à la nouvelle syntaxe) que le code de la plupart des autres langages – même le code Haskell, duquel il emprunte la plupart de ses idées.
  • Le paquet Elm-WebGL n’est pas qu’un simple wrapper. Il s’agit plutôt d’une API qui propose des moyens utiles et faciles de créer une scène, de vérifier les types de données que vous fournissez aux shaders ou de charger des textures à la manière d’Elm, entre autres nombreuses choses utiles.
  • Les ports JavaScript nous permettent d’inclure gui.js comme GUI actuelle tout en conservant le modèle du côté Elm.

Il y a toutefois quelques inconvénients à écrire en Elm :

  • Il manque au paquet Elm-WebGL certaines fonctionnalités dont nous avons besoin, comme le rendu dynamique de la texture et le passage de tableaux de données dans les shaders, et en Elm il est désormais limité à l’utilisation de code JavaScript natif. Nous avons essayé d’utiliser un remplaçant piloté par JS, sans succès. Nous avons donc quelques couches écrites en JS-WebGL pur, et le modèle fait des allers-retours lors des mises à jour à l’aide des ports JS.
  • Pour l’instant, sans raison apparente, le paquet Elm/url ne prend pas en charge les URL de type file:///-, donc pour permettre aux utilisateurs de télécharger la version sans serveur auto-hébergée de l’illustration générée, nous devons corriger la sortie du JavaScript WebPack à l’aide d’expressions régulières.

Des modifications sont toujours ajoutées à la plateforme en continu. Le code source de l’application, comme toujours, est disponible sur GitHub sous la licence Creative Commons.

Explorer nos Graphismes de bureau

Expérimentez le générateur et n’hésitez pas à partager vos résultats sur les réseaux sociaux et à taguer JetBrainsNous avons hâte de découvrir vos œuvres !

JetBrains
The Drive to Develop

Auteur de l’article original en anglais : Anastasia Chumak

image description

Discover more