Code developed during a live stream on <a href="https://twitch.tv/greweb">https://twitch.tv/greweb</a>
This is the first prototype of a possible series of similar plots, this is exploring the &quot;cordon&quot; (= cords/rope in French) primitive that was developped on <a href="https://greweb.me/plots/478">https://greweb.me/plots/478</a>

This is the first prototype of a possible series of similar plots, this is exploring the 'cordon' (= cords/rope in French) primitive that was developed on https://greweb.me/plots/478

Cordons (Prototype 1)

Physical version of #11 mint of Plottable Fibers.
<img src="/images/plots/479z.jpg" width="100%"/>

Offered randomly from the tweets of last week sharing a collected plottable.
Done during a live stream on <a href="https://twitch.tv/greweb">https://twitch.tv/greweb</a>

Physical version of #11 mint of Plottable Fibers.

Plottable Fibers #11

<video src="/images/plots/478-frames.mp4" width="100%" controls autoplay muted loop></video>
<blockquote>
NB: This article is in French because it was made in context of a French contest. I deeply explain (in French) all the concepts at stake.
</blockquote>
<h2 id="le-résultat">Le résultat</h2>
&#39;Transhumanist singularity&#39; est une boucle animée de 4 plots A3 présentant une version transhumanisme de l&#39;Homme de Vitruve qui nage dans un réseau de cerveaux en symbiose.
J&#39;ai voulu explorer l&#39;idée que le transhumanisme, bien que souvent présenté comme une dérive individualiste, peut tourner vers une forme de singularité. L&#39;oeuvre est suffisemment abstraite et minimaliste pour laisser place à plus d&#39;interprétations. L&#39;idée de cerveaux conservés sans leur corps s&#39;inspire d&#39;une des nouvelles de L&#39;arbre des possibles (Bernard Werber).
zooms animés sur le centre:
<video src="/images/plots/478-z3.mp4" width="100%" controls autoplay muted loop></video>
<hr>
Une création &quot;digital&quot;...
Cette création a été entièrement développée sur Twitch. L&#39;oeuvre &quot;digital&quot; est en réalité un générateur de SVG (au sens <a href="https://en.wikipedia.org/wiki/Generative_art">art génératif</a> du terme) qui pour une graine (seed) donnée génère 4 fichier SVGs.
Même si des croquis ont été dessinés pour travailler sur l&#39;idée, la réalisation finale est en essence un programme, entièrement développé avec du code créatif, qui a la capacité de générer une infinité de variantes (c&#39;est un générateur de SVG, au sens <a href="https://en.wikipedia.org/wiki/Generative_art">art génératif</a> du terme qui pour une graine donnée donne un résultat différent). Il s&#39;agit de composer un ensemble d&#39;algorithmes et de diverses techniques au service de l&#39;idée.
...qui est aussi une création physique...
Il faudra ensuite compter environ 20 heures de plus pour la réalisation physique. Comme une grande partie de mes créations (<a href="/plots">https://greweb.me/plots</a>), un robot traceur (plus généralement appelé &quot;plotter&quot; en anglais) est utilisé pour dessiner tous les traits du SVG au stylo plume sur papier aquarelle A3. Chaque frame utilise 3 encres, calques dessinés l&#39;un après l&#39;autre: Diamine Amber (yellow), Diamine Pumpkin (orange) and Diamine Bloody Brexit (dark blue).
<iframe width="100%" height="380" src="https://www.youtube.com/embed/AzGMNyjaRts?rel=0" title="YouTube video player" frameborder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowfullscreen></iframe>

...qui redevient digitale, sous forme d&#39;animation!
en dessinant 4 frames proches les unes des autres, nous pouvons recréer un dessin animé pour produire le résultat partagé plus haut.
C&#39;est la technique que j&#39;appelle &quot;plot loop&quot;, explorée l&#39;an dernier – autres créations de ce type: <a href="https://greweb.me/plots/tags/plotloop">https://greweb.me/plots/tags/plotloop</a> – le format A3 est néanmoins une première.
<video src="/images/plots/478-artist.mp4" width="50%" controls autoplay muted loop></video><video src="/images/plots/478-z4.mp4" width="100%" controls autoplay muted loop></video>
<h3 id="quelques-statistiques">Quelques statistiques</h3>
<ul>
<li>20 heures de conception (streamés)</li>
<li>environ 24 heures de temps de tracage (plotting)</li>
<li>Chaque frame A3 est composée de près de 35 000 traits, tracés en 5 heures, parcourant ainsi près de 300 mètres.</li>
<li>Les 4 frames ont donc été tracées en plus de 20 heures et pour un total d&#39;environ 1&#39;200 mètres d&#39;encre!</li>
</ul>
<blockquote>
Pour donner une idée de la quantité d&#39;encre utilisé: les 4 heures et 200 mètres d&#39;encre de jaune correspondent à cette quantité vidée après utilisation:
<img src="/images/plots/478_ink.jpg" width="50%"/>
</blockquote>
<hr>
<h2 id="le-contexte">Le contexte</h2>
Cette semaine de mi Avril a eu lieu le concours <a href="https://www.weekandart.com/">&quot;Week and Art&quot; (WAT)</a> qui a réuni des centaines de streamers (habitués à la catégorie Art de Twitch) et participants non-streamers également. Vous savez peut-être que certaines de mes créations depuis 2021 sont partagés sur <a href="https://twitch.tv/greweb">https://twitch.tv/greweb</a>. Le concours était très intéressant pour continuer de démocratiser l&#39;expension de l&#39;art sur Twitch et de créer des liens entre artistes aux styles très variés.
J&#39;ai streamé plusieurs journées sur <a href="https://twitch.tv/greweb">twitch.tv/greweb</a> pour avancer doucement sur plusieurs idées en développant mon <a href="https://en.wikipedia.org/wiki/Generative_art">générateur d&#39;art génératif</a> tout en l&#39;éprouvant les traits en utilisant ma machine de dessin <a href="https://www.axidraw.com/">AxiDraw A3</a> qui est en réalité un robot sur lequel je met des stylos plumes. Cette technique appelé &quot;plotting&quot; est utilisé par de nombreux artistes, qui partagent quotidiennement leur créations sur <a href="https://twitter.com/search?q=%23plottertwitter">#plottertwitter</a>.
<video controls src="/images/plots/478-plotlive.mp4" width="100%"></video>
Le thème de cette année était le Transhumanisme ce qui épousait particulièrement bien le genre de technique que j&#39;utilise ici: le <a href="https://en.wikipedia.org/wiki/Creative_coding">code créatif</a> et le <a href="/plots">&quot;plotting&quot;</a>.
J&#39;avais pour but de participer à la catégorie Digital Art du concours, l&#39;art génératif étant une branche de l&#39;<a href="https://en.wikipedia.org/wiki/Digital_art">art digital</a>. C&#39;était clairement un peu audacieux et expérimental du fait de la technique et des outils utilisés pour ce concours. Etant le seul à utiliser ce genre de technique, l&#39;organisation a, au cours du concours, jugé que je ne rentrais pas dans la catégorie. Le règlement a été précisé sur le fait qu&#39;il faut une &quot;base de dessin&quot; dans la création afin que le jury puisse juger de résultats &quot;similaires&quot; ce qui est louable.
Il est difficile de catégoriser le monde de l&#39;art. L&#39;art a toujours été &quot;disruptif&quot; et je l&#39;ai été cette fois ci. L&#39;art génératif est encore à ses tout débuts comme le montre aussi la surprise de la communauté, je remercie tout les viewers qui sont arrivés sur mon stream et les nouvelles connaissances que j&#39;ai pu faire. Je remercie également l&#39;organisation qui m&#39;a bien accompagné.
L&#39;art génératif est partout, c&#39;était une opportunité de le montrer en écrivant du code, mais en réalité nous utilisons tous du génératif sans le savoir. Le logiciel de dessin que vous utilisez (par exemple un pinceau), les textures que vous pouvez trouver sur Blender (notamment la génération de textures procédurales),... C&#39;est un outil à la disposition de l&#39;art numérique.
Les contraintes que je me suis imposé n&#39;ont pas facilité le processus de création, et mon oeuvre reste très modeste (minimaliste et psychédélique). Créer dans un contexte stressant comme dans une conférence (comme j&#39;ai pu avoir l&#39;opportunité de le faire début Avril <a href="http://greweb.me/plots/448">http://greweb.me/plots/448</a>) et ici sur Twitch apporte aussi sa complexité. C&#39;était en tout cas un plaisir de passer plus de temps à expliquer ces méthodes que peu de viewers connaissaient.
<video loop autoplay controls src="/images/plots/478-cameras.mp4" width="100%"></video>
Il n&#39;ai pas aisé de maitriser le résultat d&#39;un générateur, on utilise des algorithmes, mais dans le cas du plotting, on doit penser aux contraintes du robot, des encres, du stylo et du papier.
<h2 id="le-processus-de-création">Le processus de création</h2>
J&#39;ai l&#39;habitude de faire des motifs abstraits, des formes un peu fractales, qui tendent de se rapprocher de la nature avec des nuages de bruits, en jouant avec la symétrie pour recréer aléatoirement des formes reconnaissables,...
<img width="50%" src="/images/2021/08/artist-1.jpg" /><img width="50%" src="/images/2021/08/artist-2.jpg" />
Le plus gros challenge pour moi dans le contexte de ce concours était d&#39;aller vers un travail de composition avec des formes un peu plus &quot;dessinés&quot; et organiques. Il est aisé d&#39;appliquer un algorithme pour dupliquer plein de fois une primitive, il est moins aisé d&#39;avoir une composition bien équilibrée. Le résultat final aurait peut-être mérité un peu plus de travail à jouer avec le chaos pour composer la scène finale.
<h3 id="tout-commence-avec-des-croquis">Tout commence avec des croquis</h3>
On a une idée, on la couche déjà sur papier. Cela permet d&#39;avoir un but, et on peut commencer à réfléchir quelle technique on utilisera pour chaque élément de la scène.
Ensuite, le gros du travail est itératif et a eu lieu plusieurs jours pour tenter différentes approches et confronter le but théorique à la réalité technique.
Un exemple trivial était de mesurer les proportions de l&#39;Homme de Vitruve et de les implanter dans le code.
<img width="100%" src="/images/plots/478-mesure.jpg" />

<h3 id="lart-génératif-choisir-lélu-parmi-des-variantes-aléatoires">L&#39;art génératif, choisir l&#39;élu parmi des variantes aléatoires</h3>
L&#39;art génératif permet, avec un même générateur, de générer une infinité de variantes en changeant la &quot;seed&quot; en entrée de l&#39;algorithme utilisé.
J&#39;ai par exemple, passé du temps pour manuellement sélectionner la tête principale que je voulais parmis une centaines de variantes aléatoires.
<video loop autoplay controls src="/images/plots/478-generations.mp4" width="100%"></video>
Il est intéressant de voir que des variations de la tête principale vont se retrouver dans le fond de la pièce complète.
L&#39;art génératif ne consiste pas à juste écrire des algorithmes. Il y a en réalité beaucoup de tests à faire et il faut ajuster beaucoup de paramètres pour choisir la zone de variations qui nous intéresse d&#39;explorer. On itère beaucoup de fois jusqu&#39;à en être satisfait.
La totalité du code que j&#39;ai créé est originale, certaines techniques comme <a href="https://en.wikipedia.org/wiki/Travelling_salesman_problem">TSP</a> utilisent des bibliothèques Rust, language de programmation utilisé.
<h3 id="le-code-est-ma-plume">Le code est ma plume</h3>
Ce code créatif a consisté à développer un ensemble de primitives, élément &quot;atomique&quot; de la création, pour ensuite les utiliser tous ensemble pour former l&#39;oeuvre complète.
Une primitive peut être par exemple une texture de &quot;brush&quot; qu&#39;un logiciel de dessin va proposer pour dessiner. Elle peut aussi consister à offrir une technique de &quot;placement&quot; que l&#39;on peut composer avec d&#39;autres primitives, récursivement.
Pour réaliser ma création, mon parti pris est de ne jamais dessiner &quot;moi-même&quot; mais d&#39;utiliser du code pour le faire. Cela complique certaines choses et en simplifie d&#39;autres: il est facile d&#39;avoir quelque de mathématique, géométrique et ordonné mais plus difficile d&#39;avoir quelque chose de chaotique et organique.
Au final, j&#39;ai revisité mon baggage de techniques explorées ces précédentes années. Certaines techniques ont été étendues, de nouvelles primitives ont été développés,... Voici quelques primitives notables que l&#39;on peut retrouver:
<ul>
<li>Les particules de &quot;Storm&quot; (<a href="/plots/394">/plots/394</a>, <a href="/plots/312">/plots/312</a>).</li>
</ul>
<img width="50%" src="/images/plots/394-thumbnail.jpg" /><img width="50%" src="/images/plots/312-thumbnail.jpg" />
<ul>
<li>Les &quot;têtes&quot; comme la vidéo précédente l&#39;a montré. Elles sont basés sur des explorations similaires (néanmoins différentes) comme &quot;Evolving Bug&quot; (<a href="/plots/311">/plots/311</a>, <a href="/plots/324">/plots/324</a>)</li>
</ul>
<img width="50%" src="/images/plots/311-thumbnail.jpg" /><img width="50%" src="/images/plots/324-thumbnail.jpg" />
<ul>
<li>La technique du &quot;circle packing&quot; et &quot;TSP&quot; comme exploré dans &quot;Yellow yarn balls&quot; (<a href="/plots/381">/plots/381</a>, <a href="/plots/371">/plots/371</a>)</li>
</ul>
<img width="50%" src="/images/plots/381-thumbnail.jpg" /><img width="50%" src="/images/plots/371-thumbnail.jpg" />
<ul>
<li>Les &quot;cordons&quot; fût la principale innovation de cette création. J&#39;ai écris de bout en bout un algorithme qui permet à des lignes de &quot;tourner&quot; et d&#39;osciller autour d&#39;un chemin, ce qui a été la base pour fabriquer: les connections entre les cerveaux, le cadre, le cercle, le carré,...</li>
</ul>
<video loop autoplay controls src="/images/plots/478-algo-lines.mp4" width="100%"></video>
...mais aussi les bras et jambes de l&#39;homme central.
<video loop autoplay controls src="/images/plots/478-human-step1.mp4" width="100%"></video>
Il était ensuite intéressant de rajouter encore plus de lignes et d&#39;aléatoire pour avoir des formes moins géométriques et un peu plus chaotique:
<video loop autoplay controls src="/images/plots/478-human-step2.mp4" width="100%"></video>
Résultat physique avec l&#39;encre aux reflets rouges:
<img src="/images/plots/478-bodyzoom.jpg" width="100%"/>

<h3 id="prototype-robotique-dans-le-monde-physique">Prototype robotique dans le monde physique</h3>
Le médium utilisé (les différentes encres, stylo plumes sur un papier aquarelle) est passionnant mais aussi assez contraignant. Il faut à plusieurs reprises adapter le nombre de traits pour ne pas &quot;traverser&quot; la feuille. C&#39;est pour cette raison que j&#39;ai réalisé plusieurs prototypes intermédiaires:
<a href="/plots/474"><img src="/images/plots/474-thumbnail.jpg" width="50%"/></a><a href="/plots/475"><img src="/images/plots/475-thumbnail.jpg" width="50%"/></a><a href="/plots/476"><img src="/images/plots/476-thumbnail.jpg" width="59%"/></a><a href="/plots/477"><img src="/images/plots/477-square-thumbnail.jpg" width="41%" /></a>
<h3 id="fabrication-dune-animation-retour-dans-le-monde-digital-plot-loop">Fabrication d&#39;une animation, retour dans le monde digital (&quot;Plot Loop&quot;)</h3>
Réaliser une animation en art génératif est assez simple: cela consiste à faire légèrement varier un paramètre d&#39;une frame à l&#39;autre (= au cours du temps). En revanche, réaliser une boucle est plus compliqué car il faut que la dernière image soit proche de la première pour ne pas &quot;sauter&quot; dans le temps. Une façon de résoudre ce problème est de faire un mouvement de va-et-vient, mais ce mouvement n&#39;est pas souvent intéressant ni voulu.
Pour faire une boucle, il faut repartir des bases: faire varier un ou plusieurs paramètres en suivant un cercle: tourner autour d&#39;un cercle permet précisement de revenir à son point de départ. Ainsi, nous pouvons utiliser une projection polaire, par exemple pour tourner dans un bruit de Perlin:
<img src="/images/noiseloop.png" width="50%"/>

Pendant une nuit, mon ordinateur a calculé des centaines de résultats et j&#39;ai choisi, parmi ces animations théoriques celui qui me semblait le plus intéressant.
<img src="/images/plots/478-choices.jpg" width="100%"/>

Une fois l&#39;animation choisie, il a fallu la réaliser pendant une vingtaines d&#39;heures avec le robot, les feuilles de papier, les stylos plumes et les encres. Les photos, une fois normalisées, peuvent enfin former le dessin animé.
Il est aussi possible de montrer des versions localisés:
PLUSIEURS ANIMATIONS
<h2 id="en-conclusion">En conclusion</h2>
Par le passé, j&#39;ai participé à plusieurs game jams (18 jeux développés et publiés sur <a href="https://greweb.itch.io/">https://greweb.itch.io/</a>), évènements de démoscènes, et récemment <a href="https://greweb.me/plots/tags/plotparty">#plotparty</a> et <a href="https://genuary.art/prompts">genuart</a>.
WeekandArt fût une expérience sociale très enrichissante, j&#39;ai eu plusieurs occasions de rencontrer et discuter avec d&#39;autres artistes sur Twitch et Discord. C&#39;était très intéressant d&#39;aller voir les autres participants avancer sur leur projets respectifs notamment <a href="https://www.twitch.tv/Adma357">Adma357</a>, <a href="https://www.twitch.tv/LouisGrievesArt">LouisGrievesArt</a>, <a href="https://www.twitch.tv/space_thomalice">space_thomalice</a>, <a href="https://www.twitch.tv/animanaute">animanaute</a>, <a href="https://www.twitch.tv/supertouffe">supertouffe</a>, <a href="https://www.twitch.tv/i2g3z">i2g3z</a>, et beaucoup d&#39;autres.
Je n&#39;ai jamais ressenti une telle dimension sociale dans la participation d&#39;une gamejam/contest que permet en réalité le streaming. Cela m&#39;a redonné le goût de participer à des game jams comme <a href="https://ldjam.com/">ludumdare</a>, et il est possible que je commencer bientôt à streamer le développement de jeux sur Twitch.
C&#39;était si intéressant pour moi de partager sur Twitch des techniques méconnus avec des artistes traditionnels. Merci à tous!
J&#39;y fus!
<img src="/images/plots/478-z1.jpg" width="100%"/><video src="/images/plots/478-z1.mp4" width="100%" controls autoplay muted loop></video><video src="/images/plots/478-z2.mp4" width="100%" controls autoplay muted loop></video>

'Transhumanist singularity' est une boucle animée de 4 plots A3 présentant une version transhumanisme de l'Homme de Vitruve qui nage dans un réseau de cerveaux en symbiose.