Documentation

The Stylize > Convolve Effect

The effect Stylize > Convolve allows you to modify the pixels of an image or an animated sequence by using a matrix (here below on the right).
For the neophyte, a matrix is an ordered set of numbers listed in a rectangular form. For the mathematicians, it is a powerful and convenient calculation tool used in algebra.
To open the matrix relative to this effect, just click on the Edit button of the panel.



The matrix of our effect contains 13 rows and 13 columns, and as a consequence 169 numerical fields. Each numerical value is usually called coefficient.
The grey boxes are located on the two diagonals of the matrix. It usually gives a better readability when you fill in the matrix.

We have already seen that each color can be broken up in various ways depending on the color system. For example, the Slider tab of the Color Picker panel gives the numerical values of the A color in the R,G,B and T,S,L color systems.

The Stylize > Convolve effect calculates a new value (and so gives a new a color) for each pixel in an image or an image sequence by using the values (and so the colors) of its neighboring pixels.
In the mathematical point of view, each new value in the R,G,B color system will be calculated by taking the average of itself and the pixels surrounding it. It is a weighted average using the matrix coefficients.
Well, you are an animator, not a mathematician, it doesn't help you a lot to get an idea of the internal working of this effect...

How to obtain convincing results by changing the numerical values of the matrix ?
The examples below should help you in this task.

1st example : How to create a Blur

Let's take a look at the matrix opposite : each coefficient is equal to 3, except the central coefficient which is equal to 1. All the other coefficients are equal to zero (and not visible here)

Using this 3x3 matrix (3 rows, 3 columns) will make each pixel modify itself according to its neighboring pixels.

The surrounding pixels will have more weight (or will be more represented) than the central pixel :
this is exactly the common process to render a blur effect.

Here is an example. In the TVPaint logo opposite :

* The white and opaque pixels outside the TVPaint logo are most often surrounded by opaque white pixels.
A weighted average of white pixels gives ... a white pixel.


* The blue pixels inside the TVPaint logo are most often surrounded by blue pixels.
A weighted average of blue pixels gives ... a blue pixel.


* For the pixels located at the frontier between the blue and white areas, the situation is a bit more complicated : a weighted average of blue and white pixels gives a more or less light blue, as shown below :



Below, two zooms on the "T" letter of the TVPaint logo :

From the result above, it is possible to deduce the result of the Stylize > Convolve effect on some pixels
Before applying the effectAfter applying the effect

Here is the result on a wider area of pixels.
The TVPaint logo begin to get blurred ...


And here is the final result :


Before applying the effectAfter applying the effect

2nd example : What happens with a bigger matrix ?

Let's take a look at the matrix opposite : each coefficient is equal to 3, except the central coefficient which is equal to 1. All the other coefficients are equal to zero (and not visible here)

Using this 5x5 matrix (5 rows, 5 columns) will make each pixel modify itself according to its neighboring pixels. We use here a larger radius than in the 3x3 matrix of the first example.

In this case, the principle is the same as the one enunciated above, but more pixels are taken into account to calculate the average. It gives a larger blur than the one obtained with the 3x3 matrix.

Below, two zooms on the « T » letter of the TVPaint logo :


Before applying the effectAfter applying the effectBefore applying the effectAfter applying the effect


Before applying the effectAfter applying the effect

It is easy to understand that the bigger your matrix will be (the more coefficients equal to 3 in our example), the more pixels will be used to calculate the resulting colors. (the larger will be the blur in our example) Here is what you can expect by using bigger matrix, constructed in the same model than the one above.


Above the source image. Below the blurs that you can obtain by using a :


3x3 matrix5x5 matrix7x7 matrix

9x9 matrix11x11 matrix13x13 matrix

The execution speed of the Stylize > Convolve effect depends on the number of coefficients which are different from zero inside the matrix. In other words, the more zero coefficients you will have in the matrix, the faster the effect will be applied.

3rd example : How to have a sharper image :

Obtaining a sharper image is the opposite as obtaining a blurred image.

The surrounding pixels will have less weight than the central pixel : in other words, they will be less represented than the central pixel.

Let's take a look at the matrix opposite : each coefficient is equal to -2, except the central coefficient which is equal to 22. The central coefficient is really higher than the coefficients surrounding it.

Now we can apply this effect to our logo :


Before applying the effectAfter applying the effect

As seen above, the weighted average of the blue (or opaque white) pixels gives ... a blue (or white) pixel. That's not always the case, as we will see later.

For the pixels located at the frontier between the blue and white areas, the situation is a bit more complicated : they will become more visible than the blue and white pixels surrounding them.
In other words they will become a little darker.


It results a sharper image ...

4th example : how to draw the edge of a picture :

In order to obtain the edges of a picture, you need to have a sharper image and you need also to make the pixels surrounded by same color pixels become black.

To do so, we will use a matrix which coefficients are close from those we used in the last example. Please note that the sum of the surrounding coefficients is equal to the opposite of the central coefficient.

In this case, the pixels surrounded by pixels with the same color will become black. The weighted average of the values (or colors) is equal to 0.

The pixels at the frontier between the blue logo and the white background will be strengthened.
Here is the result :


Before applying the effectAfter applying the effect

5th example : How to emboss an image :

Adding relief to an image can be done by strengthening the pixels colors in a given direction and by reducing the impact of the pixels colors in the opposite direction.

The matrix opposite allows to emboss the image as if a light source was added at its right. (all the layers have been merged before applying the effect)


Before applying the effectAfter applying the effect

Now, let's study a few notions :

* We saw that our effect was modifying the color of the pixels on the screen. It is also possible to modify the pixels transparency by using the Use alpha button.

In this case, the calculation of the weighted averages is applied to the alpha component of the pixels too.

* The Border popup menu allows to choose how the pixels at the border of the image will be calculated. (The pixels located at the border of your image don't have neighboring pixels ...)
You can choose to use as neighboring pixels :

- Black pixels (none option)
- Pixels resulting from a symmetry of your image (mirror option)
- Pixels resulting from reproduction of the image (tile option)
- Pixels resulting from reproduction of the last (first) line (or column) of pixels (repeat option)

* The multiplying coefficient allows to multiply all the coefficients of the matrix by the same value.
It does not change anything to your picture if all non-zero coefficients of your matrix are the same. Otherwise your convolution effect will be more or less pronounced.

Some preset examples :

Now that you have some basis about the convolution matrix, you can try to modify the numerous matrices at your disposal in the bin menu of your effect.

Below, you will find the results obtained with the matrix :


Blurred ImageSplit ImageOnly the edges


Embossed ImageSpecial lightningOther Results