SVG/Tutorials/Filter/feTurbulence

Der primitive Filter feTurbulence dient der Erzeugung einer Textur.

Folgende Attribute sind möglich:

• baseFrequency: Grundfrequenz des Rauschens; Zahlwert (oder kommagetrennte Liste zweier Zahlen) für X (und Y), Standardwert ist 0
• numOctaves: höherer Wert ergibt detailliertere Textur, Standardwert ist 1
• seed: Zufallszahl, Standardwert ist 0

Diese Zahl ist zwar animierbar, aber es ist nicht möglich immer wieder andere Zafallszahlen zu erzeugen.

Beachten Sie: Die Werte 514, 1977, 2337, 4777, 8032 und 9615 erzeugen im Firefox anstelle einer Glättung große Rechtecke im Bild.

• stitchTiles: legt fest, ob die Grundfrequenz exakt wie angegeben verwendet wird oder an Höhe oder Breite der Filterunterregion angepasst werden soll
  • stitch: sorgt für glatteren Übergang (Standardwert)
  • noStitch
• type
  • turbulence: (Standardwert) erzeugt eine Turbulenz (turbulentes Rauschen)
  • fractalNoise: erzeugt fraktales Rauschen

Beispiel ansehen …

  <filter id="turb1">
    <feTurbulence
      type="turbulence"
      baseFrequency="0.01"
      numOctaves="1"
      in="SourceGraphic"/>
  </filter>
  
  <filter id="turb2">
    <feTurbulence
      type="turbulence"
      baseFrequency="0.1"
      numOctaves="1"
      in="SourceGraphic"/>
  </filter>
  
  ...

  <filter id="turb9">
    <feTurbulence
      type="fractalNoise"
      baseFrequency="0.1"
      numOctaves="1"
      in="SourceGraphic"/>
  </filter>

In der oberen Reihe können Sie sehen, wie die Werte des baseFrequency-Attributs die Struktur verändern. Kleinere Werte ergeben verschwommene Wellen, größere Werte lassen die Muster kleinteiliger werden. Wenn Sie für x und y zwei verschiedene Werte angeben, wie in der rechten Spalte zu sehen, können Sie die Muster in die Länge, bzw. Breite ziehen.

Auch die Erhöhung des numOctaves-Attributs lässt das Muster kleinteiliger wirken, wie Sie in der 2. Reihe sehen können.

In der unteren Reihe sehen Sie, wie Sie mit type="fractalNoise" fraktales Rauschen erzeugen können.

Auf apike.ca können Sie in einer Live-Demo ausprobieren, wie sich die Textur durch Anpassung der Parameter verändert.

Kombination mit anderen Filtern

Wenn Sie den feTurbulence-Filter mit anderen Filtern kombinieren, können Sie viele interessante Effekte erzielen.

Beispiel ansehen …

  <filter id="turb6">
    <feTurbulence
      type="turbulence"
      baseFrequency="0.02"
      numOctaves="1"
      in="SourceGraphic"/>
	 <feColorMatrix type="saturate" values="4" />
  </filter>
  
  <filter id="turb16">
    <feTurbulence
      type="turbulence"
      baseFrequency="0.02"
      numOctaves="1"
      in="SourceGraphic"/>
	 <feColorMatrix type="saturate" values="4" />
	 <feConvolveMatrix 
        order="3" 
        preserveAlpha="true" 
        kernelMatrix="
		   0 -1  0 
		  -1  5 -1 
		   0 -1  0"/>  
  </filter>

In diesem Beispiel werden die mit feTurbulence erzeugten Flächen in ihren Farbwerten geändert.
Die Sättigung kann man mit feColorMatrix verändern, mit feConvolveMatrix erreichen Sie Scharfzeichnungseffekte.

Anwendungsbeispiele

Wolken

Wolkenmuster ansehen …

    <defs>
       <filter id="wolke">
            <feTurbulence type="turbulence" baseFrequency="0.055" numOctaves="5"/>
            <feColorMatrix type="luminanceToAlpha"/>
            <feColorMatrix type="matrix" values="0 0 0 -1 1    0 0 0 -1 1    0 0 0 -1 1   0 0 0 0 1"/>
            <feComponentTransfer>
                <feFuncR type="table" tableValues="0   0    0   .4  1"/>
                <feFuncG type="table" tableValues="0   .15  .5  .9  1"/>
                <feFuncB type="table" tableValues="0   0    1   1  1"/>
                <feFuncA type="linear" slope="1" intercept="0"/>
            </feComponentTransfer>
        </filter>

      <mask id="textMask">
         <text style="fill:white;" x="10" y="60">
         Wolke
         </text>
      </mask>
    </defs>

    <text x="10" y="60" filter="url(#wolke)" mask="url(#textMask)">
    Wolke
    </text>

In diesem Beispiel wird mit dem Filter #wolke eine wolkenähnliche Textur erzeugt. Diese wird dann in einer Maske über den Text gelegt.

Wasser in Bewegung

In diesem Beispiel wird der Refraktionsfilter mit SMIL animiert, sodass es aussieht, als ob sich die Korallen und Fische in der Strömung bewegen.

Achtung!

Um dieses Beispiel zu untersuchen, öffnen Sie bitte …

1. das Beispiel mit einem Klick auf Vorschau in einem neuen Tab!
2. den Seiteninspektor mit F12!

Korallen in der Strömung - SMIL-Animation ansehen …

 <filter id="filter_refract">
  <feTurbulence baseFrequency="0.01"/>
  <feColorMatrix type="hueRotate">
   <animate attributeName="values" values="0;360" dur="3s" repeatCount="indefinite"/>
  </feColorMatrix>
  <feDisplacementMap in="SourceGraphic" scale="20" xChannelSelector="R" yChannelSelector="G"/>
 </filter>
 <image width="984" height="659" href="https://upload.wikimedia.org/wikipedia/commons/8/8b/Gulf_of_Eilat_%28Red_Sea%29_coral_reefs.jpg">
 	<desc>Coral reef with Pseudanthias squamipinnis, Gulf of Eilat Red Sea by Daviddarom</desc>
 </image>

Weblinks

Quellen

• wikibooks.de: Urfilter feTurbulence

sehr schöne Beispiele :

• svgopen.org: Beispiele und Kombinationen mit anderen Filtern
• about-svg.de: Wolkentransformation

Referenz

• SVG/Elemente/feTurbulence