Du code au réel — Week 3 : Recherche, des rectangles et des lignes
Le rythme est un peu décalé suite à un retard dans la publication de l’article de la semaine précédente — comme celui-ci en fait. J’attaque donc la semaine par un peu de recherches pour le thème de l’installation que je vais réaliser à la fin de ce projet.
— Recherches
La première idée, qui me reste en tête depuis mon récent voyage à Amsterdam et un passage au Nxt Museum, est de créer une expérience tournée vers l’espace, et plus particulièrement les trous noirs. Ce sont des entités spatiales fascinantes, entourées de tellement de mystères et de théories. Le plus gros challenge en p5.js serait, pour moi, de reproduire le système de gravité unique des trous noirs. Tout ce qui gravite trop proche est attiré par le trou noir, mais si on se trouve à une distance suffisante, l’objet n’est pas attiré. Les représentations de la gravité autour des trous noirs sont tout de même impressionnantes, et recréer ce système serait le plus complexe dans cette idée de mon point de vue, comme dit précédemment.
La deuxième idée serait quelque chose d’un peu plus proche de nous, et pouvant être observé dans les régions à proximité des pôles magnétiques de la Terre : les aurores polaires, ou aurores boréales. C’est un phénomène naturel qui me fascine, et pouvoir proposer une représentation dans une installation immersive me ferait plaisir. Le caractère qui semble aléatoire des mouvements dans le temps des aurores pourrait être, dans une première réflexion, créer à partir d’un noise, mappé entre certaines valeurs. J’en suis arrivé à cette idée, après avoir trouvé des canvas tentant de les représenter dans l’éditeur en ligne de p5.js, tous selon moi, soldés par des échecs. Soit la génération n’avait rien à voir avec la beauté (certes en 2d) d’une aurore boréale, soit elle était trop plate ou représenté en une espèce de forme circulaire.
— Un peu d’art génératif ?
La deuxième partie de la semaine m’a servi à produire quelques petites choses. Je suis resté sur une utilisation assez simple, avec des carrés, des rectangles et des lignes.
La première réalisation est inspirée d’une Œuvre de l’exposition “Heureux soient les fêlés, car ils laisseront passer la lumière” d’Olivier Ratsi à la Gaîté Lyrique, à Paris, qui s’est terminé le 31 octobre 2021. Le travail de l’exposition était beaucoup centré sur la lumière, et les jeux de perspectives dans la salle, avec des formes simples.
Le code est plutôt simple. Toutes les demis-secondes, on génère un nouveau carré, avec des bords blancs ou rouges, qui va s’agrandir au fur et à mesure du temps. Pour tenter d’optimiser un peu (même si c’est assez léger), quand un carré disparaît de la zone visible du canvas, il est supprimé du tableau des carrés et n’est donc plus affiché. On arrive donc à garder (pour l’exemple), un nombre de 16 carrés max affiché en même temps.
La deuxième réalisation joue aussi avec des formes géométriques basiques, mais cette fois-ci, ce sont des rectangles. Le but est de générer un nombre défini de rectangle, ayant une longueur et une largeur aléatoire, avec une couleur aléatoire pris dans une palette de couleur, un mode fusion aléatoire et une position aléatoire (ça fait beaucoup de random, mais c’est marrant.). On obtient donc un canvas complètement différent à chaque fois qu’on lance le script.
(N.B. un mode de fusion est la façon dont un élément va réagir avec un autre élément se situant juste en dessous)
— Lignes et vagues
Enfin, ce week-end, j’ai découvert, toujours grâce à la chaîne The Coding Train, la chaîne YouTube et le site de Tim Rodenbröker, un développeur créatif Allemand. La plupart de ces cours sont accessibles via son site et son Patreon, en échange de 5 ou 10 € par mois. Pour le moment, je suis resté sur sa chaîne YouTube, où il propose quelques tutoriels gratuits, notamment un sur les “Wave-Figures”, des dessins génératifs grâce aux “vagues” créer par les courbes des fonctions cosinus, sinus et tangente.
Dans p5.js, les fonctions sin et cos vont osciller entre -1 et 1, contrairement à la tangente qui va visuellement partir vers l’infini, et revenir de moins l’infini de l’autre côté du canvas (la valeur retournée dans p5.js va aussi osciller entre -1 et 1, mais en mappant sa valeur sur une plage plus grande, la représentation sera plus détaillé).
En suivant le tuto de Tim, on obtient quelque chose comme ça:
Mais j’ai eu l’idée de décliner cela et de créer plusieurs vagues, ayant des valeurs différentes et en les assignant pour créer des lignes. On se retrouve donc avec 4 “vagues”, deux qui contrôlent le x et y de départs de la ligne, et deux qui contrôlent le x et y d’arrivées. En ajustant et en jouant avec les paramètres, on peut obtenir ce genre de résultats :
— Plan pour la Week 4
Je pense que pour cette quatrième semaine, il n’y aura pas vraiment de plan. En relisant l’article de la semaine dernière, j’ai effectivement beaucoup plus produits, mais je ne suis pas resté sur le contrôle de la couleur comme je l’avais évoqué. Je pense cependant continuer de creuser les fonctions sin(), cos() et tan() de p5.js, et voir ce que l’on peut faire de plus avec celle-ci.
À la semaine prochaine !
Cliquer ici pour passer au prochain article.
