Last time, I introduced the Filter Editor dialog and demonstrated how to create a simple filter chain, resulting in a drop shadow effect. The chain consisted of three filter primitives: Gaussian Blur, Offset and Merge. I also used the Source Alpha and Source Graphic inputs. Recall that each primitive in the chain has one or more inputs, denoted by triangles, and a single output represented by the bottom of the primitive. The output from the chain as a whole is always the output from the last primitive. Therefore, in the Inkscape UI, our drop shadow chain looks like that shown below left With a simple chain this is fairly understandable but, as the complexity of your filters grows, a simple one-dimensional list becomes an unwieldy tool for looking at the complex arrangement of primitives that evolves. Mathematically speaking, filters are a “directed graph”, consisting of a series of nodes (the primitives) and uni-directional lines connecting them. Such graphs are usually drawn in two dimensions, and you may find it easier to try to imagine your chains in that form. For example, our simple drop shadow could be represented like that shown below right.
La dernière fois, j'ai présenté la boîte de dialogue Éditeur de filtres et j'ai montré comment créer une chaîne simple de filtres, avec une ombre portée comme résultat. La chaîne était constituée de trois primitives de filtrage : un flou gaussien, un décalage et une fusion. J'ai aussi utilisé les entrées Opacité de la source et Source image. Pour rappel, chaque primitive de la chaîne a une ou plusieurs entrées, indiquées par des triangles, et une seule sortie représentée par le bas de la primitive. La sortie globale de la chaîne est toujours la sortie de la dernière primitive. Ainsi donc, dans l'interface utilisateur d'Inkscape, notre chaîne d'ombre portée ressemble à ce qui est montré en bas à gauche.
Avec une chaîne simple, c'est assez compréhensible , mais, au fur et à mesure que la complexité de filtrage grandit, une simple liste mono-dimensionnelle devient un outil peu maniable pour visualiser l'arrangement complexe des primitives qui s'élabore. Mathématiquement parlant, les filtres sont un « graphe orienté », consistant en une série de nœuds (les primitives) reliés par des lignes orientées. De tels graphes sont habituellement dessinés en deux dimensions, et vous pouvez trouver plus facile d'essayer d'imaginer vos chaînes de cette manière. Par exemple, notre ombre portée simple pourrait être représentée comme montré en bas à droite.
Here I've used blue boxes for the primitives, green for the image sources, and teal for the final output. The gray box just shows the intermediate result that you would see if you could peek into the filter chain at that point. Hopefully you can see how this layout relates to the Inkscape UI, and I'll use this approach again to describe more complex filters as the series goes on. One problem with our drop shadow is that it's based on the Source Alpha of the original object, which is essentially a black silhouette. But what if you want your shadow to be more translucent – gray rather than black – or you want it to have a different color entirely? There is a filter primitive that lets us manipulate the color of the image in the chain, but unfortunately it's another case of a confusing UI that could have been made a lot more obvious.
Ici, j'ai utilisé des boîtes bleues pour les primitives, vertes pour les sources d'image et bleu sarcelle pour la sortie finale. La boîte grise montre simplement le résultat intermédiaire que vous pourriez voir si vous pouviez avoir un aperçu à cet endroit. J'espère que vous pouvez voir la correspondance de cette disposition avec l'interface d'Inkscape, et j'utiliserai cette approche pour décrire des filtres plus complexes dans la suite de cette série.
Un problème de notre ombre portée est qu'elle est basée sur l'opacité de la source de l'objet original, qui est est en fait une silhouette noire. Mais que ce passe-t-il si vous voulez que votre ombre soit plus translucide - grise au lieu de noire - ou si vous voulez qu'elle soit d'une couleur complètement différente ? Il y a une primitive de filtrage qui vous permet de manipuler la couleur de l'image dans la chaîne, mais, malheureusement, c'est un nouveau cas d'une interface confuse qui aurait pu être réalisée d'une manière beaucoup plus évidente.
Start by adding the Color Matrix primitive to your filter. It will appear at the bottom of the chain, but you can drag it to another location. We'll start by changing the opacity of the shadow, so it either needs to go after the Gaussian Blur step (to change the opacity of the already blurred image), or right at the top of the chain (to change the opacity before the blur is applied). Either approach will give roughly the same result, so I've chosen to put it at the top of the list. You then need to modify the connections so that the Color Matrix gets its input from the Source Alpha column, and the Gaussian Blur gets its input from the Color Matrix primitive. With the Color Matrix primitive selected, take a look at the parameters at the bottom of the dialog. First there is a Type pop-up which lets you select between four different varieties of color manipulation. Three of them have simple, easy-to-use interfaces… so of course we need the other one! Select the Matrix option (this is also the default when you first add the primitive), and you'll be presented with a grid of numbers with little extra explanation (there is a lengthy tooltip, but I'm not sure it helps very much).
Commencez par ajouter la primitive Matrice de couleurs à votre filtre. Elle apparaîtra en bas de la chaîne, mais vous pouvez la tirer à un autre endroit. Nous commencerons par modifier l'opacité de l'ombre ; aussi, soit il doit aller après l'étape du flou gaussien (pour changer l'opacité de l'image déjà floutée), soit directement en haut de la chaîne (pour changer l'opacité avant l'application du flou). Les deux approches vont donner à peu près le même résultat ; aussi, j'ai choisi de la mettre en haut de la liste. Ensuite, vous devez modifier les connexions de sorte que la matrice de couleurs prenne son entrée dans la colonne Opacité de la source et que le flou gaussien prenne la sienne à la sortie de la primitive Matrice des couleurs.
Ayant sélectionné la primitive Matrice des couleurs, regardez les paramètres en bas du dialogue. D'abord, il y a une liste déroulante Type qui vous permet une sélection entre quatre variétés différentes de manipulation des couleurs. Trois d'entre elles ont des interfaces simples et faciles d'utilisation…, mais nous avons bien sûr besoin de l'autre ! Sélectionnez l'option Matrice (qui est l'option par défaut quand vous ajoutez la primitive en premier) et vous allez voir une grille de nombres avec peu d'explications complémentaires (il y a une longue info-bulle, mais je ne suis pas sûr que ça aide beaucoup).
Above is that same matrix, presented with some headings to help clarify things: Remember that filters are a way to manipulate the bitmap version of your vector image, just at the point it's converted to pixels. This matrix essentially holds some rules about how each individual pixel in your input image should be modified in order to produce the corresponding pixel in your output image. Let's take the top row as an example. Suppose the first pixel in our image has an RGB value of (150, 128, 255) and it's completely opaque (an Alpha value of 255). To calculate the color of the output pixel we have to calculate its R, G, B and A values separately – the top row, therefore, is only concerned with the Red component of the pixel. The formula for calculating the Red output pixel value is: ROUT = (RIN × 1.00) + (GIN × 0.00) + (BIN × 0.00) + (AIN × 0.00) + (255 × 0.00)
Au-dessus, voici la même matrice, présentée avec quelques en-têtes pour aider à clarifier les choses :
Souvenez-vous que les filtres sont une façon de manipuler la version bitmap de votre image vectorielle, juste au moment où elle est convertie en pixels. Cette matrice contient principalement quelques règles définissant comment chaque pixel individuel de votre image d'entrée devra être converti pour produire le pixel correspondant de l'image de sortie.
Prenons la rangée du haut comme exemple. Supposez que le premier pixel de votre image ait la valeur RGB (150, 128, 255) et qu'il soit complètement opaque (valeur Alpha de 255). Pour calculer la couleur du pixel de sortie, nous devons calculer séparément les valeurs R, G, B et A (rouge, vert, bleu, alpha) - la rangée du haut n'est en lien qu'avec la composante Rouge du pixel. La formule pour calculer la sortie Rouge du pixel est :
ROUT = (RIN × 1,00) + (GIN × 0,00) + (BIN × 0,00) + (AIN × 0,00) + (255 × 0,00)
The bold numbers in the formula are taken from the first row of figures in the matrix. Clearly only the first value has an effect in this case, as all the others are zero, so ROUT is simply the same as RIN × 1.00. In other words, with these figures the red component is passed through untouched, with a value of 150. If you repeat the process for each of the remaining three lines, you'll see that the default color matrix simply passes the input color through to the output without modifying it. It's an “identity” matrix, in mathematical terms. Because the same matrix is used for every pixel in the input image, the result is that this filter primitive will just copy the input image directly to the output without changing it at all. To make the drop-shadow more translucent, we need to modify the output Alpha value. On the bottom row of the matrix, click on the 1.00 field and change it to 0.50 then press the Return or Enter key. Immediately you'll see the drop shadow change. You can choose any value you wish (between 0.00 and 1.00) in order to create a lighter or darker shadow.
Dans la formule, les nombres en gras sont pris dans la première ligne de la matrice. Il est évident que seule la première valeur a un effet dans ce cas, car toutes les autres sont à zéro ; ainsi, ROUT est simplement égal à RIN x 1,00. Dit autrement, avec ces valeurs, la composante rouge est transmise intacte, avec une valeur de 150. Si vous répétez ce processus pour chacune des trois lignes restantes, vous verrez que la matrice de couleur par défaut transmet la couleur d'entrée à la sortie sans la modifier. C'est une matrice « identité », en termes mathématiques. Parce que la même matrice est utilisée pour tous les pixels de l'image d'entrée, il en résulte que la primitive de filtrage copiera simplement l'image d'entrée directement à la sortie sans aucune modification.
Pour rendre l'ombre portée plus translucide, nous devons modifier la valeur Alpha de sortie. Sur la ligne du bas de la matrice, cliquez sur le champ 1,00 et modifiez-le en 0,50 puis appuyez sur Retour ou sur la touche Entrée. Vous allez voir l'ombre portée changer immédiatement. Vous pouvez choisir n'importe quelle valeur que vous souhaitez (entre 0,00 et 1,00) de façon à créer une ombre plus claire ou plus sombre.
What about changing the color of the shadow? There are a few ways to go about this, but we'll start by using the fourth column in the Color Matrix – the one labelled as “Fixed Offset” in my diagram. Consider that the black pixels in the Source Alpha image have an RGBA value of (0, 0, 0, 1) – with all those zeros it's clear that no amount of multiplication will change the output of the red, green and blue components. But the fourth column lets us add (or subtract) a fixed value. If you change the fourth column on the third row to 0.80, the formula for the blue component of the output pixels becomes: BOUT = (RIN × 0.00) + (GIN × 0.00) + (BIN × 1.00) + (AIN × 0.00) + (255 × 0.80) The multiplied R, G and B values all come to 0, but then we add 255 × 0.8 onto the result, giving us a final blue component of 204. Our RGBA output value therefore becomes (0, 0, 204, 1), giving us a blue drop shadow. Try changing the values of the fixed offset for R and G as well and you'll quickly see that we can use this technique to produce any color of shadow we want, all from our black silhouette.
Et pour changer la couleur de l'ombre ? Il y a plusieurs façons de faire, mais nous commencerons en utilisant la quatrième colonne de la matrice, celle nommée « Fixed Offset » (décalage fixe) dans mon diagramme. Considérez que les pixels noirs de l'image de l'Opacité de la source ont une valeur RGB de (0, 0, 0, 1) ; avec tous ces zéros, il est clair que ça ne va pas changer le résultat de la multiplication pour les composantes rouge, verte et bleue. Mais la quatrième colonne nous permet d'ajouter (ou de soustraire) une valeur fixe. Si vous modifiez la quatrième colonne de la troisième ligne en 0,80, la formule pour la composante bleue des pixels de sortie devient :
BOUT = (RIN × 0,00) + (GIN × 0,00) + (BIN × 1,00) + (AIN × 0,00) + (255 × 0,80)
Les valeurs R, G et B de la multiplication tombent toutes à zéro, mais comme nous ajoutons 255 x 0.80 au résultat, nous obtenons une composante bleue de 204 comme résultat. Notre valeur de sortie RGBA devient (0, 0, 204, 1), donnant une ombre portée bleue. Essayez aussi de changer les valeurs des décalages fixes pour R et G, et vous verrez rapidement que vous pouvez utiliser cette technique pour réaliser n'importe quelle couleur d'ombre, toutes à partir de notre silhouette noire.
How about using the Color Matrix filter to go in the opposite direction – to generate a black shadow from a colored one? No problem, but first you'll need a colored image to work with. The easiest option is to move the input connection from Source Alpha to Source Graphic. You should also change your Color Matrix values back to the identity matrix to give you a known state to start from. With that done, your drop shadow should now be the same color as your original object (red, in my case). To convert our color to black, we have to set each component to zero. There are a couple of ways to do this: • Put -1.00 into the Fixed Offset field for the R, G and B output values. No matter what the input values are, this has the effect of subtracting 255 from the output. This has the effect of setting each output to zero, because it's not possible for a color component to go any lower than that. • Change the 1.00 values in the first three rows to 0.00 instead. Regardless of the input value, multiplying it by zero will give a zero output.
Comment utiliser le filtre Matrice de couleurs pour aller en sens opposé, pour générer une ombre noire à partir d'une colorée ? Pas de problème, mais d'abord nous avons besoin d'une image colorée à retravailler. L'option la plus facile est de déplacer la connexion d'entrée d'Opacité de la source à Source image. Vous devriez ramener aussi les valeurs de la matrice des couleurs à la matrice identité pour repartir d'un état connu. Une fois fait, votre ombre portée devrait avoir la même couleur que votre objet original (rouge, dans mon cas).
Pour convertir notre couleur en noir, nous devons régler chaque composante à zéro. Il y a deux façons de le faire : • Mettre -1,00 dans le champ Décalage fixe pour les valeurs de sortie R, G et B. Les valeurs d'entrée n'ont aucune importance, du fait de la soustraction de 255 en sortie. Ceci positionne chaque sortie à zéro, parce qu'il n'est pas possible pour une composante couleur de descendre plus bas. • Changer les valeurs 1,00 des trois premières colonnes en 0,00. Quelle que soit la valeur d'entrée, la multiplication par zéro donnera zéro en sortie.
I took the second approach, to give me a black drop shadow once more: Of course this is a terribly inefficient way to create a silhouette compared with just linking to the Background Alpha source, but it helps to demonstrate how output values are calculated from input values. So far, however, we've just looked at simple mappings, where red remains red and blue remains blue, but this filter primitive also allows you to map one input component to a completely different output. Consider a matrix like this: It's similar to the identity matrix, except that the R, G and B columns are shifted by one place. The result is that the red component of the output pixel is taken from the value of the green component of the input, whilst the green output comes from the blue input and the blue output is taken from the red input. Let's see the result on a multi-colored source image:
J'ai pris la deuxième approche, pour avoir à nouveau une ombre portée noire :
Bien sûr, c'est une solution particulièrement inefficace pour créer une silhouette, en comparaison d'un simple lien à l'Opacité de la source, mais elle aide à montrer comment sont calculées les valeurs de sortie à partir des valeurs d'entrée. Jusqu'ici, cependant, nous n'avons regardé que des réseaux simples, où le rouge reste rouge, le bleu, bleu ; mais cette primitive de filtrage permet aussi de relier une composante d'entrée sur une toute autre sortie. Considérez une matrice comme celle-ci :
Elle est similaire à une matrice identité, sauf que les colonnes R, G et B ont changé de place. Le résultat, c'est que la composante rouge du pixel de sortie est obtenue à partir de la valeur de la composante verte de l'entrée, alors que la sortie verte résulte de l'entrée bleue et la sortie bleue vient de l'entrée rouge. Regardons le résultat sur une image source multicolore :
Notice that this moves away from having a simple fixed color for the shadow, and instead produces different colors based on the corresponding pixel in the input image. If you include the output Alpha channel, things can get even weirder. Here's our multi-colored text with the RGB values zeroed to give us a black drop shadow again, except that the fourth row has been changed so that the Alpha channel is taken from the Red input component. Notice that colors with a high red value have dense, solid shadows, whilst those with no red in them (such as the green S and blue O in “Shadow”) have no shadows at all. Although I've shown only relatively simple examples here, it's possible to create complex mappings between color channels. If you really want your red output to consist of 90% of the red input, less 10% of the green, less 35% of the blue, plus a fixed offset of 64, you just have to put values of 0.9, -0.1, -0.35 and 0.25 into the top row. Of course, predicting the output from complex combinations like this becomes rather difficult, so for normal use I recommend sticking with simpler, easy to understand mappings.
Notez que ceci nous éloigne d'une simple couleur fixe pour l'ombre et, à la place, différentes couleurs sont produites, basées sur le pixel correspondant de l'image d'entrée. Si vous incluez le canal Alpha de sortie, les choses peuvent devenir encore plus étranges. Voici notre texte multicolore avec les valeurs RGB à zéro pour nous redonner une ombre portée noire, sauf pour la quatrième ligne où le canal Alpha est fait à partir de la composante rouge de l'entrée. Notez que les couleurs avec une valeur rouge élevée ont des ombres denses et opaques alors que celles sans rouge du tout (telles que le S vert et le O bleu de « Shadow ») n'ont aucune ombre.
Bien que je n'aie montré que des exemples relativement simples ici, il est possible de créer des réseaux complexes entre les canaux de couleurs. Si vous voulez réellement que votre sortie rouge soit faite de 90 % d'entrée rouge, moins de 10 % de vert, moins de 35 % de bleu, plus un décalage de 64, vous devez juste mettre les valeurs 0,9, -0,1, -0,35 et 0,25 dans la ligne du haut. Bien sûr, prévoir la sortie de combinaisons complexes comme celle-ci devient plutôt difficile ; aussi, pour un usage normal, je recommande de rester sur des réseaux simples et faciles à comprendre.
This ability to flexibly map color components to each other, or to and from the Alpha value, can be useful on some complex and esoteric filters. Most of the time, however, you don't need that degree of flexibility, so the Type pop-up provides three other options to avoid you having to wrestle with the full matrix: • Saturate: Provides a slider to let you change the saturation of your image. In other words, remove color from it, ultimately producing a grayscale result at the most extreme. • Hue Rotate: Shift the color of your object by a fixed amount. • Luminance to Alpha: Set the output alpha based on the RGB input values. In theory this makes dark areas more transparent and light areas more opaque, but RGB doesn't map neatly to the human perception of brightness, so this really works effectively only on grayscale input images. This can be used to punch holes in your filter output, based on the images produced in other parts of the chain. Notable by its absence is a shorthand option for adjusting the opacity – where we came in at the start of this article. Unfortunately, if you want to make your drop shadow a little more transparent, you have no choice but to deal with the full matrix approach, even if you are only changing a single value in the bottom row
Cette capacité à relier avec flexibilité les composantes de couleur de l'une à l'autre, ou depuis ou vers la valeur Alpha, peut être utile sur certains filtres complexes et ésotériques. La plupart du temps, cependant, vous n'avez pas besoin de ce niveau de flexibilité ; aussi, la liste déroulante Type procure trois autres options pour vous éviter de batailler avec la matrice complète : • Saturation : fournit une réglette pour vous permettre de modifier la saturation de votre image. En d'autres termes, pour lui enlever de la couleur et, tout au bout, obtenir une résultat en nuances de gris. • Décalage de teinte : Décale la couleur de votre objet d'une valeur fixe. • Luminance vers opacité : règle la sortie Alpha sur la base des valeurs des entrées RGB. En théorie, ceci rend les zones sombres plus transparentes et les zones claires plus opaques, mais le RGB ne correspond pas franchement à la perception humaine de la luminosité ; aussi, ceci ne fonctionne bien que sur les images d'entrée en nuances de gris. Il peut être utilisé pour perforer votre filtre de sortie, basé sur des images produites dans d'autres parties de la chaîne.
Notez l'absence d'une option directe pour ajuster l'opacité - là où nous en étions au début de cet article. Malheureusement, si vous voulez rendre votre ombre portée un peu plus transparente, vous n'avez pas d'autre choix que l'approche par la matrice complète, même si vous ne modifiez qu'une seule valeur dans la ligne du bas.