Bildoben  
aptico-Home | AGB-(c) | SVG-Tutorial Inhalt
Schatten

SVG Tutorial

  svg tutorial index  |  Kapitel 14   

14.22 feTurbulence

Der primitive Filter feTurbulence erzeugt eine Turbulenz oder ein Fraktal im Zielrechteck. Benötigt dabei kein Input-Bild.

Wenn Sie den primitiven Filter feTurbulence verwenden, wird das Output-Bild durch die Perlin-Turbulenz-Funktion erzeugt. Diese berechnet turbulente Strukturen, wie z.B. Wolken oder Marmorierungen, durch welche das Zielrechteck (die Filterregion) komplett ausgefüllt wird. Daher hat das Input-Bild keinen Einfluss auf auf den Filter.

Das Attribut type bietet Ihnen die Möglichkeit durch den (voreingestellten) Wert turbulence eine Turbulenz oder durch den Wert fractalNoise ein Fraktal erzeugen zu lassen. Wenn Sie dieses Attribut nicht verwenden wird eine Turbulenz erzeugt.

Mit baseFrequency legen Sie einen oder zwei, durch Komma getrennte, Frequenz-Parameter fest, die von der Perlin-Turbulenz-Funktion bei der Berechnung verwendet werden. Wenn Sie zwei Zahlen als Wert verwenden, legt die erste Zahl die Frequenz für die x-Richtung und die zweite Zahl die Frequenz für die y-Richtung fest. Wenn Sie nur eine Zahl als Wert verwenden, wird diese sowohl für die horizontale als auch für die vertikale Frequenz verwendet. Voreingestellter Wert für baseFrequency ist 0.

Durch das Attribut numOctaves können Sie die erzeugten Strukturen verfeinern. Das Attribut akzeptiert eine Ganzzahl als Wert, wobei ein höherer Wert eine feinere Strukturierung bewirkt. Voreingestellter Wert ist 1.

Die Perlin-Turbulenz-Funktion verwendet bei der Berechnung der Turbulenz oder des Fraktals eine Zufallszahl, die durch einen Zufallsgenerator erzeugt wird. Die Startzahl dieses Zufallsgenerators läßt sich mit dem Attribut seed verändern. Voreingestellter Wert für dieses Attribut ist 0, d.h. die Startzahl des Zufallsgenerators ist standardmäßig 0. seed erwartet als Wert eine beliebige Zahlangabe.

Das Attribut stitchTiles kann durch den Wert stitch geglättete Übergänge an den Rändern des erzeugten Output-Bildes erzeugen. Falls das Output-Bild als Muster (z.B. von feTile) verwendet werden soll, ist dies eine sinnvolle Einstellung. Der zweite mögliche Wert für stitchTiles und zugleich auch die Voreinstellung für dieses Attribut ist noStitch.

Es ist sinnvoll feTurbulence in Verbindung mit anderen primitiven Filtern einzusetzen.

Beispiel Quellcode


   Grafische Darstellung:   SVG-Darstellung (nur SVG-fähige Browser!)    Screenshot JPG-Grafik
<?xml version="1.0" encoding="ISO-8859-1" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
  "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="380px" height="370px"
     xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <title>Der primitive Filter feTurbulence</title>
  <desc>
    Beispiele für die Verwendung von feTurbulence
  </desc>
  <defs>
    <style type="text/css">
    <![CDATA[
      text {font-family:Verdana,sans-serif; font-size:16px;
            font-weight:bold;}
    ]]>
    </style>
    <symbol id="smilie">
      <desc>ein lachendes Smilie</desc>
      <circle id="gesicht" cx="20" cy="20" r="15"
        fill="yellow" stroke="black" />
      <circle id="auge-links" cx="15" cy="15" r="2"
        fill="black" stroke="black" />
      <circle id="auge-rechts" cx="25" cy="15" r="2"
        fill="black" stroke="black" />
      <line id="nase" x1="20" y1="18" x2="20" y2="23"
        stroke="black" stroke-width="2" />
      <path id="mund" d="M 13 26 A 5 3 0 0 0 27 26"
        stroke="black" fill="none" stroke-width="2" />
    </symbol>

<!-- 6 Filter mit feTurbulence -->
    <filter id="f1">
      <feTurbulence type="turbulence"
        baseFrequency=".2" />
    </filter>
    <filter id="f2">
      <feTurbulence type="fractalNoise"
        baseFrequency=".2" />
    </filter>
    <filter id="f3">

      <feTurbulence type="turbulence"
        baseFrequency=".2,.5"
        numOctaves="5" />
    </filter>
    <filter id="f4">
      <feTurbulence type="fractalNoise"
        baseFrequency=".2,.5"
        numOctaves="5" />
    </filter>
<!-- zusätzlich mit feBlend -->
    <filter id="f5">
      <feTurbulence
        baseFrequency=".5,.1"
        numOctaves="2"
        seed="3"
        result="out1" />
      <feBlend in="SourceGraphic" in2="out1"
        mode="darken"
        result="out2" />
    </filter>
<!-- zusätzlich mit feComposite und feBlend -->
    <filter id="f6">
      <feTurbulence
        baseFrequency=".5,.1"
        numOctaves="2"
        seed="3"
        result="out1" />
      <feComposite in="out1" in2="SourceGraphic"
        operator="in"
        result="out2" />
      <feBlend in="SourceGraphic" in2="out2"
        mode="darken"
        result="out3" />
    </filter>
  </defs>

<!-- die Instanzen des Symbols "smilie" -->
  <use xlink:href="#smilie" transform="translate(20,10) scale(2.7)" />
  <use xlink:href="#smilie" transform="translate(150,10) scale(2.7)"
    filter="url(#f1)" />
  <use xlink:href="#smilie" transform="translate(250,10) scale(2.7)"
    filter="url(#f2)" />
  <use xlink:href="#smilie" transform="translate(150,130) scale(2.7)"
    filter="url(#f3)" />
  <use xlink:href="#smilie" transform="translate(250,130) scale(2.7)"
    filter="url(#f4)" />
  <use xlink:href="#smilie" transform="translate(150,250) scale(2.7)"
    filter="url(#f5)" />
  <use xlink:href="#smilie" transform="translate(250,250) scale(2.7)"
    filter="url(#f6)" />

<!-- Text und Hilfslinien -->
  <text x="145" y="130">feTurbulence</text>
  <text x="58" y="130">Original</text>
  <line x1="137" y1="40" x2="137" y2="330" stroke="black" />
</svg>
      



index  |  Kapitel 14  |  14.21  <<  | 14.22 |  >>  15   Masken