🢔 Back to
devart.space
Réaction diffusion :
Concepte et exemple sur touchdesigner
**Sommaire** [TOC] # Galerie <center> ![](img/5.gif)![](img/4.gif)![](img/6.gif) ![](img/1.gif)![](img/2.gif)![](img/3.gif) ![](img/7.gif)![](img/8.gif) </center> # Outils - [Processing](https://processing.org/), un logiciel de création graphique permettant de programmer une animation. - [Touchdesigner](https://derivative.ca/), un langage de programmation nodale utilisé pour générer du contenu multimédia interactif en temps réel. # Explications Pour générer ces animations, je me suis inspiré des vidéos de Daniel Shiffman dans sa série [*the coding train*](https://www.youtube.com/channel/UCvjgXvBlbQiydffZU7m1_aw) qui lui même se base sur le [tutoriel de Karl Sims](https://www.karlsims.com/rd.html) sur le principe de réaction diffusion. Pour faire simple, on a deux éléments chimiques A et B. L'élément A correspond à la nourriture de l'élément B. On ajoute une certaine quantité de cet élément dans l'environnement. C'est le taux d'alimentation (feed rate). Quand deux éléments B et un élément A sont proches, les B mangent A pour créer un nouvel élément B. C'est la **réaction**. L'élément B meurt si il n'a pas de nourriture dans un certain temps. C'est le taux de mortalité (kill rate). Avec ces deux variables (feed rate et kill rate), on peut agir sur la forme des motifs générés. Pour animer cela, on va donner une concentration (entre 0 et 1) de A et de B pour chaque pixel de notre image/grille. Aux endroits ou les conditions sont réunies, l'élément B va pouvoir se propager sur la grille en formant les motifs. C'est la **diffusion**. # Version touchdesigner Une manière efficace de générer ces motifs est d'utiliser un filtre flou (blur) sur une image pour simuler la diffusion et ensuite d'appliquer un filtre "tranchant" (sharpen) pour redessiner une bordure nette. Le tout dans une boucle feedback qui va faire évoluer l'image en appliquant ces filtres à chaque itération. <center>![](img/td.png)</center> # TODO: Version GLSL Envoi moi [un mail](mailto:contact@devart.space) si tu veux voir ce chapitre rapidement :) # Références - Vidéos de *Daniel shiffman*: https://shiffman.net - Tutoriel de *Karl Sims*: https://www.karlsims.com/rd.html - Tutoriel Touchdesigner *Reaction-diffusion in 20 seconds* de *noones img*: https://www.youtube.com/watch?v=CzmRMKQBMSw