Wie Mathematik Texte tanzen lässt: Die Sinuswellen-Animation erklärt

Zurück zur Übersicht…

Mathematik steckt in unserem Alltag – und manchmal in den coolsten Animationen! Heute zeige ich dir, wie eine Sinusfunktion einen Text wie eine Welle tanzen lässt, ganz so, wie wir es aus alten Amiga-Demos kennen. 🎮✨

Doch das ist nur der Anfang! Mit ein bisschen Mathematik lassen sich Bewegungen simulieren, Musik visualisieren und sogar Spieleffekte erschaffen. Lass uns eintauchen und entdecken, wie faszinierend Zahlen und Wellen sein können! 🚀

Mathematik ist die Musik der Vernunft

James Joseph Sylvester

Copy to Clipboard

<span id="wave-text">Mathematik ist die Musik der Vernunft</span>

// Werte für die Animation speichern
            this.amplitude = amplitude;    // Höhe der Welle
            this.frequency = frequency;    // Geschwindigkeit der Bewegung
            this.wavelength = wavelength;  // Abstand zwischen den Wellenbergen
            this.phase = 0;                // Startphase der Wellenbewegung

// Jeden Buchstaben des ursprünglichen Textes in ein eigenes <span>-Element packen
            for (let i = 0; i < this.text.length; i++) {
                let span = document.createElement("span");
                
                // Falls das Zeichen ein Leerzeichen ist, wird ein geschütztes Leerzeichen ( ) genutzt
                span.innerText = this.text[i] === " " ? "\u00A0" : this.text[i];
                
                // Jeder Buchstabe bekommt eine inline-block Darstellung, damit er einzeln bewegt werden kann
                span.style.display = "inline-block";
                
                // Den Buchstaben (Span-Element) in das Haupt-Text-Element einfügen
                this.textElement.appendChild(span);
            }

// Alle <span>-Elemente (also die Buchstaben) auswählen
            this.letters = this.textElement.querySelectorAll("span");
            
            // Die Animation starten
            this.animateWave();
        }

// Methode zur Animation des Textes
        animateWave() {
            // Die Phase verändert sich mit jeder Frame-Aktualisierung
            this.phase += this.frequency;
            
            // Durch alle Buchstaben iterieren und die Position anpassen
            this.letters.forEach((letter, index) => {
                // Die Sinusfunktion berechnet die vertikale Position jedes Buchstabens
                let y = Math.sin(this.phase + index * this.wavelength) * this.amplitude;
                
                // Die Transformation wird auf das jeweilige Zeichen angewendet
                letter.style.transform = `translateY(${y}px)`;
            });
            
            // Die Methode wird kontinuierlich aufgerufen, um die Animation fortzusetzen
            requestAnimationFrame(() => this.animateWave());
        }
    }

// Warten, bis die Webseite vollständig geladen ist, bevor das Skript ausgeführt wird
    document.addEventListener("DOMContentLoaded", function() {
        // Ein neues Sinus-Text-Objekt mit bestimmten Parametern erstellen
        new SinusTextDemo("wave-text", { amplitude: 20, frequency: 0.15, wavelength: 0.3 });
    });
</script>

1. Was ist eine Sinuswelle?

Die Sinusfunktion ist eine der grundlegendsten mathematischen Funktionen in der Physik, Technik und Computergrafik. Sie beschreibt periodische Bewegungen – das bedeutet, dass sie wiederholt auf und ab schwingt, genau wie eine Welle auf dem Wasser oder ein Pendel.

1.1 Die allgemeine Formel der Sinusfunktion

Die grundlegende Form einer Sinusfunktion sieht so aus:

$\Huge y = A \cdot \sin(\omega t + \varphi)$

🔢 Was bedeuten die Buchstaben?

y → die Höhe der Welle: an einem bestimmten Punkt
A → Amplitude: Wie hoch und tief die Welle geht
ω → Frequenz: Wie schnell die Welle schwingt
t → Zeit: Die aktuelle Position in der Bewegung
φ → Phase: Verschiebung der Welle entlang der x-Achse

Schauen wir uns das Schritt für Schritt an. 🎢

Die blaue Linie ist eine klassische Sinuswelle.
Die gestrichelten Linien markieren den Maximalwert (𝜋/2) und den Minimalwert (3𝜋/2).
Die Welle beginnt bei 0, steigt bis zum Maximum, fällt wieder auf 0, geht ins Minimum und kehrt zurück.
Das ist die typische Form einer Sinusschwingung – sie ist periodisch und gleichmäßig. 🚀

2. Amplitude: Die Höhe der Welle

Die Amplitude 𝐴 gibt an, wie hoch oder tief die Sinuswelle schwingt. Stell dir vor, du stehst am Strand und siehst Wellen auf das Ufer zurollen. Manche Wellen sind klein, andere groß – das ist die Amplitude.

👉 Mathematisch:
Wenn $A = 10$ , dann schwankt die Welle zwischen +10 und -10.

💡 Visuell:

Copy to Clipboard

Im Code:

Copy to Clipboard

Kleine Amplitude (3): Die Welle schwingt nur wenig auf und ab.
Mittlere Amplitude (10): Die Welle hat größere Ausschläge.
Große Amplitude (20): Die Welle erreicht hohe Spitzen und tiefe Täler.

Das zeigt: Je größer die Amplitude, desto höher und tiefer schwingt die Welle. 🚀

3. Frequenz: Die Geschwindigkeit der Welle

Die Frequenz $ω\omega$ bestimmt, wie schnell sich die Welle bewegt.
Stell dir eine Schaukel vor: Schwingst du langsam hin und her, hast du eine niedrige Frequenz. Wenn du dich schnell bewegst, hast du eine hohe Frequenz.

👉 Mathematisch:
Wenn $ω=0.05\omega = 0.05$ , bewegt sich die Welle langsam.
Wenn $ω=0.2\omega = 0.2$ , bewegt sie sich schnell.

💡 Visuell:

Copy to Clipboard

Im Code:

Copy to Clipboard

Niedrige Frequenz (0.5) → Langsame Schwingungen
Mittlere Frequenz (1.0) → Normale Schwingung
Hohe Frequenz (2.0) → Schnelle Schwingungen

👉 Je höher die Frequenz, desto schneller schwingt die Welle.

4. Wellenlänge: Der Abstand zwischen den Wellenbergen

Die Wellenlänge $λ\lambda$ (Lambda) beschreibt, wie breit oder schmal eine Welle ist.
Lange Wellen sehen aus wie sanfte Hügel, kurze Wellen sind viel steiler.

👉 Mathematisch:
Wenn $λ=0.2\lambda = 0.2$ , sind die Wellen enger zusammen.
Wenn $λ=0.5\lambda = 0.5$ , sind sie weiter auseinander.

💡 Visuell:

Copy to Clipboard

Im Code:

Copy to Clipboard

Kurze Wellenlänge (0.5) → Engere Wellenberge
Mittlere Wellenlänge (1.0) → Gleichmäßige Wellen
Lange Wellenlänge (2.0) → Sanfte, breite Wellen

👉 Je größer die Wellenlänge, desto weiter auseinander liegen die Wellenberge.

5. Die Bewegung der Buchstaben

Um die Bewegung zu berechnen, setzen wir alles zusammen:

$y = A \cdot \sin(\omega t + \varphi)$

Die Wellenlänge $λ\lambda$ (Lambda) beschreibt, wie breit oder schmal eine Welle ist.
Lange Wellen sehen aus wie sanfte Hügel, kurze Wellen sind viel steiler.

👉 Mathematisch:
Wenn $λ=0.2\lambda = 0.2$ , sind die Wellen enger zusammen.
Wenn $λ=0.5\lambda = 0.5$ , sind sie weiter auseinander.

👉 In JavaScript wenden wir diese Formel auf jeden Buchstaben eines Textes an:

Copy to Clipboard

🔹 Hier passiert das Magische!

Jedes Zeichen erhält eine eigene Berechnung, damit es sich unterschiedlich bewegt.
Das sorgt für den Amiga-Demo-Welleneffekt! 🕹️✨

Sanfte Bewegung (gelb) → Kleine Amplitude (5), niedrige Frequenz (0.5), große Wellenlänge (1.0)
Mittlere Welle (orange) → Mittlere Amplitude (10), normale Frequenz (1.0), engere Wellenlänge (0.5)
Schnelle, hohe Welle (rot) → Große Amplitude (15), hohe Frequenz (2.0), sehr kurze Wellenlänge (0.3)

👉 Wenn Amplitude, Frequenz und Wellenlänge kombiniert werden, entstehen ganz unterschiedliche Bewegungsmuster!

Das ist genau das Prinzip, das in Musik, Lichtwellen, Schwingungen und sogar Computeranimationen verwendet wird. 🚀🎶

5.1 Was macht dieser Code?

Copy to Clipboard

💡 Dieser Code sorgt dafür, dass sich jeder Buchstabe wellengleich auf und ab bewegt – genau wie eine Sinuswelle.

5.2 Zeile für Zeile erklärt

🔹 forEach-Schleife

Copy to Clipboard

Wir gehen jeden Buchstaben (letter) durch.
index ist die Position des Buchstabens im Text.

🔹 Berechnung der vertikalen Position (Sinusfunktion)

Copy to Clipboard

Hier wird für jeden Buchstaben eine individuelle y-Koordinate berechnet:

Math.sin(…) → Die Sinusfunktion erzeugt eine periodische Wellenbewegung.
phase → Die aktuelle Phase der Welle (ändert sich bei jedem Frame).
index * wavelength → Jeder Buchstabe bekommt eine leichte Verzögerung, damit sie nicht alle gleichzeitig hoch und runter springen.
amplitude → Bestimmt, wie hoch und tief sich die Buchstaben bewegen.

🔹 Das Herzstück: `translateY(${y}px)`

Copy to Clipboard

👉 Diese Zeile ist entscheidend! Sie sorgt dafür, dass der Buchstabe auf der Seite bewegt wird.

5.3 Was genau macht translateY(${y}px)?

translateY(y) ist eine CSS-Transformation, die ein Element vertikal (nach oben oder unten) verschiebt.
${y}px → Hier wird der berechnete Wert aus der Sinusfunktion eingesetzt.
- Wenn y = 10, wird der Buchstabe 10 Pixel nach unten verschoben.
- Wenn y = -10, geht er 10 Pixel nach oben.
- Wenn y = 0, bleibt er in der Mitte.
Das Ergebnis?
- Die Buchstaben schwingen nach oben und unten, genau wie eine Sinuswelle!

5.4 Visualisierung: Sinusbewegung

Stell dir vor, du hast den Text:

Copy to Clipboard

Ohne Animation:

Copy to Clipboard

Mit Sinuswellenanimation (Symbolisch dargestellt):

Copy to Clipboard

Hier hat jeder Buchstabe eine andere vertikale Position, weil wir translateY(y) mit der Sinuswelle berechnen.

6. Der komplette Code zum Testen

Sinus.html

Falls du den Effekt ausprobieren willst, kopiere einfach diesen Code in eine HTML-Seite:

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>Sinuswellen-Animation</title>
    <style>
        #wave-text {
            font-size: 24px;
            font-weight: bold;
            display: inline-block;
            white-space: nowrap;
        }
    </style>
</head>
<body>
    <p id="wave-text">Mathematik lässt Texte tanzen!</p>

this.amplitude = amplitude;
            this.frequency = frequency;
            this.wavelength = wavelength;
            this.phase = 0;

for (let i = 0; i < this.text.length; i++) {
                let span = document.createElement("span");
                span.innerText = this.text[i] === " " ? "\u00A0" : this.text[i];
                span.style.display = "inline-block";
                this.textElement.appendChild(span);
            }

this.letters = this.textElement.querySelectorAll("span");
            this.animateWave();
        }

animateWave() {
            this.phase += this.frequency;
            this.letters.forEach((letter, index) => {
                let y = Math.sin(this.phase + index * this.wavelength) * this.amplitude;
                letter.style.transform = `translateY(${y}px)`;
            });
            requestAnimationFrame(() => this.animateWave());
        }
    }

document.addEventListener("DOMContentLoaded", function() {
        new SinusText("wave-text", { amplitude: 10, frequency: 0.08, wavelength: 0.3 });
    });
    </script>
</body>
</html>

7. Technische Umsetzung in Worpdress/Avada

Um die Sinuswellen-Animation direkt in Avada zu integrieren, habe ich das Plugin WPCode verwendet. Damit lassen sich benutzerdefinierte JavaScript-Snippets einfach verwalten und in den Footer der Website einbinden.

💡 So habe ich es umgesetzt:

Ein neues JavaScript-Snippet mit WPCode erstellt und das Skript für die Sinus-Animation hinterlegt.
Dem gewünschten Text im Avada Builder ein -Element mit einer eindeutigen ID zugewiesen.
Die Animation über JavaScript gestartet, indem die Klasse mit der entsprechenden ID initialisiert wurde.

Diese Methode ermöglicht es, die Sinuswellen-Animation flexibel auf verschiedene Texte anzuwenden – ganz ohne Änderungen am Theme-Code. 🚀

8. Fazit: Mathematik macht Dinge lebendig!

Die Sinusfunktion ist nicht nur für Formeln auf dem Papier gut, sondern macht auch coole Animationen möglich. Sie wird in Physik, Musik, Computergrafik und Schwingungen genutzt – sogar in Licht- und Tonwellen!

Mathematik ist also viel cooler, als viele denken! 🎶🚀

Hast du noch Fragen oder willst etwas ausprobieren? Schreib es in die Kommentare! 😊

Last Updated: 14. Februar 2025By johannesTags: Mathematik, Sinus

Wie Mathematik Texte tanzen lässt: Die Sinuswellen-Animation erklärt

Wie Mathematik Texte tanzen lässt: Die Sinuswellen-Animation erklärt

Zurück zur Übersicht…

Mathematik ist die Musik der Vernunft

James Joseph Sylvester

1. Was ist eine Sinuswelle?

1.1 Die allgemeine Formel der Sinusfunktion

2. Amplitude: Die Höhe der Welle

3. Frequenz: Die Geschwindigkeit der Welle

4. Wellenlänge: Der Abstand zwischen den Wellenbergen

5. Die Bewegung der Buchstaben

5.1 Was macht dieser Code?

5.2 Zeile für Zeile erklärt

🔹 Das Herzstück: `translateY(${y}px)`

5.3 Was genau macht translateY(${y}px)?

5.4 Visualisierung: Sinusbewegung

6. Der komplette Code zum Testen

7. Technische Umsetzung in Worpdress/Avada

8. Fazit: Mathematik macht Dinge lebendig!

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

Wie Mathematik Texte tanzen lässt: Die Sinuswellen-Animation erklärt

Wie Mathematik Texte tanzen lässt: Die Sinuswellen-Animation erklärt

Zurück zur Übersicht…

Mathematik ist die Musik der Vernunft

James Joseph Sylvester

1. Was ist eine Sinuswelle?

1.1 Die allgemeine Formel der Sinusfunktion

2. Amplitude: Die Höhe der Welle

3. Frequenz: Die Geschwindigkeit der Welle

4. Wellenlänge: Der Abstand zwischen den Wellenbergen

5. Die Bewegung der Buchstaben

5.1 Was macht dieser Code?

5.2 Zeile für Zeile erklärt

🔹 Das Herzstück: translateY(${y}px)

5.3 Was genau macht translateY(${y}px)?

5.4 Visualisierung: Sinusbewegung

6. Der komplette Code zum Testen

7. Technische Umsetzung in Worpdress/Avada

8. Fazit: Mathematik macht Dinge lebendig!

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

🔹 Das Herzstück: `translateY(${y}px)`