Wellenzauber: Interaktive Mathematische Animationen mit JavaScript

Zurück zur Übersicht…

Willkommen zum erweiterten Blogbeitrag über Wellenbewegungen mit verschiedenen Winkelfunktionen! 🚀

Hast du dich schon einmal gefragt, wie Mathematik Texte und Objekte so zum Tanzen bringen kann? Aufbauend auf meinem Beitrag „Wie Mathematik Texte tanzen lässt: Die Sinuswellen-Animation erklärt“ zeige ich dir hier, wie du mit ein paar kleinen Änderungen an der zugrunde liegenden Mathematik noch viel mehr dynamische Effekte erzielen kannst.

In diesem Artikel wirst du entdecken, dass nicht nur die klassische Sinuswelle faszinierende Animationen ermöglicht. Du lernst, wie auch Funktionen wie Cosinus, Tangens und Arkus-Sinus zu ganz eigenen visuellen Erlebnissen führen. Außerdem werfen wir einen Blick auf exponentielle Prozesse: Mit der exponentiellen Dämpfung (🌊) lassen sich beispielsweise natürliche Abklingprozesse wie bei Stoßdämpfern im Auto simulieren, während die exponentielle Verstärkung (⚡) dir zeigt, wie Systeme von einem unscheinbaren Start zu beeindruckender Dynamik heranwachsen – ganz ähnlich wie Verstärker in der Elektronik.

Tauche mit mir ein in diese spannende Welt der mathematischen Animationen und entdecke, wie du mit ein paar Codezeilen und mathematischen Tricks Texte und Objekte zum Leben erwecken kannst. Lass uns gemeinsam herausfinden, wie vielseitig und alltagsnah die Mathematik ist – und wie sie dir dabei helfen kann, deinen Projekten einen echten Wow-Effekt zu verleihen! 🔥

Wellenbewegung mit verschiedenen Winkelfunktionen

Mathematik ist die Musik der Vernunft

Aktueller Modus: –
Setting: –

Preset:

Farbverlauf & Neon-Glühen aktivieren

Primärfarbe: Sekundärfarbe:

Amplitude: Frequenz: Wellenlänge:

1. Sinus-Welle

Die Sinus-Welle ist eine der grundlegendsten und häufigsten mathematischen Funktionen in der Physik, Technik und Computergrafik. Sie beschreibt eine harmonische Schwingung und findet Anwendungen in der Signalverarbeitung, Audiotechnik und Animation. In der Programmierung kann eine Sinus-Welle genutzt werden, um periodische Bewegungen oder Schwingungen zu simulieren, wie z. B. Wellen auf Wasser oder oszillierende Animationen.

Codeausschnitt in Javascript:

Copy to Clipboard

Mathematische Erklärung

Sinusfunktion: Die Funktion sin(x) ist eine periodische Funktion mit Werten im Bereich von [-1,1] . Sie beschreibt eine gleichmäßige Wellenbewegung.

Skalierung: Die Multiplikation mit this.amplitude passt die Amplitude der Welle an. Eine größere Amplitude führt zu einer höheren Welle, eine kleinere zu einer flacheren Welle.

Berechnung: Für jedes Zeichen oder Pixel wird der entsprechende y-Wert durch die Sinusfunktion berechnet. Dabei wird der x-Wert um eine bestimmte Wellenlänge verschoben, sodass eine gleichmäßige, fließende Wellenbewegung entsteht.

Visuelle Darstellung

Die Grafik zeigt eine Sinus-Welle als Merkhilfe für die mathematische und programmiertechnische Umsetzung.

2. Cosinus-Welle

Die Cosinus-Welle ist eng mit der Sinus-Welle verwandt und wird häufig in mathematischen und technischen Anwendungen genutzt. Sie beschreibt ebenfalls eine harmonische Schwingung, jedoch ist sie im Vergleich zur Sinus-Welle um 90° () phasenverschoben. Diese Eigenschaft wird oft in der Signalverarbeitung und Animation genutzt.

Codeausschnitt in Javascript:

Copy to Clipboard

Mathematische Erklärung

Cosinusfunktion:
Die Funktion $\cos(x)$ ist ähnlich wie die Sinusfunktion, jedoch um 90° ( $\pi/2$ ) phasenverschoben.

Vergleich zu Sinus:
Mathematisch gilt: $\cos(x) = \sin(x + \frac{\pi}{2})$

Ergebnis:
So entsteht eine Wellenbewegung, die der Sinuswelle sehr ähnlich ist, jedoch leicht verschoben auftritt.

Visuelle Darstellung

Die Grafik zeigt eine Cosinus-Welle als Merkhilfe für die mathematische und programmiertechnische Umsetzung.

3. Tangens-Welle

Die Tangens-Welle unterscheidet sich grundlegend von Sinus- und Cosinus-Wellen. Während Sinus und Cosinus harmonische, periodische Schwingungen erzeugen, zeigt die Tangens-Funktion steil ansteigende Werte in der Nähe ihrer Asymptoten. Dadurch eignet sie sich für spezielle Animationen und mathematische Simulationen mit abrupten Änderungen.

Codeausschnitt in Javascript:

Copy to Clipboard

Mathematische Erklärung

Tangensfunktion:
Die Funktion $\tan(x)$ ist ebenfalls periodisch, besitzt jedoch bei
$x = \frac{\pi}{2} + k\pi$ (für $k \in \mathbb{Z}$ ) senkrechte Asymptoten. Das bedeutet, dass die Funktion dort divergiert.

Skalierung:
Durch Multiplikation mit $\frac{\text{amplitude}}{2}$ versucht man, die Ausschläge etwas zu dämpfen – trotzdem können starke Sprünge auftreten.

Effekt:
Die resultierende Animation zeigt plötzliche, sehr starke Ausschläge, wenn sich $x$ einem Asymptotenwert nähert.

Visuelle Darstellung

Die Grafik zeigt eine Tangens-Welle als Merkhilfe für die mathematische und programmiertechnische Umsetzung.

4. Arkus-Sinus

Die Arkus-Sinus-Welle unterscheidet sich von der klassischen Sinus-Welle dadurch, dass sie nicht kontinuierlich verläuft, sondern aufgrund der eingeschränkten Wertebereiche eine „zusammengefaltete“ Version der Sinuswelle erzeugt. Dies führt oft zu einem zickzack- oder treppenartigen Verlauf.

Codeausschnitt in Javascript:

Copy to Clipboard

Mathematische Erklärung

Arkus-Sinus:
Die Funktion $\asin(x)$ (Arkus-Sinus) liefert den Winkel, dessen Sinus den Eingabewert hat.

Bereichseinschränkung:
Da $\asin(x)$ nur Werte zwischen $-\frac{\pi}{2}$ und $\frac{\pi}{2}$ zurückgibt, führt die Verkettung mit $\sin(x)$ zu einer „zusammengefalteten“ Version der Sinuswelle – oft resultiert daraus ein zickzack- oder dreiecksförmiger Verlauf.

Ergebnis:
Die Animation zeigt eine wellenartige Bewegung, die in ihrer Form von einer klassischen Sinuswelle abweicht und stattdessen ein stufenartiges Muster ergibt.

Visuelle Darstellung

Die Grafik zeigt eine Arkus-Sinus-Welle als Merkhilfe für die mathematische und programmiertechnische Umsetzung.

5. Exponentielle Dämpfung (Exp. Dämpfung)

Exponentielle Dämpfung tritt häufig in physikalischen Systemen auf, beispielsweise bei schwingenden Federn oder gedämpften Oszillationen. Hier wird eine Sinuswelle mit einem exponentiell abnehmenden Faktor multipliziert, um den Dämpfungseffekt zu simulieren.

Codeausschnitt in Javascript:

Copy to Clipboard

Mathematische Erklärung

Exponentialfaktor:
Der Ausdruck $e^{-0.1x}$ bewirkt, dass die Amplitude mit zunehmendem $x$ exponentiell abnimmt.

Multiplikation mit Sinus:
Das Ergebnis ist eine Sinuswelle, deren Ausschläge mit der Zeit (bzw. mit dem fortlaufenden $x$ ) stetig kleiner werden.

Praktischer Effekt:
Dies simuliert einen Dämpfungseffekt, wie man ihn in physikalischen Schwingungssystemen häufig sieht.

Visuelle Darstellung

Die Grafik zeigt die exponentielle Dämpfung als Merkhilfe für die mathematische und programmiertechnische Umsetzung.

6. Exponentielle Verstärkung (Exp. Verstärkung)

Exponentielle Verstärkung beschreibt einen Prozess, bei dem eine Welle anfangs klein beginnt und sich mit der Zeit immer weiter verstärkt. Dies tritt in verschiedenen physikalischen und technischen Systemen auf, beispielsweise bei Resonanzeffekten oder wachsender Energiezufuhr.

Codeausschnitt in Javascript:

Copy to Clipboard

Mathematische Erklärung

Exponentieller Verstärkungsfaktor:
Hier wird der Sinus mit $(1 - e^{-0.1x})$ multipliziert.

Verhalten:
Für kleine $x$ ist $e^{-0.1x}$ nahezu 1, sodass $(1 - e^{-0.1x})$ fast 0 ist – die Welle beginnt also mit geringer Amplitude.

Mit steigendem $x$ nähert sich $(1 - e^{-0.1x})$ dem Wert 1, wodurch die volle Amplitude erreicht wird.

Effekt:
Dies erzeugt eine Welle, die sich „aufbaut“ – zunächst kaum sichtbar, dann allmählich immer stärker.

Visuelle Darstellung

Die Grafik zeigt die exponentielle Verstärkung als Merkhilfe für die mathematische und programmiertechnische Umsetzung.

7. Exponentiell wechselnder Zyklus

Diese Methode erzeugt eine sanft pulsierende Sinuswelle, deren Amplitude durch eine Hüllkurve moduliert wird. Ein Zustandsautomat steuert dabei das zyklische Anwachsen, Halten und Abklingen der Amplitude, sodass ein natürlicher Pulsationseffekt entsteht.

Codeausschnitt in Javascript:

Copy to Clipboard

case 'exp-alt-cycle-smooth': {
  // Zeitbasierter Zustandsautomat
  const now = performance.now();
  const dt = (now - this.lastUpdateTime) / 1000; // Zeitdifferenz in Sekunden
  this.lastUpdateTime = now;
  
  if (this.envelopeState === 'growing') {
    // Wachstumsphase: Die Amplitude wächst exponentiell
    this.envelope += (1 - this.envelope) * this.growthK * dt;
    if (this.envelope >= 0.99) {
      this.envelope = 1;
      this.envelopeState = 'holdMax';
      this.holdStartTime = now;
    }
  } else if (this.envelopeState === 'holdMax') {
    // Haltephase auf Maximum
    if (now - this.holdStartTime >= this.holdMaxTime) {
      this.envelopeState = 'decaying';
    }
  } else if (this.envelopeState === 'decaying') {
    // Abklingphase: Die Amplitude nimmt exponentiell ab
    this.envelope -= this.envelope * this.decayK * dt;
    if (this.envelope <= 0.01) {
      this.envelope = 0;
      this.envelopeState = 'holdMin';
      this.holdStartTime = now;
    }
  } else if (this.envelopeState === 'holdMin') {
    // Haltephase auf Minimum
    if (now - this.holdStartTime >= this.holdMinTime) {
      this.envelopeState = 'growing';
    }
  }
  y = this.envelope * Math.sin(x) * this.amplitude;
  break;
}

Mathematische Erklärung

Zustandsautomat (State Machine):
Ein Algorithmus steuert, wie die Amplitude der Welle sich verändert.

Phasen der Hüllkurve:

Wachstum (Growing): Die Amplitude wächst exponentiell an, gemäß der Formel:
$\frac{dE}{dt} = \text{growthK} \cdot (1 - E)$

Haltephase auf Maximum (HoldMax): Die Amplitude bleibt für eine bestimmte Zeit konstant.

Abklingen (Decaying): Die Amplitude nimmt exponentiell ab:
$\frac{dE}{dt} = -\text{decayK} \cdot E$

Haltephase auf Minimum (HoldMin): Die Amplitude bleibt kurz auf dem niedrigsten Wert, bevor der Zyklus erneut beginnt.

Gesamteffekt:
Das Ergebnis ist eine sanft pulsierende Sinuswelle, deren Amplitude langsam ein- und ausblendet. Dies kann in Animationen oder akustischen Anwendungen für eine dynamische Wellenbewegung genutzt werden.

Visuelle Darstellung

Die folgende Grafik zeigt das Verhalten der exponentiellen Hüllkurve als Merkhilfe für die mathematische und programmiertechnische Umsetzung.

8. Farbverlauf & Neon-Glühen

Farben und visuelle Effekte sind essenziell für ansprechende Designs. Besonders dynamische Farbverläufe und Neon-Glühen verleihen Texten und Animationen eine beeindruckende Tiefe. Doch wie funktioniert das eigentlich?

1️⃣ Farbverläufe – Was passiert hier?

Ein Farbverlauf ist eine fließende Übergangsmischung zwischen zwei oder mehr Farben. In unserer Animation hängt die Farbe jedes Buchstabens von seiner vertikalen Position in der Welle ab.

🔹 Umsetzung in JavaScript:
Jeder Buchstabe bewegt sich sinusförmig (Sinuswelle).
Die Y-Position des Buchstabens bestimmt die aktuelle Mischfarbe.
Zwei Farben (Primär & Sekundär) werden durch lineare Interpolation (Lerp) kombiniert.

📝 Farbverlauf-Berechnung:
In unserem Code passiert das hier:

Copy to Clipboard

🔍 Was passiert hier?
✅ colorValue berechnet die Position des Buchstabens zwischen Min & Max.
✅ Die Mischfarbe wird aus Primär- und Sekundärfarbe anhand von colorValue berechnet.
✅ Der Buchstabe erhält eine neue RGB-Farbe, basierend auf seiner Höhe.

2️⃣ Neon-Glühen – Wie wird es gemacht?

Ein Neon-Effekt entsteht durch mehrere weich auslaufende Schattierungen, die an eine Lichtquelle erinnern.

🔹 Umsetzung in CSS:
Wir verwenden den CSS-Effekt text-shadow:

Copy to Clipboard

Das bedeutet:

0px 0px → Keine horizontale/vertikale Verschiebung.
10px → Weicher Leuchteffekt mit einer Größe von 10 Pixeln.
cyan → Farbe des Neon-Glühens.

🔹 Dynamisches Glühen in JavaScript:
Damit sich das Leuchten an die Bewegung der Buchstaben anpasst, ändern wir die Intensität (glow) basierend auf der Wellenhöhe:

Copy to Clipboard

📌 Hier passiert folgendes:
✅ glow wird aus der absoluten Höhe y berechnet (stärkeres Leuchten bei größerer Bewegung).
✅ text-shadow wird mit zwei Ebenen versehen:

Die erste erzeugt Neon-Glühen in der Primärfarbe.
Die zweite sorgt für einen dezenten schwarzen Schatten (20% Transparenz).

Als Quellcode

Text-Animations.html

Copy to Clipboard

<!DOCTYPE html>
<html lang="de">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Wellenanimation mit verschiedenen Winkelfunktionen</title>
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet" />
  <style>
    body {
      font-family: Arial, sans-serif;
      text-align: center;
      margin-top: 50px;
      background: linear-gradient(to bottom, #f0f0f0, #d9d9d9);
    }
    #wave-container {
      display: flex;
      justify-content: center;
      align-items: center;
      height: 150px;
      background: linear-gradient(to bottom, #e0e0e0, #c0c0c0);
      border-radius: 15px;
      box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.2);
      padding: 20px;
      margin: 20px auto;
      width: 80%;
    }
    #wave-text {
      font-size: 2em;
      font-weight: bold;
      text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3);
      display: inline-block;
    }
    /* Neuer Bereich für den aktuellen Modus */
    #modes {
      margin: 0 auto 20px auto;
      width: 80%;
      font-size: 1.2em;
      color: #333;
    }
  </style>
</head>
<body>
  <div class="container">
    <h1 class="mt-3">Wellenbewegung mit verschiedenen Winkelfunktionen</h1>
    <div id="wave-container">
      <span id="wave-text">Mathematik ist die Musik der Vernunft</span>
    </div>
    
	<div id="modes">
	<div style="display: flex; justify-content: space-between; width: 100%;"><span id="current-mode">Aktueller Modus: -</span>
<span id="current-style">Setting: -</span></div>
	</div>
    
    <br>
    <div class="btn-group">
      <button class="btn btn-primary" onclick="setAnimation('sin')">Sinus</button>
      <button class="btn btn-primary" onclick="setAnimation('cos')">Cosinus</button>
      <button class="btn btn-primary" onclick="setAnimation('tan')">Tangens</button>
      <button class="btn btn-primary" onclick="setAnimation('asin')">Arkus-Sinus</button>
      <button class="btn btn-danger" onclick="setAnimation('exp-damp')">Exp. Dämpfung</button>
      <button class="btn btn-success" onclick="setAnimation('exp-grow')">Exp. Verstärkung</button>
      <button class="btn btn-dark" onclick="setAnimation('exp-alt-cycle-smooth')">Exp Alt Cycle Smooth</button>
      <button class="btn btn-secondary" onclick="stopAnimation()">Animation aus</button>
    </div>
    <br><br>
    <div class="dropdown">
      <button class="btn btn-secondary dropdown-toggle" type="button" data-bs-toggle="dropdown" aria-expanded="false">
        Voreinstellungen
      </button>
      <ul class="dropdown-menu">
        <li><button class="dropdown-item" onclick="applyPreset('amiga')">Amiga Style</button></li>
        <li><button class="dropdown-item" onclick="applyPreset('modern')">Modern Style</button></li>
        <li><button class="dropdown-item" onclick="applyPreset('slowcool')">Slow Cool</button></li>
        <li><button class="dropdown-item" onclick="applyPreset('freakshow')">Freakshow</button></li>
        <li><button class="dropdown-item" onclick="applyPreset('matrix')">Matrix</button></li>		
      </ul>
    </div>
    <br>
    <div>
      <label>Amplitude: <input type="number" id="amplitude" value="20" min="5" max="100" /></label>
      <label>Frequenz: <input type="number" id="frequency" step="0.01" value="0.1" min="0.01" max="1" /></label>
      <label>Wellenlänge: <input type="number" id="wavelength" step="0.1" value="0.3" min="0.1" max="2" /></label>
      <button class="btn btn-info" onclick="updateSettings()">Aktualisieren</button>
    </div>
  </div>

// Einstellungen (Benutzerinput oder Standard)
        this.amplitude = options.amplitude || 20;
        this.frequency = options.frequency || 0.1;
        this.wavelength = options.wavelength || 0.3;
        this.functionType = functionType;
        this.phase = 0;
        this.animationFrame = null;

// Falls der gewählte Modus einen Envelope benötigt:
        if (this.functionType === 'exp-damp' ||
            this.functionType === 'exp-grow' ||
            this.functionType === 'exp-alt-cycle-smooth') {
          if (this.functionType === 'exp-alt-cycle-smooth') {
            this.envelope = 0;
            this.envelopeState = 'growing';  // Mögliche Zustände: growing, holdMax, decaying, holdMin
            this.lastUpdateTime = performance.now();
            // dt-basierte Parameter (anpassbar):
            this.growthK = 1.0;      // Verstärkungsrate (1/s)
            this.decayK = 1.0;       // Dämpfungsrate (1/s)
            this.holdMaxTime = 2000; // Haltezeit oben in Millisekunden
            this.holdMinTime = 1000; // Haltezeit unten in Millisekunden
          }
        }
        this.animateWave();
      }

animateWave() {
        this.phase += this.frequency;
        this.letters.forEach((letter, index) => {
          let y = 0;
          const x = this.phase + index * this.wavelength;
          switch (this.functionType) {
            case 'sin':
              y = Math.sin(x) * this.amplitude;
              break;
            case 'cos':
              y = Math.cos(x) * this.amplitude;
              break;
            case 'tan':
         //     y = Math.tan(x) * (this.amplitude / 2);
                let rawY = Math.tan(x) * (this.amplitude / 2);
				y = rawY;
                //y = Math.max(-this.amplitude, Math.min(rawY, this.amplitude));		 
              break;
            case 'asin':
              y = Math.asin(Math.sin(x)) * this.amplitude;
              break;
            case 'exp-damp':
              y = Math.exp(-x * 0.1) * Math.sin(x) * this.amplitude;
              break;
            case 'exp-grow':
              y = (1 - Math.exp(-x * 0.1)) * Math.sin(x) * this.amplitude;
              break;
            case 'exp-alt-cycle-smooth': {
              // dt-basierter Zustandsautomat
              const now = performance.now();
              const dt = (now - this.lastUpdateTime) / 1000; // dt in Sekunden
              this.lastUpdateTime = now;
              if (this.envelopeState === 'growing') {
                // dE/dt = growthK * (1 - E)
                this.envelope += (1 - this.envelope) * this.growthK * dt;
                if (this.envelope >= 0.99) {
                  this.envelope = 1;
                  this.envelopeState = 'holdMax';
                  this.holdStartTime = now;
                }
              } else if (this.envelopeState === 'holdMax') {
                if (now - this.holdStartTime >= this.holdMaxTime) {
                  this.envelopeState = 'decaying';
                }
              } else if (this.envelopeState === 'decaying') {
                // dE/dt = -decayK * E
                this.envelope -= this.envelope * this.decayK * dt;
                if (this.envelope <= 0.01) {
                  this.envelope = 0;
                  this.envelopeState = 'holdMin';
                  this.holdStartTime = now;
                }
              } else if (this.envelopeState === 'holdMin') {
                if (now - this.holdStartTime >= this.holdMinTime) {
                  this.envelopeState = 'growing';
                }
              }
              y = this.envelope * Math.sin(x) * this.amplitude;
              break;
            }
            default:
              y = Math.sin(x) * this.amplitude;
          }
          letter.style.transform = `translateY(${y}px)`;
        });
        this.animationFrame = requestAnimationFrame(() => this.animateWave());
      }

stopAnimation() {
        if (this.animationFrame) {
          cancelAnimationFrame(this.animationFrame);
          this.animationFrame = null;
        }
      }
	  
      clearText() {
		// Setze den Text wieder in seine ursprüngliche Form
		this.textElement.innerHTML = this.text;
      }	  
	  
	  
    }

// Funktionen zum Starten/Stoppen/Updaten der Animation
    let waveAnimation;
    function setAnimation(type) {
      if (waveAnimation) waveAnimation.stopAnimation();
      waveAnimation = new WaveTextAnimation("wave-text", type, getUserInputs());
      // Aktuellen Modus anzeigen (linksbündig unter dem Canvas)
      document.getElementById("current-mode").innerText = "Aktueller Modus: " + type;
    }
    function stopAnimation() {
      if (waveAnimation) {
  	    waveAnimation.stopAnimation();  
		waveAnimation.clearText();
	  }	
    }
    function updateAnimation() {
      if (waveAnimation) {
        waveAnimation.stopAnimation();
        waveAnimation = new WaveTextAnimation("wave-text", waveAnimation.functionType, getUserInputs());
      }
    }
    function updateSettings() {
        // Aktuellen Modus anzeigen (linksbündig unter dem Canvas)
        document.getElementById("current-style").innerHTML = "Preset: -";	  	
		updateAnimation()
    }	
    function getUserInputs() {
      return {
        amplitude: parseFloat(document.getElementById("amplitude").value),
        frequency: parseFloat(document.getElementById("frequency").value),
        wavelength: parseFloat(document.getElementById("wavelength").value)
      };
    }
    function applyPreset(preset) {
      const presets = {
        amiga: { amplitude: 30, frequency: 0.05, wavelength: 0.2 },
        modern: { amplitude: 20, frequency: 0.1, wavelength: 0.3 },
        slowcool: { amplitude: 10, frequency: 0.05, wavelength: 0.8 },
        freakshow: { amplitude: 50, frequency: 0.5, wavelength: 0.2 },
        matrix: { amplitude: 100, frequency: 0.08, wavelength: 1 }		
      };
      const settings = presets[preset];
      document.getElementById("amplitude").value = settings.amplitude;
      document.getElementById("frequency").value = settings.frequency;
      document.getElementById("wavelength").value = settings.wavelength;
      // Aktuellen Modus anzeigen (linksbündig unter dem Canvas)
      document.getElementById("current-style").innerHTML = "Preset: <b>" + preset + "</b>";	  
	  
      updateAnimation();
    }
  </script>
  <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
</body>
</html>

Zusammenfassung

Jeder Button löst die Funktion setAnimation(type) aus, die eine neue Instanz der Klasse WaveTextAnimation mit dem gewählten mathematischen Modus erzeugt. Dabei werden:

Sinus, Cosinus, Tangens, und Arkus-Sinus direkt mathematisch auf den jeweiligen Funktionen basierende Transformationen angewendet.
Exponentielle Dämpfung und Verstärkung integrieren zusätzliche Faktoren, die das Verhalten der Sinuswelle über $x$ verändern.
Exp Alt Cycle Smooth nutzt einen komplexeren, zustandsbasierten Ansatz, um einen periodischen Envelope zu modellieren, der die Wellenbewegung dynamisch moduliert.

Diese Ansätze verbinden mathematische Funktionen mit visueller Animation und bieten somit eine anschauliche Darstellung, wie unterschiedliche mathematische Modelle das Verhalten von Wellen beeinflussen können.

Last Updated: 16. Februar 2025By johannes

Wellenzauber: Interaktive Mathematische Animationen mit JavaScript

Wellenzauber: Interaktive Mathematische Animationen mit JavaScript

Zurück zur Übersicht…

Wellenbewegung mit verschiedenen Winkelfunktionen

Mathematik ist die Musik der Vernunft

1. Sinus-Welle

Mathematische Erklärung

Visuelle Darstellung

2. Cosinus-Welle

Mathematische Erklärung

Visuelle Darstellung

3. Tangens-Welle

Mathematische Erklärung

Visuelle Darstellung

4. Arkus-Sinus

Mathematische Erklärung

Visuelle Darstellung

5. Exponentielle Dämpfung (Exp. Dämpfung)

Mathematische Erklärung

Visuelle Darstellung

6. Exponentielle Verstärkung (Exp. Verstärkung)

Mathematische Erklärung

Visuelle Darstellung

7. Exponentiell wechselnder Zyklus

Mathematische Erklärung

Phasen der Hüllkurve:

Visuelle Darstellung

8. Farbverlauf & Neon-Glühen

1️⃣ Farbverläufe – Was passiert hier?

2️⃣ Neon-Glühen – Wie wird es gemacht?

Als Quellcode

Zusammenfassung

Leave A Comment Antworten abbrechen

Was dir noch gefallen könnte

Fernwartung mit Zwei Monitoren: Gratis mit Chrome Remote Desktop und AnyViewer

Ratz Fatz Mailer – ein Kontaktformular auf die Schnelle 🚀

Doppelten Mailversand in Formidable Forms verhindern

Lebe kreativ, denke positiv und genieße die kleinen Dinge

Menü

Aktuelles

🔧 JsonSQL Update – April 2025

JsonSQL

Skype ist Geschichte – welche Alternativen jetzt wirklich überzeugen

Social Links