Le bruit fractal pour faire du grain

Pour mon exploration du grain (bruit) en SVG, je me suis inspiré du tutoriel Grainy Gradients découvert sur css-tricks. Si j’aime l’effet, je ne l’ai pas suivi car ce n’est pas fait pour être dans un seul SVG autonome, mon objectif premier pour le moment. Le grain est bien créé avec un filtre SVG mais il devient ensuite un fichier externe qui sera appliqué comme background-image à un div HTML. Ainsi, j’ai plutôt expérimenté par moi-même, ce qui demande plus de temps mais m’a aussi permis de mieux comprendre et revoir des notions nouvelles et apprises récemment.

Différentes variations

Variation #1

• Positionnement du texte SVG en x et en y avec <tspan>.
• Le grain est un filtre <feTurbulence> de type bruit fractal.
• Le grain est coloré par défaut.
• Le remplissage du cercle est un dégradé linéaire avec une opacité de 0.9 à 0, ce qui laisse paraitre le grain mis sur le carré.

Variation #2

• En donnant un ID au SVG lui-même, il est possible de coloré sont fond, et donc le grain qui est appliqué sur le carré.
• Première exploration de l’élément <animate> : animation de la fréquence de base du filtre feTurbulence de type bruit fractal.
• Ces grains fins sont bien visible sur l’écran d’ordinateur mais sur mon téléphone, ils sont à peine apparant.

Variation #3

• La grosseur du grain est en fonction de la largeur de l'écran ; utilisation de JS pour détecter window.innerWidth et appliquer des valeurs différentes à baseFrequency.
• Utilisation du filtre feGaussianBlur sur le cercle. Avec son dégradé et sa transparence, l'effet créait des bandes. Je découvre que pour éviter cela on doit indiquer l'interpolation colorimétrique sRGB.
• Le filtre contenant le feTurbulence contient aussi l'élément feColorMatrix, avec les paramètres type="saturate" values="0", afin d'enlever toutes les couleurs du grain.

Variation #4

• Cet exemple est une exploration en SVG du paramètre animation-timing-function du CSS.
• Le animation-timing-function est beaucoup plus simple! Surtout avec un outil tel que cubic-bezier.
• Toutefois, une fois que ce sera maitrisé, ça me semble plus puissant car on peut contrôler précisément le temps (keyTimes) de chacune des valeurs (values) des points bézier.
• Dans cet exemple, il y a 7 valeurs, donc 7 palliers, et 7 différentes valeurs de temps.
• Le calcMode permet de recalculer les keySplines lors de l'exécution.
• Pour que ce soit toutefois mieux contrôlable, un outil serait le bienvenu! De futures recherches et expérimentations sont à faire, ces notions ne sont pas simples à intégrer.

Extrait du code pour visualiser l'équivalant SVG d'animation-timing-function

<circle id="cercle-1-25022024" cx="125" cy="112" r="100"  
        fill="url(#degrade-4-250224)" filter="url(#cercle-flou-2-25022024)">      <animate attributeName="cx" from="125" to="375" begin="0s" dur="10s"         values="125;150;175;200;250;300;375"
      keySplines="
	0.1 0.8 0.2 1;
	0.1 0.8 0.2 1;
	0.1 0.8 0.2 1;
	0.1 0.8 0.2 1;
	0.1 0.8 0.2 1;
	0.1 0.8 0.2 1" 
      keyTimes="0;0.22;0.33;0.55;0.88;0.92;1"       
      calcMode="spline" repeatCount="indefinite"/>
  </circle>

Jouer avec les paramètres : masque, filtres feTurbulence, feDisplacementMap et feDiffuseLighting

• Je n'aime pas l'effet du feDiffuseLighting. Je trouve qu'il rend tout terne en plus d'ajouter un contour noir.
• Après recherche et différents essais, ce contour noir ne peut pas être enlevé. Je l'ai floué pour l'atténuer (cercle central).
• Je me suis inspirée du travail de Cassie Evans sur le grain afin de trouver une solution pour ne pas l'avoir en fichier externe, et aussi pour ne pas devoir mettre de la transparence pour le voir. La solution de Cassie est d'appliquer le filtre <feTurbulence> de type bruit fractal sur un <mask> au lieu de le mettre directement sur une forme (rect, circle etc.)
• En mettant donc le filtre sur le masque, et puis le masque sur l'objet, on obtient de belles textures. Évidement de choix de technique dépend de ce que l'on souhaite réaliser.
• Pour ce qui est d'un effet d'éclairage, plus de recherche est à faire, de même qu'explorer les modes de fusion pour donner l'effet sans être nécessairement un feDiffuseLighting.

feComponentTransfer pour travailler le contraste et la luminosité

• Avec le filtre feComponentTransfer, on accède aux canaux RGB avec feFuncR, feFuncG et feFuncB.
• Il est alors possible de jouer avec les attributs slope et intercept afin d'avoir une effet similiare à jouer sur le contraste et le luminosité.
• Cela donne un petit effet mais ce n'est pas aussi drastique que les filtres CSS contrast et brightness.