feTurbulence
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.