[SPIP 1.9 et GD2] La puissance des effets que l’on peut obtenir en quelques lignes de code avec GD2 ne cesse de m’épater. Si vous avez suivi la présentation de quelques uns des filtres précédents, vous aurez compris que l’essentiel du code des filtres graphiques de SPIP sert à gérer la création et le cache des fichiers graphiques ; les transformations induites par les fitres reposent en général sur une poignée de lignes PHP particulièrement simples.
Dans cette logique, voici un filtre particulièrement puissant, assez ardu à maîtriser graphiquement, mais dont le code est très simple. Il s’agit d’une adaptation, en filtre SPIP, de l’effet « Dispersion » (Displace dans la version anglaise) de Photoshop.
L’effet « Dispersion » consiste à déplacer chaque pixel d’une image en fonction des informations de niveau de gris de chaque pixel d’une autre image (que l’on nomme « image de référence »). Si le pixel de l’image de référence est un gris à 50%, le pixel de l’image d’origine n’est pas déplacé. Si le pixel de l’image de référence est noir ou blanc, alors on déplace le pixel de l’image d’origine vers la droite ou la gauche, le haut ou le bas.
Cet effet de Photoshop est très bien présenté sur ce site. On y trouvera les explications théoriques illustrées et différentes applications. Si vous ne connaissez pas cet effet, la lecture de ces pages me semble indispensable.
Le filtre
Voici le code de notre filtre. Oui, il est un peu long... Mais vous pouvez très bien le copier-coller dans votre fichier mes_options et l’expérimenter sans chercher à en comprendre les détails (la partie réellement intéressante est expliquée plus loin).
Il s’agit en réalité de code dérivé du filtre image_masque présent dans ecrire/inc/filtres.php de la distribution de SPIP. Sa longueur vient du fait que image_masque permet de positionner un masque plus petit que l’image à l’intérieur d’une image plus grande, ce qui complique le code1.
En réalité, la partie originale est, comme toujours, la double boucle qui parcourt l’image pixel par pixel :
Voici le principe :
• on récupère le pixel de l’image de référence $im2 ; on calcule un niveau de gris ($g2) à partir des composantes RVB. On « décale » cette valeur de niveau de gris (initialement entre 0 et 255) de 127, de façon à obtenir une valeur comprise entre -127 et 127 (0 étant le gris 50%). On divise cette valeur par 127, et ainsi notre valeur de référence est, selon le niveau de gris du pixel, comprise entre -1 et 1 ;
• on décale les valeurs de $x et $y d’une certaine valeur, proportionnelle à notre valeur de niveau de gris ; quatre lignes limitent ces valeurs, pour rester à l’intérieur de l’image ;
• on récupère les informations de couleur de ce pixel décalé ;
• on applique cette valeur au pixel en cours.
Ainsi, pour chaque pixel, on est allé chercher dans l’image d’origine un pixel légèrement déplacé.
Utilisation du filtre
Comme d’habitude, on applique le filtre à une image, que ce soit un logo (d’article, de rubrique...) ou un document joint à un article.
Le premier paramètre est, comme pour image_masque, le nom du fichier qui sera utilisé pour calculer l’effet (l’image de référence). On peut se contenter d’un fichier JPEG (donc non transparent, la transparence de l’image de référence n’étant pas exploitée) en niveaux de gris.
Les deux paramètres suivants indiquent la valeur maximale de décalage des pixels, horizontalement et verticalement. Notez bien : ces valeurs peuvent être nulles ou négatives. Ainsi, avec les valeurs 4 et 4, un pixel complètement blanc ou noir sera décalé de 4 pixels vers la gauche ou la droite, vers le bas ou le haut. Pour les pixels intermédiaires, on effectuera des décalages proportionnels, entre 4 et -4.
Nous nous contenterons aujourd’hui de l’utilisation la plus simple de ce filtre : déformer une photographie grâce à une image de référence. Dans d’autres articles à suivre, nous pourrons déformer du texte (effet assez hallucinant...), voire carrément déformer une grille en fonction de l’image (c’est, en gros, l’utilisation inverse de celle présentée aujourd’hui).
Appliquée à notre image ainsi :
Nous obtenons ce résultat :
On obtient ainsi assez facilement des effets de verre transparent mais bosselé. Il est très facile de moduler l’effet en jouant sur les valeurs de déplacement horizontal et vertical (note : beaucoup de tutoriaux en ligne concernant cet effet demandent de renforcer le contraste de l’image de référence ; en réalité, il suffit d’augmenter les valeurs de décalage horizontal et vertical, sans retoucher le fichier, pour simuler une image de référence plus contrastée).
La présentation de l’effet « Dispersion » de Photoshop fourni quelques exemples avec plusieurs images de référence. Notez bien que, dans le cas de notre filtre, il n’est pas possible (pas encore ?) d’utiliser une image de référence comme un motif répété ; si vous utilisez un tel motif, vous devez fabriquer une grande image de référence qui contient ce motif déjà répété (comme dans les fichiers d’exemple fournis ici).
On utilise souvent des images de référence « floutées », c’est-à-dire présentant toujours une transition douce entre les pixels noirs et les pixels blancs. C’est ce qui permet d’obtenir l’effet de verre déformant. Cependant, on peut aussi utiliser des images de textures un peu plus « extrêmes », qui donneront des effets plus originaux (parce que les photographies façon verre de douche, on s’en lasse vite)...
L’effet se combine, évidemment, avec les autres filtres graphiques de SPIP. Voici un essai avec notre filtre image_podpod :
1L’utilisation de ce filtre me semble suffisamment générique pour être intégré dans la distribution standard de SPIP. Cependant, plutôt que de l’intégrer tel quel, je préfère travailler à rendre le filtre image_masque plus générique.