Outils pour utilisateurs

Outils du site


issue113:inkscape

Différences

Ci-dessous, les différences entre deux révisions de la page.

Lien vers cette vue comparative

Les deux révisions précédentesRévision précédente
Dernière révisionLes deux révisions suivantes
issue113:inkscape [2016/10/08 11:25] auntieeissue113:inkscape [2016/10/08 11:54] auntiee
Ligne 53: Ligne 53:
 Pour commencer à comprendre cette primitive, débutons  avec la plus classique des chaînes : Pour commencer à comprendre cette primitive, débutons  avec la plus classique des chaînes :
  
-Comme vous le voyez, la première entrée de Carte de déplacement est notre Source image, alors que la seconde vient de la primitive Image. En pratique, l'image est juste une rectangle gris à 50% incorporé comme élément SVG (et positionné dans le coin gauche en haut de la page, de façon à ce qu'il fonctionne dans la 0.91). Il y a aussi deux étoiles dans l'image : le filtre est appliqué à la rouge, alors que la verte est juste là comme référence pour que vous voyez l'effet plus clairement. Les paramètres de l'effet sont une Longueur/Courbure de 10, avec les canaux rouge et vert utilisés comme sources respectives des déplacements X et Y - ceci deviendra clair sous peu.+Comme vous le voyez, la première entrée de Carte de déplacement est notre Source image, alors que la seconde vient de la primitive Image. En pratique, l'image n'est qu'un rectangle gris à 50% incorporé comme élément SVG (et positionné dans le coin gauche en haut de la page, de façon à ce qu'il fonctionne dans la 0.91). Il y a aussi deux étoiles dans l'image : le filtre est appliqué à la rouge, alors que la verte est là tout simplement comme référence pour que vous voyiez l'effet plus clairement. Les paramètres de l'effet sont une Longueur/Courbure de 10, avec les canaux rouge et vert utilisés comme sources respectives des déplacements X et Y - ceci deviendra plus clair sous peu.
  
 **The result of the filter is... absolutely nothing! To understand why, let's consider a single pixel in our output image. That pixel comes from somewhere in the source image, with the exact nature of “somewhere” being defined by the displacement map (the second input image). Each pixel in the displacement map is made up of a combination of four values (Red, Green, Blue and Alpha), and the settings in the filter dialog let you choose which of those values should be used for the X offset, and which for the Y offset. From there, Inkscape goes through the following steps to find out what color the output pixel should be: **The result of the filter is... absolutely nothing! To understand why, let's consider a single pixel in our output image. That pixel comes from somewhere in the source image, with the exact nature of “somewhere” being defined by the displacement map (the second input image). Each pixel in the displacement map is made up of a combination of four values (Red, Green, Blue and Alpha), and the settings in the filter dialog let you choose which of those values should be used for the X offset, and which for the Y offset. From there, Inkscape goes through the following steps to find out what color the output pixel should be:
Ligne 65: Ligne 65:
 7) The output pixel should be set to the color of the pixel from the input image that is located at the new coordinates, or an interpolated color based on the surrounding pixels if the coordinates don't point to a single pixel.** 7) The output pixel should be set to the color of the pixel from the input image that is located at the new coordinates, or an interpolated color based on the surrounding pixels if the coordinates don't point to a single pixel.**
  
-Le résultat du filtre est… absolument rien ! Pour comprendre pourquoi, considérons un seul pixel de notre image de sortie. Ce pixel vient de quelque part dans notre image d'entréeavec l'exacte nature du « quelque part » définie par la carte de déplacement (la seconde image d'entrée). Chaque pixel dans la carte de déplacement est bâti avec une combinaison de quatre valeurs (rouge, bleu, vert et alpha) et les réglages dans le dialogue du filtre vous laisse choisir laquelle de ces valeurs devrait être utilisée pour le décalage X, et laquelle pour le décalage Y. À partir de çà, Inkscape exécute les étapes suivantes pour déterminer quelle sera la couleur du pixel de sortie :+Le résultat du filtre est… absolument rien ! Pour comprendre pourquoi, considérons un seul pixel de notre image de sortie. Ce pixel vient de quelque part dans notre Source image, et la nature précise du « quelque part » est définie par la carte de déplacement (la seconde image d'entrée). Chaque pixel dans la carte de déplacement est composé d'une combinaison de quatre valeurs (rouge, bleu, vert et alpha) et les réglages dans le dialogue du filtre vous laissent choisir laquelle de ces valeurs devrait être utilisée pour le décalage X, et laquelle pour le décalage Y. À partir de , Inkscape exécute les étapes suivantes pour déterminer quelle sera la couleur du pixel de sortie :
  
 1) Chercher la couleur du pixel équivalent dans la carte de déplacement. 1) Chercher la couleur du pixel équivalent dans la carte de déplacement.
-2) Extraire les décalages X et Y des composantes de couleur qui ont été définies dans le filtre.+2) Extraire les décalages X et Y des composantes de couleur réglées dans le filtre.
 3) Diviser les décalages par 255 pour les normaliser dans une plage de 0 à 1. 3) Diviser les décalages par 255 pour les normaliser dans une plage de 0 à 1.
-4) Soustraire 0.5 des décalages pour les déplacer dans la plage -0,5 à 0,5.+4) Soustraire 0,5 des décalages pour les déplacer dans la plage -0,5 à 0,5.
 5) Multiplier les décalages par la valeur de Longueur/Courbure définie dans le filtre. 5) Multiplier les décalages par la valeur de Longueur/Courbure définie dans le filtre.
 6) Ajouter les valeurs des décalages aux coordonnées X et Y du pixel pour obtenir une nouvelle paire de coordonnées. 6) Ajouter les valeurs des décalages aux coordonnées X et Y du pixel pour obtenir une nouvelle paire de coordonnées.
-7) Le pixel de sortie sera réglé à la couleur du pixel de l'image d'entrée qui est situé aux nouvelles coordonnées, ou à une couleur interpolée à partir de celles des pixels voisins si les coordonnées ne pointent pas sur un seul pixel.+7) Le pixel de sortie sera réglé à la couleur du pixel de l'image d'entrée qui est situé aux nouvelles coordonnées, ou à une couleur interpolée à partir de celles des pixels voisins si les coordonnées n'indiquent pas un seul pixel.
  
 **Bear in mind that our map consists only of 50% gray, with RGB values of 127, 127, 127. If you follow the steps above you'll find that gives an offset of about -0.02 pixels for both X and Y – close enough to zero to effectively mean that the output pixel is taken from the same position as the input pixel. Extend that over every pixel in the filter, and it's clear why our output looks exactly the same as the input. **Bear in mind that our map consists only of 50% gray, with RGB values of 127, 127, 127. If you follow the steps above you'll find that gives an offset of about -0.02 pixels for both X and Y – close enough to zero to effectively mean that the output pixel is taken from the same position as the input pixel. Extend that over every pixel in the filter, and it's clear why our output looks exactly the same as the input.
Ligne 81: Ligne 81:
 Changing the rectangle to white (255, 255, 255) has the opposite effect – the image appears to move up and to the left. Because we've specified Red and Green for the X and Y displacement, filling it with pure red (255, 0, 0) produces different displacement values for the two coordinates, effectively moving the image down and to the left; pure green (0, 255, 0) moves it up and to the right. In all cases, the value of the Blue component (or, indeed, the Alpha component) doesn't make any difference. Pure cyan (0, 255, 255) has exactly the same effect as pure green, since we've configured the filter to consider just the Red and Green components.** Changing the rectangle to white (255, 255, 255) has the opposite effect – the image appears to move up and to the left. Because we've specified Red and Green for the X and Y displacement, filling it with pure red (255, 0, 0) produces different displacement values for the two coordinates, effectively moving the image down and to the left; pure green (0, 255, 0) moves it up and to the right. In all cases, the value of the Blue component (or, indeed, the Alpha component) doesn't make any difference. Pure cyan (0, 255, 255) has exactly the same effect as pure green, since we've configured the filter to consider just the Red and Green components.**
  
-Gardez en tête que notre carte n'est que du gris à 50%, avec les valeurs RGB à 127, 127, 127. Si vous suivez les étapes ci-dessus, vous trouverez un décalage de -0,02 pixels pour X comme pour Y - assez proches de zéro pour signifier en fait que le pixel de sortie prend la même position que le pixel d'entrée. Appliquez ceci à tous les pixels du filtreet il est clair que notre sortie ressemblera exactement à notre entrée.+Gardez en tête que notre carte n'est que du gris à 50%, avec les valeurs RGB à 127, 127, 127. Si vous suivez les étapes ci-dessus, vous trouverez un décalage de -0,02 pixels pour X comme pour Y - assez proches de zéro pour signifier en fait que le pixel de sortie prend la même position que le pixel d'entrée. Appliquez cela à tous les pixels du filtre et il est clair que notre sortie ressemblera exactement à notre entrée.
  
-Le changement du rectangle en noir (0, 0, 0) modifie quelque peu le calcul. Maintenant, le décalage devient -5, -5 ; aussi, notre pixel de sortie prend la couleur du pixel situé un peu au-dessus et un peu à gauche de l'image d'origine. Ceci donne l'apparence que toute l'image bougé vers le bas et à droite.+Le changement du rectangle en noir (0, 0, 0) modifie quelque peu le calcul. Maintenant, le décalage devient -5, -5 ; aussi, notre pixel de sortie prend la couleur du pixel situé un peu au-dessus et un peu à gauche de l'image d'origine. Ainsi, toute l'image paraît avoir bougé vers le bas et à droite.
  
-La modification du rectangle en blanc (255, 255, 255) a l'effet inverse - l'image semble bouger vers le haut et à gauche. Parce que nous avons spécifié le rouge et le vert pour les déplacements X et Y, un remplissage tout en rouge (255, 0, 0) produit des valeurs de déplacements différentes pour les deux coordonnées, déplaçant l'image en bas à gauche ; un pur vert (0, 255, 0) la déplace en haut à droite. Dans tous les cas, la valeur de la composante bleue (ou, bien sûr, de la composante alpha) ne fait aucune différence. Un cyan pur (0, 255, 255) à le même effet que le vert pur, car nous avons configuré le filtre pour ne réagir qu'aux composantes rouge et verte.+La modification du rectangle en blanc (255, 255, 255) a l'effet inverse - l'image semble bouger vers le haut et à gauche. Parce que nous avons spécifié le rouge et le vert pour les déplacements X et Y, un remplissage tout en rouge (255, 0, 0) produit des valeurs de déplacement différentes pour les deux coordonnées, déplaçant l'image en bas à gauche ; un pur vert (0, 255, 0) la déplace en haut à droite. Dans tous les cas, la valeur de la composante bleue (ou, bien sûr, de la composante alpha) ne fait aucune différence. Un cyan pur (0, 255, 255) à le même effet que le vert pur, car nous avons configuré le filtre pour ne réagir qu'aux composantes rouge et verte.
  
 **Used with a flat color like this, Displacement Map is just a very poor replacement for the Offset primitive. Where it comes into its own is when your displacement map contains various colors in order to use different offsets for each pixel. We know that a black fill pulls its pixels from up/left, and a white fill from down/right – what happens when we use an image with both black and white in it? Let's give it a try with a group, containing a black spiral on a white background – and we'll apply it to something a bit more complex than a red star. **Used with a flat color like this, Displacement Map is just a very poor replacement for the Offset primitive. Where it comes into its own is when your displacement map contains various colors in order to use different offsets for each pixel. We know that a black fill pulls its pixels from up/left, and a white fill from down/right – what happens when we use an image with both black and white in it? Let's give it a try with a group, containing a black spiral on a white background – and we'll apply it to something a bit more complex than a red star.
Ligne 92: Ligne 92:
 It's a bit of a cheat, because using just red and green only “stretches” your image in two directions. Overlaying a circle with perpendicular gradient that runs from white to transparent to black gives a more accurate result, but does start to hint at the biggest problem with the Displacement Map primitive: creating a suitable map image for the effect you want to achieve isn't always easy or obvious. But there is one way of creating a map that's quite simple, and extremely useful: the Turbulence primitive.** It's a bit of a cheat, because using just red and green only “stretches” your image in two directions. Overlaying a circle with perpendicular gradient that runs from white to transparent to black gives a more accurate result, but does start to hint at the biggest problem with the Displacement Map primitive: creating a suitable map image for the effect you want to achieve isn't always easy or obvious. But there is one way of creating a map that's quite simple, and extremely useful: the Turbulence primitive.**
  
-L'utilisation d'une couleur unie comme ici pour la carte de déplacement n'est qu'un pâle remplacement de la primitive Décalage. Là où elle prend tout son sens, c'est quand la carte de déplacement contient des couleurs variées de façon à utiliser des décalages différents pour chaque pixel. Nous savons qu'un remplissage noir tire le pixel vers le haut à gauche, et qu'un blanc l'entraîne en bas à droite - qu'arrive-t-il quand on utilise une image contenant du noir et du blanc ? Faisons un essai avec un groupe contenant une spirale noire sur un fond blanc - que nous allons appliquer à quelque chose de plus complexe qu'une étoile rouge.+L'utilisation d'une couleur unie pour la carte de déplacement n'est qu'un pâle remplacement de la primitive Décalage. Là où elle prend tout son sens, c'est quand la carte de déplacement contient des couleurs variées de façon à utiliser des décalages différents pour chaque pixel. Nous savons qu'un remplissage noir tire le pixel vers le haut à gauche, et qu'un blanc l'entraîne en bas à droite - qu'arrive-t-il quand on utilise une image contenant du noir et du blanc ? Faisons un essai avec un groupe contenant une spirale noire sur un fond blanc et nous l'appliquerons à quelque chose de plus complexe qu'une étoile rouge.
  
-En ajoutant un peu de Bruit gaussien entre la primitive Image et la Carte de déplacement, nous pouvons adoucir les bords pour donner un joli effet d'ondulations - avec le réglage de son intensité par le paramètre Longueur/Courbure. Et pourquoi pas une variation du rouge au vert pour donner une type d'effet « fish eye » (grand angle, litt., œil de poisson) ?+En ajoutant un peu de Flou gaussien entre la primitive Image et la Carte de déplacement, nous pouvons adoucir les bords pour donner un joli effet d'ondulations - son intensité étant réglée par le paramètre Longueur/Courbure. Et pourquoi pas une variation du rouge au vert pour donner un effet du genre « fish eye » (grand angle, litt., œil de poisson) ?
  
-C'est tricher un peu, car l'utilisation des seuls rouge et vert n'étire l'image que dans deux directions. La superposition d'un cercle passant du blanc au transparent puis au noir sur un axe perpendiculaire donne un effet plus précis, mais commence à toucher le plus gros problème de la primitive Carte de déplacement : créer une image carte convenable pour l'effet que vous voulez atteindre n'est pas toujours simple ou évident. Mais il y a une façon assez simple et extrêmement utile de créer une carte : la primitive Turbulence.+C'est tricher un peu, car l'utilisation des seuls rouge et vert n'étire l'image que dans deux directions. La superposition d'un cercle passant du blanc au transparent puis au noir sur un axe perpendiculaire donne un effet plus précis, mais commence à signaler le plus gros problème de la primitive Carte de déplacement : créer une image carte convenable pour l'effet que vous voulez n'est pas toujours simple ou évident. Mais il y a une façon assez simple et extrêmement utile de créer une carte : la primitive Turbulence.
  
 **If you need a refresher on this primitive, take a look at Part 51 of this series. In short, it's a fast way to create areas filled with pseudo-random colors which, when used as a distortion map, will pull your image this way and that as you tweak the parameters. Use a low frequency Fractal Noise setting to add grotesque distortions to your image. Crank up the values a little to produce the sort of modesty-providing distortions you might find in a bathroom window. Further still and you've got a pointillistic masterpiece of shattered pixels. Unlink the horizontal and vertical frequencies and you can have a fluttering flag, or horizontal ripples. **If you need a refresher on this primitive, take a look at Part 51 of this series. In short, it's a fast way to create areas filled with pseudo-random colors which, when used as a distortion map, will pull your image this way and that as you tweak the parameters. Use a low frequency Fractal Noise setting to add grotesque distortions to your image. Crank up the values a little to produce the sort of modesty-providing distortions you might find in a bathroom window. Further still and you've got a pointillistic masterpiece of shattered pixels. Unlink the horizontal and vertical frequencies and you can have a fluttering flag, or horizontal ripples.
Ligne 102: Ligne 102:
 But make sure you take the time to look at the edges. And what edges they are! From slight undulations, through spattered ink, to fuzzy vignettes. Imagine how these filters might look on shapes with even more edges, such as squares, stars and text. Better still, don't imagine; roll your sleeves up, dive into Inkscape's editor, and create your own filters.** But make sure you take the time to look at the edges. And what edges they are! From slight undulations, through spattered ink, to fuzzy vignettes. Imagine how these filters might look on shapes with even more edges, such as squares, stars and text. Better still, don't imagine; roll your sleeves up, dive into Inkscape's editor, and create your own filters.**
  
-Si vous avez besoin de vous rafraîchir la mémoire à propos de cette primitive, regardez un peu la partie 51 de cette série. En bref, c'est une façon rapide de créer des zones remplies de couleurs pseudo-aléatoires qui, quand elles sont utilisées dans une carte de déplacement, tireront l'image d'une façon ou d'une autre suivant le réglage des paramètres. Utilisez un réglage de bruit fractal à basse fréquence pour ajouter des distorsions grotesques à votre image. Augmentez un peu les valeurs pour produire le genre de distorsions de flou que vous pouvez voir à une fenêtre de salle de bain. Encore plus loin et et vous obtiendrez un chef d'œuvre du pointillisme aux pixels détachés. Déliez les fréquences horizontale et verticale et vous avez un drapeau flottant au vent ou des bandeaux horizontales.+Si vous avez besoin de vous rafraîchir la mémoire à propos de cette primitive, regardez la partie 51 de cette série. En bref, c'est une façon rapide de créer des zones remplies de couleurs pseudo-aléatoires qui, quand elles sont utilisées dans une carte de déplacement, tireront l'image d'une façon ou d'une autre suivant le réglage des paramètres. Utilisez un réglage de bruit fractal à basse fréquence pour ajouter des distorsions grotesques à votre image. Augmentez un peu les valeurs pour produire le genre de distorsions de flou que vous pouvez voir à une fenêtre de salle de bain. Encore plus loin et et vous obtiendrez un chef d'œuvre du pointillisme aux pixels détachés. Déliez les fréquences horizontale et verticale et vous avez un drapeau flottant au vent ou des ondulations horizontales.
  
-Mais prenez bien le temps de regarder sur les bords. Et quels bords ! Des ondulations légères, en passant par des éclaboussures d'encre, jusqu'à un vignettage flou. Imaginez à quoi de tels filtres peuvent ressembler sur des formes avec encore plus de côtés, comme les carrés, les étoiles ou du texte. Encore mieux, n'imaginez pas ; remontez vos manches, plongez dans l'éditeur d'Inkscape et créez vos propres filtres.+Mais prenez bien le temps de regarder les bords. Et quels bords ! Des ondulations légères, en passant par des éclaboussures d'encre, jusqu'à un vignettage flou. Imaginez à quoi de tels filtres peuvent ressembler sur des formes avec encore plus de côtés, comme les carrés, les étoiles ou du texte. Encore mieux, n'imaginez pas ; remontez vos manches, plongez dans l'éditeur d'Inkscape et créez vos propres filtres.
  
 **Image Credits **Image Credits
issue113/inkscape.txt · Dernière modification : 2016/10/08 14:43 de andre_domenech