{"id":161070,"date":"2021-06-16T16:31:28","date_gmt":"2021-06-16T15:31:28","guid":{"rendered":"https:\/\/blog.jetbrains.com\/blog\/2021\/06\/16\/art-of-tiling-and-mind-coalescence\/"},"modified":"2021-07-12T15:51:22","modified_gmt":"2021-07-12T14:51:22","slug":"art-de-la-mosaique-et-intelligence-collective","status":"publish","type":"blog","link":"https:\/\/blog.jetbrains.com\/fr\/blog\/2021\/06\/16\/art-de-la-mosaique-et-intelligence-collective\/","title":{"rendered":"Art de la mosa\u00efque et Intelligence collective"},"content":{"rendered":"\n

Cela fait d\u00e9j\u00e0 cinq ans que nous utilisons des technologies de calcul pour produire les cr\u00e9ations graphiques de la marque JetBrains. Au d\u00e9but, nos passionn\u00e9s d’art g\u00e9n\u00e9ratif travaillaient dans diff\u00e9rentes \u00e9quipes de l’entreprise. Par la suite, ils se sont r\u00e9unis pour former une \u00e9quipe appel\u00e9e \u00ab Computational Arts Initiative \u00bb et depuis, l’art g\u00e9n\u00e9ratif est devenu une partie importante de notre processus de conception. Nous avons ainsi test\u00e9 de nombreux algorithmes et diff\u00e9rentes technologies, nous sommes amus\u00e9\u00b7e\u00b7s avec les constellations cosmiques<\/a> et les m\u00e9taballes fluides<\/a> et avons essay\u00e9 l’algorithme de Vorono\u00ef<\/a> et les r\u00e9seaux neuronaux<\/a>.<\/p>\n\n\n\n

Cette ann\u00e9e, nous avons d\u00e9velopp\u00e9 un nouveau g\u00e9n\u00e9rateur de cr\u00e9ations graphiques que nous avons appel\u00e9 Tiler<\/a>. Comme son nom le sugg\u00e8re, il est bas\u00e9 sur une mosa\u00efque de tuiles r\u00e9parties de fa\u00e7on al\u00e9atoire. Les tuiles forment une image structur\u00e9e avec un motif, qui est diff\u00e9rente \u00e0 chaque rechargement de la page.<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n

D\u00e9couvrir les graphismes pour desktop<\/a><\/p>\n\n\n

Les tuiles sont regroup\u00e9es dans des ensembles en fonction de leur style et des formes qu’elles contiennent. Ces ensembles de tuiles ont \u00e9t\u00e9 d\u00e9velopp\u00e9s manuellement par nos graphistes. \u00c0 titre exp\u00e9rimental, nous avons impl\u00e9ment\u00e9 une approche collaborative combinant l’expression artistique individuelle avec un algorithme de r\u00e9partition computationnelle des tuiles. Voir les discr\u00e8tes tuiles monochromes se transformer en une \u0153uvre unifi\u00e9e et vivante gr\u00e2ce \u00e0 la puissance du code etait tres int\u00e9ressant. En m\u00eame temps, chaque ensemble de tuiles refl\u00e8te la vision artistique de la personne qui l’a con\u00e7u : certaines tuiles sont g\u00e9om\u00e9triques et complexes, d’autres plus minimalistes, d’autres encore plut\u00f4t sinueuses et organiques.<\/p>\n\n\n\n

\"\"
Exemples d’ensembles de tuiles sources (du coin sup\u00e9rieur gauche au coin inf\u00e9rieur droit) : Douglas, Lem, Deleuze, Phondke, Eliott, Benjamin, King<\/em><\/figcaption><\/figure>\n\n\n\n

Dans l’interface de Tiler, vous pouvez s\u00e9lectionner Tile<\/em> pour essayer diff\u00e9rents assemblages de tuiles, limiter la diversit\u00e9 des tuiles dans Randomness<\/em>, puis m\u00e9langer les tuiles sur le plan de travail ou les actualiser dans l’ensemble de tuiles s\u00e9lectionn\u00e9.<\/p>\n\n\n\n

\"\"
Hyperspace (ensemble de tuiles Benjamin)<\/em><\/figcaption><\/figure>\n\n\n\n

Color<\/p>\n\n\n\n

Comme vous pouvez le voir, la forme d’une tuile et sa couleur sont ind\u00e9pendantes l’une de l’autre car deux algorithmes diff\u00e9rents sont responsables de la coloration. Par d\u00e9faut, chaque tuile est remplie individuellement sans tenir compte de la couleur de ses voisines. Chaque tuile se voit attribuer une couleur al\u00e9atoire. Pour obtenir un r\u00e9sultat plus estomp\u00e9, s\u00e9lectionnez Randomness<\/em> et optez pour un remplissage en d\u00e9grad\u00e9. Cette option utilise l’algorithme Bruit de Perlin pour r\u00e9aliser des transitions de couleur \u00e9l\u00e9gantes. Vous pouvez \u00e9galement modifier la taille du mod\u00e8le de d\u00e9grad\u00e9 et le faire varier de large \u00e0 l\u00e9g\u00e8rement granuleux en utilisant le contr\u00f4le Gradient size<\/em>.<\/p>\n\n\n\n

\"\"
Rhizome (ensemble de tuiles Deleuze)<\/em><\/figcaption><\/figure>\n\n\n\n

Si vous avez envie de plus de couleur, n’h\u00e9sitez pas \u00e0 modifier l’arri\u00e8re-plan dans la section Color<\/em> en choisissant l’une des trois couleurs propos\u00e9es. Vous pouvez \u00e9galement contr\u00f4ler la saturation et la luminosit\u00e9 avec les param\u00e8tres Mix<\/em> et Base color<\/em>.<\/p>\n\n\n\n

\"\"
Sunshine (ensemble de tuiles Gombrich)<\/em><\/figcaption><\/figure>\n\n\n\n

Taille<\/p>\n\n\n\n

Outre la couleur, la taille des tuiles est une autre caract\u00e9ristique pouvant radicalement changer l’aspect d’une \u0153uvre. Dans le panneau Sizes<\/em>, vous pouvez modifier la taille de toute une cellule de tuile, redimensionner la forme qui s’y trouve ou ajuster les deux. Nous vous invitons \u00e0 essayer avec des valeurs plus \u00e9lev\u00e9es pour la taille des formes, vous serez surpris\u00b7e du r\u00e9sultat !<\/p>\n\n\n\n

\"\"
Summer Blossom (ensemble de tuiles Lem)<\/em><\/figcaption><\/figure>\n\n\n\n

Modifier une seule tuile<\/p>\n\n\n\n

Tous les param\u00e8tres mentionn\u00e9s ci-dessus affectent toutes les tuiles d’une mosa\u00efque. Alors comment faire si on ne veut modifier qu’une seule tuile ? En cliquant sur la tuile concern\u00e9e, celle-ci sera par d\u00e9faut remplac\u00e9e par une autre tuile provenant du m\u00eame ensemble. Lorsque vous atteignez la derni\u00e8re tuile d’un ensemble, vous \u00eates ramen\u00e9\u00b7e \u00e0 la tuile initiale et recommencez. Vous pouvez \u00e9galement d\u00e9finir un autre param\u00e8tre \u00e0 modifier dans Click action<\/em> et s\u00e9lectionner Rotate<\/em> ou Change opacity<\/em> et la prochaine fois que vous cliquerez sur la tuile, elle effectuera une rotation ou deviendra plus ou moins opaque.<\/p>\n\n\n\n

\"\"
Celebration (ensemble de tuiles Stephenson)<\/em><\/figcaption><\/figure>\n\n\n\n

Sauvegarder votre \u0153uvre<\/p>\n\n\n\n

Une fois que vous serez satisfait\u00b7e du r\u00e9sultat, cliquez sur Make URL<\/em> : tous vos r\u00e9glages actuels seront enregistr\u00e9s et l’URL de votre \u0153uvre s’affichera dans la barre d’adresse. Si vous ouvrez cette URL dans un autre onglet, Tiler g\u00e9n\u00e9rera l’image exacte que vous avez cr\u00e9\u00e9e.<\/p>\n\n\n\n

Une autre option vous permet de simplement t\u00e9l\u00e9charger l’image. Le g\u00e9n\u00e9rateur \u00e9tant bas\u00e9 sur des graphiques vectoriels, vous pouvez exporter l’image sous forme de fichier SVG.<\/p>\n\n\n\n

\"\"
Imaginary Landscape (ensemble de tuiles Guattari)<\/em><\/figcaption><\/figure><\/em><\/figcaption><\/figure>\n\n\n\n

Animation<\/p>\n\n\n\n

Comme nos g\u00e9n\u00e9rateurs pr\u00e9c\u00e9dents, Tiler dispose d’un mode animation. Il s’agit toujours d’une fonctionnalit\u00e9 exp\u00e9rimentale, mais vous pouvez l’essayer en cliquant sur Animate<\/em> dans la section Animation<\/em>. L’animation dure un nombre de secondes al\u00e9atoire entre z\u00e9ro et Duration<\/em>. Vous pouvez contr\u00f4ler cette valeur et d\u00e9finir une valeur maximale pour le d\u00e9lai entre chaque \u00e9tape d’animation \u00e0 l’aide des boutons dans la commande Delay<\/em>.<\/p>\n\n\n\n

\"\"
City Lights (ensemble de tuiles King)<\/em><\/figcaption><\/figure>\n\n\n\n

D\u00e9tails techniques<\/p>\n\n\n\n

Tiler a \u00e9t\u00e9 con\u00e7u avec JavaScript et utilise SVG.js<\/a> pour le rendu des graphiques. Au d\u00e9part, nous n’\u00e9tions pas totalement convaincu\u00b7e\u00b7s de la pertinence de JavaScript, mais il s’est r\u00e9v\u00e9l\u00e9 vraiment efficace pour d\u00e9velopper un syst\u00e8me de tuiles sur le web. L’utilisation de JavaScript pour cr\u00e9er des visuels g\u00e9n\u00e9ratifs complexes a \u00e9t\u00e9 une exp\u00e9rience tr\u00e8s int\u00e9ressante et concluante.<\/p>\n\n\n\n

La structure du g\u00e9n\u00e9rateur lui-m\u00eame est assez simple : il y a un objet grille, qui d\u00e9crit l’ensemble du syst\u00e8me de tuiles, et un objet tuile, qui stocke les informations sp\u00e9cifiques \u00e0 une seule tuile. Tout d’abord, Tiler cr\u00e9e une instance d’objet grille et lui transmet tous les param\u00e8tres par d\u00e9faut. Puis, il cr\u00e9e des matrices avec des donn\u00e9es al\u00e9atoires pour les couleurs, la r\u00e9partition des tuiles et leur rotation. Pour finir, Tiler initialise plusieurs objets tuiles. Chacun d’eux a une m\u00e9thode de rendu sp\u00e9ciale qui restitue une tuile vectorielle color\u00e9e attribu\u00e9e \u00e0 l’objet.<\/p>\n\n\n\n

Cependant, le rendu des graphiques avec l’API DOM SVG native peut \u00eatre relativement compliqu\u00e9, car elle est plut\u00f4t difficile \u00e0 lire et \u00e0 maintenir. Nous avons donc d\u00e9cid\u00e9 d’utiliser SVG.js pour r\u00e9soudre ce probl\u00e8me. Cette biblioth\u00e8que fournit une syntaxe minimaliste et facile \u00e0 utiliser, ce qui vous permet de garder votre code ordonn\u00e9 et de vous concentrer sur votre \u0153uvre plut\u00f4t que sur la syntaxe.<\/p>\n\n\n\n

L’interface de Tiler est g\u00e9r\u00e9e par notre toute nouvelle biblioth\u00e8que d’interface utilisateur, Tron GUI<\/a>, qui est construite avec le langage Elm et enti\u00e8rement compatible avec JavaScript. Si vous aimez les tableaux de bord futuristes, nous vous recommandons de l’impl\u00e9menter dans vos applications !<\/p>\n\n\n

D\u00e9couvrir les graphismes pour desktop<\/a><\/p>\n\n\n

Maintenant que vous en savez plus sur l’art g\u00e9n\u00e9ratif, que diriez-vous d’essayer de g\u00e9n\u00e9rer quelques \u0153uvres ? Nous avons h\u00e2te de voir ce que vous allez produire ! N’h\u00e9sitez pas \u00e0 partager vos \u0153uvres sur les r\u00e9seaux sociaux avec le hashtag #code2art<\/strong> et le tag @JetBrains<\/strong>.<\/p>\n\n\n

Article original en anglais par :<\/em><\/em><\/p>\n\n

\n
\n
\n
\n \"\"\n <\/div>\n
\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n","protected":false},"author":813,"featured_media":154835,"comment_status":"closed","ping_status":"closed","template":"","categories":[6316,89],"tags":[3679,575],"cross-post-tag":[],"acf":[],"_links":{"self":[{"href":"https:\/\/blog.jetbrains.com\/fr\/wp-json\/wp\/v2\/blog\/161070"}],"collection":[{"href":"https:\/\/blog.jetbrains.com\/fr\/wp-json\/wp\/v2\/blog"}],"about":[{"href":"https:\/\/blog.jetbrains.com\/fr\/wp-json\/wp\/v2\/types\/blog"}],"author":[{"embeddable":true,"href":"https:\/\/blog.jetbrains.com\/fr\/wp-json\/wp\/v2\/users\/813"}],"replies":[{"embeddable":true,"href":"https:\/\/blog.jetbrains.com\/fr\/wp-json\/wp\/v2\/comments?post=161070"}],"version-history":[{"count":10,"href":"https:\/\/blog.jetbrains.com\/fr\/wp-json\/wp\/v2\/blog\/161070\/revisions"}],"predecessor-version":[{"id":161179,"href":"https:\/\/blog.jetbrains.com\/fr\/wp-json\/wp\/v2\/blog\/161070\/revisions\/161179"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/blog.jetbrains.com\/fr\/wp-json\/wp\/v2\/media\/154835"}],"wp:attachment":[{"href":"https:\/\/blog.jetbrains.com\/fr\/wp-json\/wp\/v2\/media?parent=161070"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/blog.jetbrains.com\/fr\/wp-json\/wp\/v2\/categories?post=161070"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/blog.jetbrains.com\/fr\/wp-json\/wp\/v2\/tags?post=161070"},{"taxonomy":"cross-post-tag","embeddable":true,"href":"https:\/\/blog.jetbrains.com\/fr\/wp-json\/wp\/v2\/cross-post-tag?post=161070"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}