[SPIP 1.9 et GD2] On a souvent besoin de faire ressortir les contours entre différentes zones à l’intérieur d’une image : il s’agit notamment de « dessiner » les frontières entre deux couleurs. Notre but est un peu plus modeste aujourd’hui : nous allons dessiner les frontières entre deux zones de niveaux de transparence.
L’utilisation principale est de pouvoir dessiner les contours d’un lettrage réalisé avec image_typo. Comme le filtre travaillera sur les différences de transparence, ces images typographiques sont particulièrement adaptées.
En revanche, le filtre ne peut pas du tout s’appliquer directement à une photographie (puisque celle-ci ne comporte aucune zone de transparence) ; il est cependant possible, en jouant avec ce nouveau filtre et notre filtre image_podpod d’obtenir des effets plutôt sympathiques :
Notre filtre se nomme image_contour_alpha :
Comme toujours, la partie intéressante se trouve à l’intérieur de la double boucle qui permet de parcourir chaque pixel de l’image. Nous ne détaillerons pas le code, pour une fois, car il est un peu « bidouillesque » (ceci afin de gagner en temps de calcul, ce filtre étant particulièrement lourd).
L’idée générale :
— pour chaque pixel de l’image, on parcourt un carré autour de ce pixel, sur une « épaisseur » égale à l’épaisseur du contour souhaité ($trait) ;
— pour chacun des pixels de ce carré, on récupère la différence de transparence par rapport au pixel central, que l’on divise par la distance par rapport au centre ;
— on fait la moyenne de ces différences de transparence, et c’est (en gros) cette différence de transparence que l’on applique au pixel.
Ce qui revient à dire :
— si un pixel est entouré de pixels ayant la même transparence que lui, alors il devient transparent ;
— si un pixel est proche d’un pixel de transparence différent de lui, alors il devient visible.
De cette façon, on rend visible les pixels qui se trouvent à la « frontière » entre des zones de transparences différentes.
On utilise le filtre ainsi :
Dans cet exemple, on fabrique l’image typographique du #TITRE, puis on fait ressortir en rouge (ff0000 en RVB hexadécimal) les zones de contour, sur une épaisseur de 2 pixels.
(Si vous voulez utiliser une police semblable à celle de mon exemple, vous en trouverez plusieurs dans la rubrique « Stencil, Army » de dafont.com.)
Une astuce importance ici : lorsque l’on fabrique l’image typographique, on précise un padding, de façon à bien éloigner les lettres du bord de l’image ; de cette façon, le filtre de contour ne « débordera » pas de l’image.
On peut ensuite simplement superposer une typo de couleur et son contour, par exemple :
En inversant l’ordre des couches, on obtient un effet plus discret :
Notez bien : en réalité, la variable $trait (ici : 2) n’est pas réellement l’épaisseur d’un trait de contour. La fonction étant déjà très lourde en termes de temps de calcul, j’ai préféré la laisser telle quelle, certes imparfaite, mais fonctionnant bien.
Quant à la photographie en tête d’article, je l’obtiens en jouant avec le filtre image_podpod, qui justement fabrique des images transparentes à partir d’images non transparentes. Par exemple :
Sans trop de mal, on pourra aussi obtenir ceci :
ou ceci :
