🢔 Back to
devart.space
Lsys generator :
Explications et exploration du generateur de système de lindenmayer
<titre>Lindenmayer</titre> Les images [ci-dessous](#La galerie) sont issues d'un [programme](app) permettant de générer des L-systèmes aléatoirement. ------------ **Sommaire** [TOC] # La galerie <center>                                  </center> # Outils - [p5.js](https://p5js.org/), une sorte de surcouche aux canvas html qui me fourni un ensemble de fonctions permettant de jouer avec des fonctions mathématiques, des images, des formes géométriques, du son, et d'interagir avec via la souris, le clavier, le micro ou encore la webcam. # Explications D'après [wikipédia](https://fr.wikipedia.org/wiki/L-Syst%C3%A8me), un L-système, ou système de Lindenmayer, > [...] est un ensemble de règles et de symboles qui modélisent un **processus de croissance** d'êtres vivants comme des plantes ou des cellules. Le concept central des L-systèmes est la notion de **réécriture**. La réécriture est une technique pour construire des objets complexes en remplaçant des parties d'un objet initial simple en utilisant des règles de réécriture. ## La réécriture Derrière l'idée de réécriture, il faut comprendre que le système va grandir après chaque **itération**. On part donc d'une situation initiale, que l'on nomme axiome de départ, sur laquelle on va appliquer un ensemble de règles pour faire évoluer le dessin. ## Les règles Les règles sont les instructions utilisées pour la réécriture. Elles indiquent pour chaque opérateur (partie du dessin) ce par quoi il doit être réécrit à l'itération suivante. ## Les opérateurs Les opérateurs constituent les règles de réécritures. Généralement représentés par une lettre, elles permettent avant tout d'indiquer quand il faut dessiner un nouveau segment. Et grâce aux règles, de savoir par quoi ce segment sera remplacé à l'itération suivante. Dans mon [générateur de L-système](app), je n'ai utilisé que deux opérateurs: A et B. À ce stade-là, on a donc - des règles constituées d'opérateurs pour re/dessiner des segments, - une situation de départ pour initialiser notre dessin. Il nous manque un élément important qui va nous permettre de ne pas avoir une simple ligne droite constituée de segment: ce sont les constantes. ## Les constantes Les constantes sont un autre type d'opérations qui ne seront pas réécrites. Sauf si on ajoute une règle qui lui est associée. Mais par définition, une constante ne change pas donc pas de réécriture... Pour mon programme, j'ai utilisé deux constantes: - **+** qui change la direction du dessin du segment suivant d'un angle donné vers la droite - **-** qui change la direction du dessin du segment suivant d'un angle donné vers la gauche On peut utiliser d'autres constantes pour créer des systèmes plus complexes, comme par exemple **[** et **]** qui permettent de sauvegarder puis de restaurer la position courante. Cela permet en quelque sorte de "lever le crayon" pour continuer le dessin sur une autre partie et d'y revenir par la suite. ## Un exemple Rien de mieux qu'un exemple pour bien comprendre. On peut donc décrire notre système avec ces informations: - opérateurs: - A et B - règles: - A devient AB+ - B devient AA - axiome: - A - constantes: - **+** change l'angle de 60° vers la droite Si on construit notre système, cela nous donne pour chaque itération: 1. AB+ 2. AB+AA+ 3. AB+AA+AB+AB++ 4. AB+AA+AB+AB++AB+AA+AB+AA++ 5. AB+AA+AB+AB++AB+AA+AB+AA++AB+AA+AB+AB++AB+AA+AB+AB+++ <center>    </center> # Générateur de L-Système [Lsysgen](app) permet d'explorer les L-systèmes en générant aléatoirement des règles ainsi qu'un angle utilisé pour les constantes. J'ai mis en place plusieurs options pour obtenir des dessins plus variés. ## Options de génération L'option **B rule** (B) permet de choisir la manière dont est généré la règle de l'opérateur B: - Random: la règle est aléatoire - Reversed: la règle correspond à l'inverse de la règle de l'opérateur A Cela permet d'ajouter ou non de l'irrégularité dans la forme des motifs générés par le L-système. L'option **Angle** (M) permet de choisir la manière dont est généré l'angle pour les constantes **+** et **-**: - Array: l'angle est pris aléatoirement parmi 30°, 45°, 60°, 90°, 120°, 135° et 150° - Random: l'angle est pris aléatoirement entre 0° et 180° Cela permet d'obtenir des formes plus ou moins "géométriques" dans le sens ou cela va générer plus facilement des triangles, des carrés, des hexagones, etc, ou bien plutôt des piques pointus ou des formes plus rondes. ## Option de mise à jour Ce sont les modifications effectuées à chaque itération. L'option **Proportion** permet de modifier la tailles des segments issues de l'opérateur B pour qu'ils soient 0.618 fois plus petit que la taille des segments A. Pourquoi 0.618 ? C'est [une bonne proportion](https://fr.wikipedia.org/wiki/Nombre_d%27or) ? ## Options d'animation Ces options n'ont rien à voir avec les L-systemes mais je les ai développées donc autant l'intégrer au générateur. L'option **Appear** (A) permet d'afficher progressivement les différents points qui constituent notre image. Avec le slider, on peut choisir de "sauter" tous les X points afin de créer de nouveaux segments. Cela permet de changer la forme de certains motifs et par exemple d'obtenir des triangles plutôt que des hexagones. L'option **Grow** (G) permet d'afficher les segments de l'image un par un. On peut régler sa vitesse avec le slider. ## Option de style J'ai aussi ajouté quelques fonctionnalités pour modifier le style des traits de l'image. L'option **Curve** (C) permet d'adoucir les angles en utilisant une implémentation de la [spline de Catmull-Rom](https://en.wikipedia.org/wiki/Centripetal_Catmull%E2%80%93Rom_spline) ## Options d'exportation Il est possible de capturer nos L-système au format **PNG** (S) mais aussi en **SVG** (E) afin de pouvoir retravailler le style de ces formes sans perte de qualité. On peut aussi sauvegarder une **séquence d'image** (R) afin de générer une image gif ou une vidéo par la suite. ## L'exploration commence Si tu n'as pas encore testé, c'est le moment !! <center><a id="explore-btn" href="./app">Explore</a></center>
