SVGFETurbulenceElement.seed — Eigenschaft · JavaScript-Referenz

Signatur

SVGFETurbulenceElement.seed

Beschreibung

Die Eigenschaft seed der Schnittstelle SVGFETurbulenceElement spiegelt das seed-Attribut eines <feTurbulence>-Filterprimitivs wider. Der Wert ist der Startwert für den Pseudo-Zufallsgenerator, der das Perlin-Rauschen (turbulence oder fractalNoise) erzeugt. Gleicher Startwert und gleiche übrige Parameter liefern immer dasselbe Muster. Ein anderer Startwert erzeugt ein anderes Muster mit denselben statistischen Eigenschaften.

Die Eigenschaft selbst ist schreibgeschützt und liefert ein SVGAnimatedNumber-Objekt. Über seed.baseVal liest und schreibt man den Grundwert aus dem Attribut. seed.animVal liefert den aktuellen Wert, auch während einer SMIL-Animation (<animate attributeName="seed">). Wer baseVal setzt, ändert gleichzeitig das Attribut im DOM.

Typische Anwendungen sind Papier-, Wolken-, Marmor- oder Rauschtexturen, „Glitch“- und Wabereffekte (zusammen mit <feDisplacementMap>) und neu gewürfelte Muster beim Laden der Seite oder auf Knopfdruck.

Rückgabewert

Typ

SVGAnimatedNumber

Beschreibung

Objekt mit baseVal (Zahl, les- und schreibbar) und animVal (Zahl, nur lesbar). Fehlt das Attribut, ist der Standardwert 0.

Beispiele

Startwert auslesen

// <svg><filter id="noise"><feTurbulence id="turb" type="fractalNoise" baseFrequency="0.8" seed="42"/></filter></svg>
const turb = document.getElementById('turb');

console.log(turb.seed instanceof SVGAnimatedNumber);
console.log(turb.seed.baseVal);
console.log(turb.seed.animVal);

true 42 42

Neues Rauschmuster per Knopfdruck

const turb = document.querySelector('#noise feTurbulence');
const button = document.querySelector('#reroll');

button.addEventListener('click', () => {
  // Ganze Zahl verwenden, da Nachkommastellen ohnehin abgeschnitten werden
  const newSeed = Math.floor(Math.random() * 10000);
  turb.seed.baseVal = newSeed;
  console.log(turb.getAttribute('seed'));
});

z. B. "7314"

Flackernder Glitch-Effekt mit requestAnimationFrame

const turb = document.querySelector('#glitch feTurbulence');
let last = 0;

const tick = (time) => {
  // Etwa 12 neue Muster pro Sekunde
  if (time - last > 80) {
    turb.seed.baseVal = (turb.seed.baseVal + 1) % 1000;
    last = time;
  }
  requestAnimationFrame(tick);
};

requestAnimationFrame(tick);

// Wichtig · Fallstricke

Nicht direkt zuweisen: turb.seed = 5 hat keine Wirkung, denn die Eigenschaft ist schreibgeschützt. Richtig ist turb.seed.baseVal = 5 oder turb.setAttribute('seed', '5').
Nachkommastellen: Laut Filter-Effects-Spezifikation wird der Startwert vor der Rauscherzeugung in Richtung null auf eine ganze Zahl gekürzt. 1.2 und 1.9 erzeugen also dasselbe Muster. Bei SMIL-Animationen ändert sich das Bild deshalb sprunghaft und nicht fließend.
Performance: Jede Änderung von seed berechnet den ganzen Filter neu. Bei großen Filterflächen oder hohem numOctaves kann das auf schwacher Hardware ruckeln. Ändern Sie den Wert deshalb gedrosselt und nicht in jedem Frame.
Kompatibilität: Die Eigenschaft wird in allen modernen Browsern unterstützt. Die Rauschmuster sind je nach Browser aber nicht garantiert pixelgenau gleich.

Siehe auch

SVGFETurbulenceElement SVGFETurbulenceElement.baseFrequencyX SVGFETurbulenceElement.numOctaves SVGFETurbulenceElement.type SVGAnimatedNumber SVGFEDisplacementMapElement SVGFETurbulenceElement.result