Talk about SVG's feTurbulence filter

Many times, when we lay out game maps or animation scenes, we need to simulate the shapes or textures created by nature such as flames, trees, clouds, etc., at this time, you will find that these shapes look very regular as a whole, but The continuation of the shape is completely random, orderly in chaos.

In the 1980s, Ken Perlin thought about how to simulate these natural textures, and gave his answer. On the completely random white noise function, smooth interpolation is performed with the easing curve, so that the image of the function is closer to the image of natural noise, that is, the image that conforms to the shape and texture of the natural world, thus invented the Perlin noise algorithm. After the Perlin noise algorithm was proposed, it has played a great role in many scenes and has provided a lot of help for Disney in creating movie scenes. It has won an Oscar scientific and technological achievement award and is an algorithm that has been recognized for acting.

Now the Perlin algorithm has become a member of the foundation of computer graphics. Any graphics-related tool library has its implementation. We can use these tools to learn the Perlin noise algorithm from an application perspective.

In SVG, the feTurbulence filter can use Perlin functions to create rich images. When using the feTurbulence filter, we can see the effect intuitively by adjusting the parameters. This article is a learning record of the feTurbulence filter. Through some experiments, we can understand the influence of different parameters on the image created by the feTurbulence filter.

Parameters of feTurbulence

First of all, through mdn we can get a preliminary understanding of the basic situation of the feTurbulence filter, which receives five parameters:

• baseFrequency (default value: 0)
• numOctaves (default: 1)
• seed (default: 0)
• stitchTiles (default: noStitch)
• type (default: turbulence)

Although I don’t know what these five parameters have, since all the parameters of feTurbulence have default values, let’s create a filter without getting involved, and then explore the parameters one by one. The code is as follows:

<svg width="500" height="500">
  <!-- 定义一个滤镜预设组 -->
  <filter id='noise'>
    <!-- 向组中添加主角 -->
    <feTurbulence/>
  </filter>
  <!-- 创建一个矩形，把滤镜效果应用到矩形上 -->
  <rect width="100%" height="100%" filter="url(#noise)" fill="none">
</svg>

baseFrequency

Put the above code into the page to run, we can't see anything, because the default value of baseFrequency is 0 when no parameters are entered. The baseFrequency affects the frequency of the noise. When the frequency of the noise is 0, there is no image.

The higher the frequency, the denser the noise that can be displayed in the same display area. When the value of baseFrequency is a very small value (such as 0.01), the generated image is larger and the details are richer. After increasing by 10 times, the original The image is reduced by 10 times and placed in the upper left corner, and the remaining space is used to place more noise

The following is the process of the value of baseFrequency gradually increasing

The baseFrequency attribute can accept two values. When the parameters are entered in this way, these two values will be regarded as the base frequency on the x-axis and y-axis, respectively. Therefore, we can generate noise that is stretched in a certain direction.

numOctaves

Octaves means octaves. Anyone who has played music knows that the pitch gap between the same-named sounds in two adjacent sound groups is an octave. The vibration images of these two sounds are similar, and the sound of the higher octave is similar. The vibration frequency is exactly twice the octave lower. When two sounds that differ by an octave are played at the same time, a more detailed sound can be produced.

In a mathematical function, a function can be superimposed with another function of a different frequency, and the same effect can be achieved, producing a functional image with unchanged contour and richer details.

Let's take the sin function as an example, the following is the function image of f(x) = sin(x) and f(x) = sin(10x):

The amplitude of the two images is the same. The frequency of the latter is 10 times that of the former, which is 10 octaves higher. Now let the two functions bounce at the same time, forming:

f(x) = sin(x) + sin(10)

What will his image look like?

Comparing the previous three images, the third image feels like the first image drawn using the second image as a brush. This is the charm of octave chords. I am still the same as I am, but I am getting bells and whistles. Wouldn’t it be happier if we were a little more fancy, adding a function 10 octaves higher on top of the third function.

f(x) = sin(x) + sin(10x) + sin(20x)

Speaking of the numOctaves attribute, when we set this attribute, the algorithm will superimpose several different frequencies of itself on the original noise function to form a more detailed noise. Take a look at the dynamic effect when numOctaves increases. (Let me talk about it here, numOctaves only accepts positive integers that are not equal to 0. This is because the smallest unit of octave superposition is an octave. If a function is superimposed with its own non-integer multiple of frequency, the general shape of the final function will be affected. .)

The same as the effect of the sin function superimposing its own octave function, as numOctaues continues to increase, the approximate shape of the image is still the same as when numOctaues is equal to 1, but the details continue to increase. One point worth noting is that when numOctaues is greater than 6, the difference between the images becomes inconspicuous. This is not that the octave superposition will not take effect after reaching a certain threshold, but the change after superposition is more subtle. You need to take a microscope and take a look.

type

The type attribute of feTurbulence combines two functions in the same subset into one filter, and the value of type is turbulence and fractalNoise. Turbulence means that when the Berlin function is synthesized, only the absolute value of the function is taken. The synthesized function is not diversified at 0, and the image will have some sharp effects, which looks like turbulence. fractalNoise superimposes white noise on the original noise, so that the final result presents a Gaussian blur effect. The principle of the correspondence between the two types can be Baidu Google. To put it simply, the difference between the two is whether there is any ambiguity.

The following are the effects of the two types

stitchTiles

StitchTiles need to use multiple graphics to be effective. When we randomly set two graphics using the feTurbulence filter and put them together, the boundary of the two graphics will appear to be faulty. The two figures are independent individuals, taking care of what they look like.

But sometimes, we need to make two graphs look like they are separated from a continuous set. At this time, you can set the stitchTiles property of the filter to stitch. At this time, the borders of the graphics will be continuous.

seed

Seed means seed, which is an input that every random number algorithm needs to use. In all pseudo-random number algorithms, when the input seed is the same, the output is always the same.

Use of feTurbulence

From the above all the way to here, there have been many images created by feTurbulence filters along the road, which are static, dynamic, dense, and stretched. These images may feel strange to people, but these are indeed images that appear in daily life. When the old TV is playing the picture, it will be affected by electromagnetic waves, and occasionally there will be a distorted picture that is swept away; the rough surface of the kraft paper will show a unique texture under the light...When we want to express a When things are affected by natural noise, you can use the feTurbulence filter, combined with light, pictures, color blocks and other elements to describe.

Water flow pattern

When the river is flowing horizontally, there will be many small ripples on the water surface. This kind of texture conforms to the characteristics of the horizontally stretched image. We can create an image and add a little dynamic effect.

<filter id='turbulence-noise' x='0%' y='0%' width='100%' height='100%'>
  <feTurbulence id="feturbulence" baseFrequency="0.015 0.3">
    <animate id="ani1" attributeName="baseFrequency" dur="15s" from="0.015 0.3" to="0.035 0.5" begin="0s; ani2.end"
      fill="feeze">
    </animate>

    <animate id="ani2" attributeName="baseFrequency" dur="15s" from="0.035 0.5" to="0.015 0.3" begin="ani1.end"
      fill="freeze">
    </animate>
  </feTurbulence>
</filter>

We can see this effect by running the code:

On the basis of this effect, use the feDisplacementMap filter to map a static river picture to the image, you can see the following effect. Here reference online Gangster works , are interested can look at the source code.

Paper texture

Compared with the lines of the water flow, the lines of the paper are denser, the image details are richer, and the line boundaries of the lines are not obvious. According to this feature, we can set the parameters of feTurbulence to

<feTurbulence type="fractalNoise" baseFrequency='0.04' result='noise' numOctaves="5" />

Get an image like this

Then, use white light to illuminate from the top of the image at a 45 degree angle to get the following figure

to sum up

feTurbulence implements the Perlin noise algorithm, so we can use it to simulate most of the naturally formed images. This is a highly playable filter. As long as we understand the principle of light and shadow changes and understand the world from a mathematical perspective, You can find many elements that can be combined with the feTurbulence filter to create more unexpected gameplay.

​

reference

[Computer Graphics] Perlin Noise Examples and Understanding

[Graphics] Talk about noise

The dynamic effect of flowing water

SVG Filter Effects: Creating Texture with <feTurbulence>