L’objectif de cet article est de partager une liste de ressources, de toute évidence non exhaustive, qui vous permettra peut-être de découvrir de nouveaux usages, de nouvelles façon de créer avec les machines à commande numérique (traceur, brodeuse, découpeuse, graveuse…) et de mettre un pied dans le code créatif ! L’utilisation d’algorithmes pour générer des designs 2D constitués de lignes qui seront ensuite tracées, découpées, gravées ou brodées permet de fabriquer des objets ou œuvres uniques.

Code créatif et sortie plastique

Si le mouvement du “creative coding” est récent dans la mesure où il se popularise à la suite d’une publication en 2004 de John Maeda alors enseignant au Media Lab du MIT, on le pratique depuis les premiers temps de l’informatique. Des artistes pionniers autour des années 60 (Vera Molnar, Manfred Mohr, George Nees, …) utilisent déjà les traceurs à des fins créatives. Des années 1950 aux années 1980, les traceurs à plume ou table traçante étaient d’ailleurs le seul choix possible pour obtenir une sortie graphique de qualité à partir d’ordinateurs. Ces traceurs ont été supplantés par l’arrivée de technologies d’impression abordables – jet d’encre et laser. 

Aujourd’hui grâce aux fablab et à la démocratisation de l’électronique libre, des machines à commande numérique de plus en plus sophistiquées et abordables permettent de découper quantité de matériaux mais aussi de graver, broder, créer en volume, etc… Autant de manière de s’exprimer pour les artistes qui ont toujours su s’emparer des nouvelles technologies.

Quelques artistes qui mixent art et ingénierie

Le Studio Ibbini crée des sculptures complexes de papier ou bois découpées au laser. Les motifs ornementaux traditionnels ou contemporains sont générés par algorithmes. 

L’architecte allemand Michael Hansmeyer utilise des algorithmes pour produire des formes architecturales imprimées en 3D souvent monumentales comme celle du décor d’opéra de La Flûte enchantée de Romeo Castellucci.

Autour de la broderie et du tricot numérique, certains projets se démarquent comme celui du Tricodeur de Louis Eveillard ou celui de Nadia Campo Woytuk : Softwear blog où les motifs sont générés de manière aléatoire avec un code en p5.js.

Pour découvrir l’univers des artistes génératifs utilisant les traceurs à stylos, je vous invite à suivre le Hashtag “plottertwitter”. Beaucoup rivalisent d’ingéniosité pour détourner, réinventer, hacker le dessin avec une machine. Cette pratique pourtant ancienne a connu un regain d’intérêt qui s’est encore affirmée avec le phénomène “NFT” et les séries d’œuvres hybrides (un dessin physique est vendu avec sa version numérique immatérielle). Observer une machine fabriquer une œuvre d’art, en manipulant des matériaux familiers comme l’encre et le papier reste une expérience étrange au pouvoir d’attraction sans cesse renouvelé.

Arts génératifs

L’idée générale du design génératif, l’une des manières les plus répandues de créer avec du code, est de fabriquer une machine (généralement un algorithme, une suite d’instructions) dont on détermine le comportement à l’avance.
Derrière une œuvre d’art générative, il y a un processus qui intègre un comportement aléatoire ou semi-aléatoire dans un ensemble défini de règles mathématiques.

Laissant ainsi une part de la création au hasard, l’artiste se concentre sur la définition des règles que l’ordinateur devra ensuite appliquer, générant une œuvre différente et unique à chaque lancement du programme via un simple clic de souris par exemple.

La mention suivante accompagne ainsi souvent une œuvre d’art générative tracée puis exposée, par exemple, dans une galerie d’art :
“A series of 25 prints was produced, on A4 Hahnemühle German Etching paper. The seeds were selected by the artist.”  Les “graines” (seeds) sont des exemplaires uniques de l’œuvre produites à chaque lancement du programme.
Ces artistes numériques ont tendance à privilégier le concept (le code) à la réalisation. Beaucoup ont comme référence les dessins muraux de Sol Lewitt pour qui le processus générant les œuvres est plus important que le design de l’œuvre.  

Des générateurs basés sur des algorithmes (avec export SVG)

L’interface de ces outils de type paramétrique est souvent conçue pour encourager l’exploration par le jeu : une manière rapide de créer une œuvre avec votre machine. Cette sélection d’outils en ligne et gratuits offre la possibilité d’exporter en SVG* les tracés formés de lignes vectorielles d’une seule unité d’épaisseur à des fins de traçage / gravure laser / usinage CNC.

• Flow Lines et Rad-lines de Maks Surguy génèrent des flux de lignes au moyen de formules mathématiques.
• UJI – Un superbe générateur très complet. L’auteur, Noah Doersing, détaille son utilisation  dans cet article. Pensez à limiter le nombre de lignes !
• Tinkersynth de Joshua Comeau – Pour introduire l’art génératif de manière ludique.
• PlotterFun de Tim Alex Jacobs – Un outil qui transforme une image en lignes. Pour les puristes, avec ce type de générateur, on s’écarte de l’art algorithmique puisque la source est une image matricielle. Il y a néanmoins bien sûr un processus algorithmique pour interpréter les données de l’image. L’amplitude des lignes, ou ondes, est différente selon les zones sombres et les zones claires. Ces générateurs figuratifs mériteraient un autre article…

*Remarque sur le format vectoriel SVG : Contrairement aux fichiers pixellisés comme les JPEG, les fichiers vectoriels comme les SVG décrivent des images avec des formules mathématiques basées sur des points et des lignes dans une grille. Ce principe de grille et de coordonnées cartésiennes (x, y, z) est aussi celui utilisé par les machines à commande numérique. L’un des avantages de ce format est que l’on peut redimensionner l’image sans jamais perdre en qualité. Il est souvent employé pour afficher des illustrations 2D sur des sites web d’autant plus facilement que les navigateurs modernes lisent parfaitement ce format de fichier. Il est modifiable dans un logiciel tel que Illustrator ou Inkscape. Ce dernier peut ainsi être utilisé pour “nettoyer” le fichier brut ou créer des calques de couleur avant envoi vers la machine à commande numérique.

Créer avec du code : Processing et p5.js

Les générateurs ci-dessus sont efficaces pour produire des œuvres uniques selon une méthode paramétrique. Derrière ces curseurs, il y a bien des algorithmes mais leur contrôle reste partiel. Dans un contexte d’initiation qui est généralement le cas en bibliothèque, cela peut suffire. Néanmoins, il est possible de s’initier à la création algorithmique ou générative avec des outils comme Processing et sa déclinaison web p5.js. C’est aussi une bonne manière de s’initier au code. 

Depuis les années 2000, à la suite du mouvement de l’open-source, une petite révolution s’est opérée avec des logiciels comme Processing créé qui vont faciliter pour toute une génération d’artistes et designers l’accès au code comme moyen d’expression. Quand on parle création numérique et design, on pense naturellement aux logiciels leaders, la suite Adobe en tête. Pour de nombreux créateurs, designers, ce monopole est problématique car il restreint la créativité,  standardise, donne “l’illusion d’une exhaustivité” dans les outils. Sur ce sujet, lire cet article de Kevin Donnot. La promesse de logiciel comme Processing est de reprendre le contrôle sur la création, voire de développer ses propres outils. 

p5.js est une bibliothèque open source Javascript, une réinterprétation de Processing pour le web qui permet de faire de la programmation graphique facilement d’autant plus depuis l’apparition de l’éditeur. Nul besoin d’installation, tout se fait dans un navigateur et vous voyez immédiatement le résultat de vos “sketches” que vous pouvez sauvegarder comme dans un carnet de croquis.
Une ligne de code place un cercle, une autre change sa couleur et une troisième l’anime.

La complexité apparente de beaucoup d’œuvres masque en réalité une superposition de tâches ou motifs élémentaires. Avec des outils/langages dédiés à la création graphique comme Processing ou p5.js, tout est d’abord affaire de coordonnées sur un cadre x, y :
rect(50, 25, 100, 70) ;
Cette ligne dessine un rectangle avec son coin supérieur gauche aux coordonnées (50, 25) et avec une largeur de 100 pixels et une hauteur de 70 pixels.

Une forme simple, comme ce rectangle, peut ensuite être manipulée par de simples opérations mathématiques comme une multiplication à laquelle on ajoute des variations d’angles, d’échelles. On peut ainsi, en quelques lignes de codes, reproduire les courbes typiques d’un spirographe.
Pour apprendre à utiliser p5.js, je vous conseille cette ressource créée par le Pôle Design du lycée Le Corbusier ou la formation de Bérenger Recoules.
Si vous souhaitez découvrir l’univers des algorithmes et leur application graphique avec Processing et p5.js, la chaîne Youtube de Daniel Shiffman avec ses “coding challenge” est une valeur sûre.

On peut ainsi rapidement mettre en œuvre, y compris dans le cadre d’un atelier pour débutants, des concepts tels que le hasard avec la fonction “random”, la générativité avec le principe des variables et des boucles ainsi que l’interactivité avec la souris, webcam…

Exemple avec l’algorithme “10Print”

On ne connaît pas l’auteur de ce programme “Basic” à une ligne qui a connu beaucoup de variantes. On le trouve pour la première fois dans le guide de l’utilisateur de l’ordinateur « Commodore 64 » publié en 1982.
Malgré, ou grâce, à sa simplicité c’est un bon exemple d’art génératif à la fois accessible, modulable et au rendu graphique intéressant. Si vous souhaitez en savoir plus, lisez (10 Print Chr$(205.5+rnd(1)); : Goto 10). C’est le fruit de la collaboration de 10 auteurs, dont la version pdf en anglais est disponible gratuitement sur 10print.org. Contrairement à ce que le titre pourrait faire penser, il y est question autant de code que de musique, de danse, de textile ou de mythologie grecque !

En langage Basic la commande “10 Print Chr$(205.5+rnd(1)); : Goto 10” crée des lignes composées uniquement de deux caractères : slash, ou antislash aléatoirement choisis (par une fonction “random”, ici “rnd”). Bien que le programme soit très simple, l’impact graphique de type labyrinthe très détaillé est saisissant. Une infinité de déclinaisons est possible, et puis le rendu linéaire permet d’envisager une sortie physique avec, par exemple, un traceur à stylo : 

On peut adapter “10Print” avec p5.js de différente façon. Cela pourra prendre la forme de ce sketch que j’ai commenté pour en faciliter la compréhension et que je vous invite à personnaliser en diminuant par exemple la variable “espace” ou en jouant avec les variables “random”.
Pour exporter un fichier STL avec p5.js, utilisez cette méthode ou ce lien de ma sketchothèque.

Après avoir intégré quelques bases du dessin avec p5.js, il est temps d’observer puis modifier des codes sources d’œuvres en licence libre comme ceux que vous pourrez trouver sur OpenProcessing. C’est une « sketchothèque » dont les codes sont essentiellement sous licence Creative Commons. Le site est aussi un éditeur p5.js, ce qui en fait un lieu confortable pour tester vos idées et apprendre avec celles de la communauté. Voir, par exemple, le portfolio de “JCG” (avec export SVG intégré) ou celui de Roni Kaufman. Ce dernier a réalisé avec p5.js des variantes étonnantes du pavage (ou tuiles) de Truchet.