Logo de islavisual
Isotipo de islavisual IslaVisual
imagen de sección

Ultima revisión 06/11/2012

SVG Filters: Uso de feturbulence (Turbulencias)

Esta primitiva de filtro crea una imagen utilizando la función de turbulencia de Perlin. Se permite la síntesis de texturas artificiales como nubes o mármol. La imagen resultante llenará toda la subregión de la primitiva de filtro dada en el elemento filter.

A menudo se utiliza para crear texturas. Crea patrones de ruido suave visual que rellenan un rectángulo con remolinos bastante agradables de color pastel.

Al igual que feFlood, feTurbulence rellena un rectángulo con nuevos contenidos. Tiene un parámetro requerido llamado baseFrequency y también una gran variedad de parámetros opcionales.

Al variar los valores de los parámetros baseFrequency, numOctaves type, stitchTiles y seed, se puede producir numerosos tipos de interés de patrón como efectos de partículas, nubes, arena, ondas, deformaciones, ...

Nos permite definir una matriz cuadrada (típicamente n por n elementos para algún número impar n) en la que la celda o valor central de la matriz se refiere al propio píxel, y las celdas anteriores, izquierda, abajo y derecha de la misma dentro de la matriz, se refieren a los píxeles arriba, izquierda, abajo y a la derecha del píxel en la imagen de origen. Los coeficientes numéricos en la matriz definen el peso que cada píxel vecino que tendrá en el cálculo del nuevo color de dicho píxel.

En el caso más sencillo, una matriz que contenga 9 elementos (es decir, 3 x 3) y que tenga el elemento o celda con valor 1, dejaría cualquier imagen sin efecto alguno, ya que el nuevo valor de un píxel será igual a 1 veces su valor actual más la suma de cero veces los valores de sus ocho vecinos más cercanos.

Filtro: 

<?xml version="1.0" standalone="no"?> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
<svg width="200" height="200" viewBox="0 0 200 200" version="1.1" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <radialGradient id="star_grad">
            <stop offset="0%" style="stop-color: #dffda5;"/>
            <stop offset="50%" style="stop-color: orange;"/>
            <stop offset="100%" style="stop-color: #eddfa6;"/>
        </radialGradient>
        <filter id="star_filter" x="0" y="0" width="100%" height="100%">
            <feTurbulence id="color2" baseFrequency="0.03, 0.02" seed="2" numOctaves="4" type="fractalNoise" stitchTiles="noStitch" result="ripples" />
            <feComposite result="comp" id="feComposite_def" in = "SourceGraphic" in2 = "ripples" operator="out"/>
        </filter>
    </defs>
    <rect id="feConvolveMatrix_image" x="1" y="1" width="200" height="200" fill="white" />
    <circle cx="50%" cy="50%" r="35%" fill="url(#star_grad)" style="filter: url(#star_filter);" />
    <image x = "0" y = "0" width = "100%" height = "100%" xlink:href = "../../img/svg-filters/moon.svg" />
</svg>

Los atributos configurables son:

AtributoDefinición
Es la frecuencia base para la función de ruido. Si dos se proporcionan 2 números, el primer número representa una frecuencia de base en la dirección X y el segundo valor representa una frecuencia de base en la dirección Y. Si se proporciona un número, entonces ese valor se utiliza tanto para X e Y. Su valor por defecto es 0.
Es el parámetro para la función de ruido. A menudo que el valor de numOctaves aumenta, el grano del patrón se vuelve más estrecho y su complejidad fractal también aumenta. Su valor por defecto es 1.
Es el número inicial para generar números pseudo aleatorios. Su valor por defecto es 0.
Sus valores son noStitch y stitch. Si se establece a noStitch, no se hace intento alguno para lograr una transición suave en el borde de las baldosas o azulejos que contienen la función turbulencia. A veces, el resultado mostrará claras discontinuidades en las fronteras del azulejo.
Si se establece a stitch, se ajustarán automáticamente los valores de baseFrequency-x y baseFrequency-y de tal forma que el ancho y altura de feTurbulence contenga un número integral de la baldosa Perlin en anchura y altura de la primera octava. El parámetro baseFrequency se puede ajustar hacia arriba o hacia abajo dependiendo de qué manera tiene menor relatividad.
Indica que tipo de función debe realizar. Sus valores son fractalNoise y turbulence. Su valor por defecto es fractalNoise.

Sobre el autor

Imagen de Pablo Enrique Fernández Casado
Pablo Enrique Fernández Casado

CEO de IslaVisual, Manager, Full Stack Analyst Developer y formador por cuenta ajena con más de 25 años de experiencia en el campo de la programación y más de 10 en el campo del diseño, UX, usabilidad web y accesibilidad web. También es escritor y compositor de música, además de presentar múltiples soft kills como la escucha activa, el trabajo en equipo, la creatividad, la resiliencia o la capacidad de aprendizaje, entre otras.

Especializado en proveer soluciones integrales de bajo coste y actividades de consultoría de Usabilidad, Accesibilidad y Experiencia de Usuario (UX), además de ofrecer asesoramiento en SEO, optimización de sistemas y páginas web, entre otras habilidades.