feTurbulence

facebook-svg gplus-svg twitter-svg

El filtro <feTurbulence> crea una imagen semitransparente, que puede ser utilizada junto con otros filtros para crear un efecto como de ondas al agua, y puede aceptar estos atributos:

Atributos

type: puede tomar uno de estos dos valores: turbulence o fractalNoise. El valor por defecto es turbulence.

baseFrequency: puede tomar como valor uno o dos números. Si el valor son dos números, el primero representa la frecuencia base en x y el segundo la frecuencia base en y. Si toma como valor un solo número, la frecuencia base en x es igual a la frecuencia base en y. El valor por defecto de baseFrequency es 0.

numOctaves: toma como valor un número integro, y representa el número de octavas utilizado para calcular el grado de detalle del ruido. El valor por defecto es 1. Un número excesivamente grande puede producir una sobrecarga de la CPU.

En el siguiente ejemplo pruebe variar el valor numOctaves para valores muy pequeños de la frecuencia base.

See the Pen feTurbulence baseFrequency & numOctaves by Gabi (@enxaneta) on CodePen.

seed: es un número integro utilizado para calcular la distribución aleatoria. El valor por defecto es 1. Si los demás atributos son idénticos, utilizamos el mismo valor de seed para generar dos imágenes iguales.

See the Pen SVG feTurbulence seed by Gabi (@enxaneta) on CodePen.

stitchTiles: Utilizado para intentar una transición suave en los bordes.

Un caso práctico

La parte interesante viene ahora, porque podemos combinar este filtro con otro, por ejemplo feDisplacementMap para conseguir una imagen deformada.


<svg width="400" height="267" viewBox="0 0 600 400"
     xmlns="http://www.w3.org/2000/svg">
  <filter id="displacementFilter">
    <feTurbulence type="turbulence" baseFrequency="0.01 .05"
        numOctaves="1" result="turbulence" seed="53"/>
    <feDisplacementMap in2="turbulence" in="SourceGraphic"
        scale="50" xChannelSelector="R" yChannelSelector="B"/>
  </filter>

  <image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="moon.jpg" width="600" height="400" x="-15" y= "-15"  filter="url(#displacementFilter)" />
</svg>		
        

See the Pen feTurbulence #1* by Gabi (@enxaneta) on CodePen.

Y también podemos animar este filtro, en concreto podemos animar el valor de baseFrequency para conseguir un efecto de ondas al agua.


var filtro = document.querySelector("#displacementFilter feTurbulence");
var fotogramas = 0;
var rad = Math.PI / 180;

function AnimarBaseFrequency() {
  //baseFrequency="0.01 .1"
  bfx = 0.01;// baseFrequency en x
  bfy = .1; // baseFrequency en y
  fotogramas += .5
  bfx += 0.001 * Math.cos(fotogramas * rad);
  bfy += 0.005 * Math.sin(fotogramas * rad);
  //baseFrequency
  bf = bfx.toString() + ' ' + bfy.toString();
  filtro.setAttributeNS(null, 'baseFrequency', bf);
  window.requestAnimationFrame(AnimarBaseFrequency);
}

window.requestAnimationFrame(AnimarBaseFrequency);		
        

See the Pen feTurbulence #2* by Gabi (@enxaneta) on CodePen.

Vea también este otro ejemplo un poco más complejo.