Coding the Art: comment générer des graphiques et des animations dans les projets de conception

Chez JetBrains, nous aimons expérimenter. Les résultats de nos expériences ne sont pas toujours rendus publics, mais nous sommes prêts à partager quelque chose avec vous dès maintenant.

Notre nouveau projet a commencé avec le désir d'automatiser les processus de conception. Pour chaque version du produit, le concepteur doit préparer un grand nombre de supports marketing. En même temps, il est complètement insuffisant de simplement multiplier les graphiques sur différents supports, vous devez être en mesure de faire une variété raisonnable et esthétiquement justifiée dans chaque copie.

L'idée de générer des graphiques à de telles fins n'est pas nouvelle, il est important pour le concepteur d'avoir un contrôle profond et précis sur l'image afin de varier rapidement et de déployer de nouvelles configurations visuelles sans réécriture significative de la structure de génération et le piégeage sans fin des erreurs à différentes étapes du cycle de vie du code.
image

Dans la recherche d'une solution à ce problème, le programmeur s'est associé au concepteur et nous avons obtenu le générateur graphique que nous avons démontré l'année dernière . Le générateur a été conçu non seulement pour le divertissement: nous l'avons utilisé pour créer des écrans de démarrage, des bannières, des impressions sur des T-shirts et autres guirlandes. Le générateur initial n'était capable que d'images statiques; les nœuds joués par la bibliothèque RPD jouaient le rôle d'interface de contrôle.

Cette année, nous avions un besoin urgent d'animation pour les vidéos, les économiseurs d'écran et les bannières interactives. Pour l'animation sur le Web, le JavaScript que nous avons utilisé la dernière fois semblait trop sujet aux erreurs, et nous avons choisi Elm, qui se compile en JS très rapide.

Elm est le langage fonctionnel le plus simple et le plus convivial de la famille ML avec un typage statique, ce qui permet d'écrire du code de travail garanti et de décrire des structures de type de complexité accrue. Depuis sa création, Elm vise les graphiques Web, et parmi les packages proposés dans les premières versions du langage, il y avait un merveilleux elm-collage , et un peu plus tard, le package elm-webgl est apparu, offrant à l'utilisateur non seulement un wrapper minimaliste autour de l'API WebGL, mais aussi un contrôle sur les types d'uniformes / attributs / variables dans les shaders.

code2art.jetbrains.com - ici vous pouvez démarrer le générateur et, après avoir découvert le lecteur de conception, déplacer les paramètres. Vous pouvez envelopper le cadre que vous aimez en .png ou télécharger l'animation en tant que page HTML5 avec les ressources nécessaires.

Nous ne sommes pas responsables du temps que vous passez sans cesse à appuyer sur le bouton «Je me sens chanceux». Si vous aimez les «voyages» visuels, alors c'est un bon endroit pour accrocher pendant longtemps.

Entre autres, nous nous sommes à nouveau permis d'expérimenter une interface dans un langage purement fonctionnel et, en alternative, nous vous proposons une interface à la TRON: code2art.jetbrains.com/#tron
image

Les auteurs du générateur décriront des détails techniques plus approfondis dans un rapport lors de la conférence f (by) à Minsk le 26 janvier.

Le code source du générateur peut être trouvé ici: github.com/JetBrains/elmsfeuer .

Votre équipe JetBrains
La volonté de se développer

Source: https://habr.com/ru/post/fr434796/


All Articles