lundi 12 juillet 2021

What is the math behind the SVG

I'm currently writing a simple SVG interpreter (not exhaustive of course, this would be pretty complicated), and I find myself struggling with the <feTurbulence> filter.

Basically, there are two types of noise that may be generated :

  • fractalNoise is actually pretty simple to generate, since the original Perlin noise generator can be used (sample code may be found here for example).
  • turbulence is the default filter, and at first I thought that the only important factor would be that the noise is divergence-free, so I tried applying ∇ x f to a vector field with only the z component non-null, to get a divergence-free 2D random vector field (since ∇.(∇ x f) = 0). The issue is that the resulting noise looks nothing like it's supposed to.

Here is what chrome generates using fractalNoise and turbulence (from here) :

The images generated by chrome

And here are the noises I'm able to generate with the math I described above :

My fractal noise

My first try at turbulent noise

There are a lot of issues here. First of : in the noise generated by the SVG interpreter, I'm not sure that I understand what the colors represent. The fractal noise seems "brigther" than mine, although they both share the same "quality" (mine goes from 0 to 1 on all color channels).

As for the turbulent noise, generating a 2D field means that I only have 2 components to work with, not 3, but most importantly I'm certain that this is not how the actual turbulent noise is generated. Does anyone know what is the math for this noise generator ?

Thanks !




Aucun commentaire:

Enregistrer un commentaire