Une logique fait main dans la création graphique sur le Web

☀ Creative coding

🡲 Processus et usages de la machine

Les langages et les plateformes se sont multipliés, ce qui a amené à une diversification des pratiques en lien avec la programmation. De nouveaux territoires se sont formés, le graphisme devient multidisciplinaire dans le champ du numérique. Au sein de ce nouvel espace, les graphistes évoluent avec facilité d’une technique à l’autre, du Web design, au Web to print, au creative coding. Ce dernier désigne une pratique qui se sert du code comme d’un outil expérimental pour la conception de formes et de motifs graphiques. Plusieurs approches existent, certains utilisent le code comme matériau principal, d’autre le réinvestissent dans divers médias : la production d’objets imprimés (affiches, identité visuelle), l’animation (motion design), les installations ou la performance. Le code apporte aux expérimentations une dimension biphasée, elles sont à la fois interactives : des actions s’effectuent en fonction des commandes, ce qui amène au deuxième aspect, le visuel : on obtient un résultat graphique suite à la lecture du programme.

«La forme est le résultat d’un processus.» 🡲 LUST¹, Interview dans Graphisme en France - code <> outils <> design, n°18, (2012).

🡱 Capture d'écran de la librairie d'outils Fragile Forge. en ligne

Programmer pour créer, construire, former, expérimenter graphiquement, c’est une perspective qui se retrouve chez pas mal d’artistes-designers. Et pour en revenir à la librairie d’instruments Fragile Forge² de Raphaël Bastide, que j'évoquais précédemment, on y trouve plusieurs outils qui manipulent des langages de programmation, principalement HTML et CSS, comme matière première pour créer des compositions graphiques et/ou sonores. Pour illustrer mes propos, je souhaiterais aborder les deux projets suivants : Été et Déclin séquence, qui explicitent le champ d’études que mène Raphaël Bastide. Été, est un programme sonore de live-coding et de composition algorithmique qui reprends les esthétiques d’éditeur de code. Il utilise une police de caractère à chasse fixe, une mise en page en cascade et un code couleur pour mettre en évidence des éléments spécifiques comme les chiffres. La dimension du live-coding impose une temporalité bien précise, l’action doit se passer au présent, ce qui induit une prise en main efficace de l’outil. La manipulation qui se déroule en direct doit être rythmée par des résultats visuels ou sonores immédiats. Souvent, le codage en live a une gamme limitée d’expressivité, car l’écriture du code est lente. L’échelle de l’écriture vient restreindre le performeur, il doit forcément traduire une idée en la tapant, caractère après caractère.

«Avec le code, […] le temps de frappe n'est généralement pas compatible avec le temps de réaction à ce qui se passe.» 🡲 Raphaël Bastide, Graphisme en France - Création, outils, recherche, N°28, (2022).

Été, répond à cette problématique en mêlant live-coding et expression percutante. Pour cela, Raphaël Bastide a déployé un programme qui considère le clavier d'ordinateur comme un instrument de percussion. Le programmeur-performeur est capable, à la fois d’écrire des instructions algorithmiques et des instructions instrumentales temporelles, le tout dans le même environnement de codage. Au travers d’un événement performatif en collaboration avec Cookie Collective³, Raphaël Bastide nous démontre la véracité de son projet. Il réalise une expérience aux multiples médias : projections/sons/animations/live-coding qui rassemble dans une même temporalité, la composition algorithmique et l’improvisation spontanée. Son deuxième projet, Déclin séquence vient également questionner la temporalité, bien que ce ne soit pas du live-coding. Le processus de création s’inscrit dans le temps, la page est constituée de 31 éléments qui ont été développés individuellement chaque jour du mois d’octobre 2020. Raphaël Bastide s’est approprié le protocole du challenge Inktober⁴ pour l’appliquer à sa pratique numérique à l’aide du code. La composition finale est basée sur une version qui utilise des animations et des transitions CSS, augmentée chaque jour. La page est composée de 31 balises qui ont été stylisées individuellement et ajoutées une à une, jour après jour. La temporalité est également présente dans l’objet final et sa visualisation. Un curseur est mis à disposition pour permettre au visiteur de sélectionner un jour spécifique et activer l’élément graphique associé. Sinon, un bouton de lecture permet de parcourir automatiquement toutes les séquences, qui vont s’enchaîner chronologiquement jusqu’à revenir au point de départ et ainsi, créer une boucle. La page se transforme en une composition mouvante, elle représente une temporalité condensée des 30 jours, qui est retranscrite par les outils de programmation. Ici, le processus d’écriture du code, trop lent pour du live-coding, a permis de réduire une période de plusieurs jours et de la matérialiser graphiquement.

🡱 Extrait de la double performance entre Raphaël Bastide et Cookie Collective.

🡱 Capture d'écran du site Déclin séquence. en ligne

Les langages de programmation n’ont pas toujours la même place, ni le même rôle dans toutes les pratiques liées au graphisme. C’est pourquoi, plusieurs pôles se sont formés avec le temps, qui s’affirment et se différencient : création d’outils, Web design, Web to print et creative coding. Ce dernier, se traduisant par «code créatif», décrit un cadre où le code sert avant tout d’outil expérimental pour la conception de formes et de motifs graphiques. Ici, le code n’est pas seulement une technique, il devient le processus de création, une matière que l’on va venir manipuler, modifier, modeler. La création se code et le résultat se génère, la génération devient le produit final après un traitement des informations par la machine. La machine vient remplacer l’outil, elle est celle qui va permettre la lecture du programme intuité par le créateur, c’est d’ailleurs, dans cette phase du processus que les erreurs peuvent se manifester, se voir pour être réparées ou bien exploitées comme matière première dans une création. De nombreux générateurs en tout genre on vu le jour sur le Web, libre à chacun d’utiliser l’élément généré tel quel ou bien de le réinvestir dans une grande variété de médias. En design graphique, ce type d’outil est généralement employé dans la production d’objets imprimés telles que des affiches, des identités (Tooooools) ou encore pour créer des animations (motion design). Comme le propose Space Type Generator réalisé par le motion designer américain Kielm⁵. Le studio de Kielm se concentre sur la création d'outils génératifs pour créer un travail de typographie, d'image et de mouvement sur mesure. Son projet de codage, Space Type Generator, est un outil open source qui permet aux utilisateurs de créer leurs propres expériences de type cinétique. Actuellement, il existe 16 variantes d’animations, formes textuelles et d’autres sont encore à venir. Il a été utilisé dans le monde entier pour toute sorte de création, des vidéoclips aux couvertures de magazines en passant par les peintures murales à grande échelle. La multitude de curseurs rend l’interface ludique et facile à appréhender, chacun d’entre eux est associé à une modification graphique : taille, distorsion, rotation, répétition, etc. De plus, l’utilisateur à la possibilité de rentrer le texte qu’il souhaite, court ou long, il épousera toutes les variantes existantes et pourra être exporté aux formats .png et .gif, pour être réemployé dans divers médias, fixes ou animés, telles que des affiches ou des publications Web.

🡱 Animation GIF d'une génération de texte sur Space type generator.

L’accent est porté sur le processus, comme c’est le cas dans les arts visuels basés sur des outils numériques. L'art génératif et le Software art⁶ exploitent le code comme principal outil de création. Ce premier, est une pratique utilisant les algorithmes pour générer de manière autonome une œuvre. Ici, le code est considéré comme étant une technique, un processus de création qui apporte un résultat final. Tandis que ce deuxième, exploite le code comme matière principale pour constituer l'œuvre finale. Tous deux, sont des sous-culture de l'informatique appartenant au champ des arts visuels, tout comme la Scène démo⁷. Celle-ci a pour but la création artistique sous forme de programme informatique, fondée sur les trois domaines que sont : la musique assistée par ordinateur, l’infographie et la programmation. Dans cette approche, on utilise le terme d'Intro⁸ pour parler d'une démo de taille réduite, généralement moins d'une centaine de kilooctets. Les démos sont des productions informatiques mêlant graphismes, musiques et animation dans un but esthétique ou technique. On peut les comparer à des clips musicaux. Cette pratique se déroule généralement dans un contexte de compétition, dans laquelle des groupes s'affrontent pour déterminer la meilleure démo selon des consignes précises.

🡱 Visuel d'une démo provenant du site d'archive. en ligne

Les sessions de codes proposées par Sundaysites⁹ offrent un contexte de création propice à l’expérimentation par le code, principalement les langages HTML et CSS, des basiques de la programmation, mais riches en ressources. L’expérience est contrainte par une limite de temps (2h) et une consigne commune à tous les participants, ce qui accentue l’idée d’expérimenter. L’objectif est d’engager la pratique du code, la réflexion se fait en même temps que de faire, elle passe au second plan pour laisser place à l’erreur, au test, au bricolage. Au sein des archives, on va retrouver des pages Web très variées, parfois inachevées, cassées, mais surtout pleines de personnalité, extravagantes, hors-normes, interactives et/ou contemplatives. Pour illustrer ces deux dernières caractéristiques, j’aimerais vous présenter deux sites réalisés lors des sessions code, le premier est une page Web, «Colorfulplant»¹⁰, proposant un univers coloré qui se décompose en plusieurs couches. Les différentes strates sont matérialisées par des cercles, de plus en plus petits, les uns dans les autres. La position de la souris est l’unique médium qui vient activer les éléments de la page, en fonction de si elle se trouve en haut ou en bas, l’image en fond défile comme pour partir d’un début et arriver à une fin. De plus, un changement progressif de la taille des cercles s’effectue lorsque la souris survole l’un d’entre eux. L’aspect interactif de ce travail reste techniquement simple, mais malgré tout, la multitude de couleurs et l’enchevêtrement des deux animations créent des effets graphiques captivants.

🡱 Séquençage des interactions avec le curseur sur Colorfulplant. en ligne

Le second exemple, «Poem-club», convoque essentiellement la contemplation du visiteur. Ce site propose une variété de pages, chacune d’entre elles met en page un poème dans des tonalités différentes. Larissa Pham¹¹ est la créatrice de ce projet, mais également des poèmes qu’elle a décidé de mettre en lumière et en mouvement au travers du code. Ses écrits prennent place dans des images-vidéos, accompagnés d’un système de narration qui active la lecture, soit la page entame un défilement automatique ou bien les vers des poèmes se succèdent tels des sous-titres. Ici, l’utilisation du code amène une temporalité à chacun des écrits, le lecteur se voit engagé dans une cadence à suivre, un rythme pour se laisser porter.

🡱 Captures d'écran du site Poem-club. en ligne

🡱 Captures d'écran du site Poem-club. en ligne

De nombreux artistes s’approprient le code pour générer un art, certains s’accordent à penser que laisser cours aux glitch, aux bugs, peut donner des formes graphiques expérimentales exploitables, le résultat par l’erreur. Tandis que d’autres exploitent l’efficacité de la matière programmable pour atteindre une complexité et une précision inégalable par la main de l’homme. Dans cet esprit, on pourrait citer Ph4se Space¹² qui est un projet créatif multimédia réalisé par l’artiste et programmatrice anglaise Hannah. Ses projets couvrent l'art audiovisuel, la production musicale, l'électronique, la programmation et l'art génératif. Elle exploite plusieurs technologies, notamment P5js¹³ et Arduino. À travers ces outils de programmation, elle expérimente l’art génératif et publie ses créations en open source. Je qualifie ses sketchs P5js comme caractéristiques de l’art génératif, on retrouve beaucoup de formes géométriques, une certaine régularité dans les grilles utilisées, cela crée des volumes et donne l’illusion d’un travail en 3D. Un protocole similaire à toutes ses expérimentations se ressent, seule la forme répétée change : un trait, une ligne, un point, un cube, etc. L’élément se voit répété pour faire apparaître une grille déformée, c’est là que la génération intervient, les lignes de programme vont calculer la position de chaque forme afin de créer une variété de grilles. Cette part d’aléatoire va permettre à l’artiste de construire des séries d’images, sans jamais retrouver le même résultat graphique. Dans le même fonctionnement, il existe Flow Lines de Maksim Surguy¹⁴, un outil open source, en ligne qui est un générateur SVG spécifique pour composer avec des vecteurs, faire de l’art vectoriel. Ici, le motif répété est un segment sur lequel plusieurs curseurs vont venir agir au niveau de son apparence, pour modifier l’épaisseur, la distance entre les répétitions, le nombre de sections du segment, en plus de la couleur du trait et du fond. Le code vient retranscrire des formules mathématiques pour générer un nombre infini d'œuvres d'art vectorielles. Pour que cela reste accessible à tous, un bouton «Randomize» est à disposition et permet de construire aléatoirement une multitude de formules tout en générant le rendu visuel de celles-ci. Pour les plus expérimentés, il est tout à fait possible d’entrer sa propre formule et de composer graphiquement avec des additions, des soustractions, des x/y, ou encore des cos()/sin(). Lors de l’exportation, la création garde son format de SVG, ce qui va permettre aux utilisateurs de l’implanter dans des supports Web et d’avoir la liberté d’y appliquer des modifications en externe de l’outil d’origine, comme l’animer.

🡱 Expérimentations graphiques avec l'outil Flow Lines. en ligne

Les expérimentations qui découlent du creative coding sont à la fois visuelles et interactives (à différents niveaux). Cette pratique a participé à un renouvellement des formes graphiques, nourrie par les spécificités du code. L’usage de la programmation se fait sous la forme de bricolage, le code est un matériau avec ses propres tendances qu’il est nécessaire d’apprendre pour pouvoir dialoguer avec, découvrir ses configurations pour envisager/valoriser les accidents. Mais également, de créer des règles qui viendront fixer des limites au processus de création. Ensuite, un ordinateur suivra ces règles pour produire de nouvelles formes, œuvres, compositions.