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