Lineare Interpolation verstehen und anwenden – Ein einfaches Tutorial

Zurück zur Übersicht…

Lineare Interpolation ist eine mathematische Methode, die häufig verwendet wird, um Zwischenwerte zwischen zwei bekannten Punkten zu berechnen. Egal, ob du Animationen erstellen, Farbübergänge in deinem Webdesign gestalten oder physikalische Simulationen durchführen möchtest – lineare Interpolation ist ein leistungsstarkes Werkzeug.

In diesem Tutorial lernst du:

Was lineare Interpolation ist.
Wie sie mathematisch funktioniert.
Wie du sie in JavaScript implementieren kannst.

Von der Schulformel zur Lerp-Formel

Einleitung

Die lineare Interpolation ist eine fundamentale Methode, um zwischen zwei bekannten Punkten einen Zwischenwert zu berechnen. Wir beginnen mit der klassischen Schulformel und entwickeln diese weiter zur kompakteren Lerp-Formel, die oft in der Computergrafik und numerischen Anwendungen verwendet wird.

Die klassische Schulformel

In der Schule lernen wir die folgende Formel zur Berechnung eines interpolierten Wertes:

$y = y_1 + \frac{(x_2 - x_1)(y_2 - y_1)}{x_2 - x_1} \cdot (x - x_1)$
Dabei gilt:

$(x_1, y_1)$ und $(x_2, y_2)$ sind die bekannten Punkte,
$x$ ist der gesuchte Wert auf der x-Achse,
$y$ ist der berechnete Zwischenwert auf der y-Achse, der entsprechend der Position von $x$ zwischen $y_1$ und $y_2$ liegt

Die Formel basiert auf der Geradengleichung und ist eine direkte Anwendung des Dreisatzes, angepasst auf zwei Dimensionen.

Um die Schulformel weiter zu einem tieferen Verständnis der linearen Interpolation (Lerp) zu führen, betrachten wir den Übergang von der klassischen Schulformel zur Lerp-Formel und zeigen den mathematischen Hintergrund.

Umformung zur Lerp-Formel:

Nun kommen wir zu der Überlegung, dass der Wert $t$ , der in der Lerp-Formel auftauscht, einfach das Verhältnis beschreibt, wie weit $x_1$ und $x_2$ liegt.
Definiere $t$ als:

$t = \frac{x_2 - x_1}{x - x_1}$

Dies bedeutet, dass $t$ den Anteil des Abstands von $x_1$ nach $x$ im Verhältnis zur Gesamtstzrecke von $x_1$ nach $x_2$ darstellt. Wenn $x = x_1$ dann ist $t = 0$ , und wenn $x = x_2$ , dann ist $t = 1$ .

Einsetzen in die Schulformel:

Nun setzen wir diese Definition von $t$ in die Schulformel ein:

$y = y_1 + \frac{(x_2 - x_1)(y_2 - y_1)}{x_2 - x_1} \cdot (x - x_1)$

$y = y_1 + (y_2 - y_1) \cdot \left( \frac{x - x_1}{x_2 - x_1} \right)$

$y = y_1 + (y_2 - y_1) \cdot t$

Das ist die Lerp-Formel:

$Lerp(a,b,t)=a+(b−a)⋅t$

Für den Fall der linearen Interpolation bedeutet das, dass $a = y_1$ , und $b = y_2$ und $t$ der proportionale Abstand von $x$ zu $x_1$ ist.

Die Idee hinter der Lerp-Formel:

Die Lerp-Formel drückt die gleiche Idee wie die Schulformel aus, aber in einer kompakteren und allgemeiner gehaltenen Form. Sie ist besonders nützlich in der Computergrafik und in Bereichen, in denen man interpolierte Werte zwischen zwei bekannten Werten benötigt, insbesondere wenn diese Werte als Parameter in einer Animation oder einer Berechnung verwendet werden.

Zusammenfassend lässt sich sagen, dass die Lerp-Formel die klassische Interpolation in einer sehr allgemeinen Form beschreibt und sich in vielen Anwendungen als sehr flexibel und effizient erweist.

Anwendungsbeispiel: Passwortmeter

1. Vorstellung des Anwendungsbeispiels

In diesem Abschnitt wollen wir ein praktisches Beispiel für ein Passwortmeter entwickeln. Ein Passwortmeter hilft Nutzern, die Stärke ihres Passworts zu bewerten, während sie es eingeben. Die Stärke wird visuell durch einen Fortschrittsbalken angezeigt, dessen Farbe sich von rot (unsicher) nach grün (sicher) verändert. Der Fortschrittsbalken spiegelt dabei die Sicherheit des Passworts wider, wobei verschiedene Kriterien wie die Verwendung von Groß- und Kleinbuchstaben, Zahlen, Sonderzeichen und die Mindestlänge berücksichtigt werden. Ein linear interpoliertes Farbschema ermöglicht es uns, den Fortschritt auf der Basis der Passwortbewertung darzustellen.

2. Vorstellung der Funktion `interpolateColor()` und genaue Erklärung anhand unserer Formel

Die Funktion interpolateColor() nutzt eine lineare Interpolation zwischen zwei Farben, um die Farbe des Passwortmeters dynamisch an die Passwortstärke anzupassen. Die lineare Interpolation ist ein mathematischer Prozess, bei dem wir einen bestimmten Wert (in unserem Fall die Passwortbewertung) zwischen zwei Endwerten (Rot und Grün) berechnen.

Die allgemeine Formel der linearen Interpolation lautet:

$Lerp(a,b,t)=a+(b−a)⋅t$

$a:$ Der Startwert (Farbe 1 – rot, unsicher)
$b:$ Der Endwert (Farbe 2 – grün, sicher)
$t:$ Der Interpolationsfaktor, der die Stärke des Passworts (zwischen 0 und 1) darstellt.

In unserem Fall:

$a=Rot=0xFF0000$
$b=Grün=0x00FF00$
$t=Prozentsatz der Passwortstärke$

Die Farbe des Fortschrittsbalkens wird durch diese Berechnung zwischen Rot und Grün angepasst, sodass ein unsicheres Passwort (niedrige Punktzahl) rot und ein sicheres Passwort (hohe Punktzahl) grün angezeigt wird.

3. Vorstellung des Passwordscores und genaue Erklärung

Die Berechnung der Passwortstärke basiert auf verschiedenen Kriterien, die einen Einfluss auf die Sicherheit eines Passworts haben. Die Kriterien umfassen:

Kleinbuchstaben: +20 Punkte
Großbuchstaben: +20 Punkte
Zahlen: +20 Punkte
Sonderzeichen: +20 Punkte
Mindestlänge (8 Zeichen): +20 Punkte

Zusätzlich wird eine Strafe für wiederholte Zeichen (z. B. aa, 111, ###) hinzugefügt:

Zwei gleiche Zeichen hintereinander: -10 Punkte
Drei gleiche Zeichen hintereinander: -20 Punkte
Vier gleiche Zeichen hintereinander: -30 Punkte

Die Berechnung stellt sicher, dass die Gesamtpunktzahl für ein Passwort maximal 100 Punkte betragen kann. Falls die Punkte höher sind, wird die Punktzahl auf 100 begrenzt.

Beispiel:

Ein Passwort mit Kleinbuchstaben, Großbuchstaben, Zahlen, Sonderzeichen und einer Mindestlänge von 8 Zeichen würde insgesamt 100 Punkte erreichen.

4. Erklärung der Funktion `updateMeter()`

Die Funktion updateMeter() wird jedes Mal aufgerufen, wenn der Nutzer das Passwort eingibt oder ändert. Diese Funktion erfüllt mehrere Aufgaben:

Berechnung der Passwortstärke: Die Funktion ruft calculatePasswordScore(password) auf, um die aktuelle Punktzahl des Passworts zu berechnen.
Berechnung des Fortschritts: Basierend auf der Punktzahl wird der Fortschrittsbalken aktualisiert, wobei die Punktzahl in Prozent (zwischen 0 und 100) dargestellt wird.
Farbe des Fortschrittsbalkens: Die Funktion berechnet die interpolierte Farbe von Rot (für unsicher) nach Grün (für sicher) mithilfe der interpolateColor()-Funktion.
Anzeige der Details: Alle Kriterien und die Berechnung der Punkte werden unterhalb des Passwortfelds angezeigt, um dem Nutzer zu erklären, warum das Passwort eine bestimmte Punktzahl erhalten hat.

Die updateMeter()-Funktion sorgt dafür, dass das Passwortmeter und die angezeigte Farbe dynamisch auf die Eingaben des Nutzers reagieren.

5. Quellcode und Link zum Demo

Hier ist der vollständige Quellcode für das Passwortmeter mit der linearen Interpolation der Farben und der Passwortbewertung:

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>Passwortmeter</title>

<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet">

/* Box für den Inhalt */
        .container {
            background-color: white;
            width: 680px;
            padding: 30px;
            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
            border-radius: 8px;
        }

#password-meter {
            height: 20px;
            background-color: #f3f3f3;
            margin-top: 10px;
        }
        #meter-fill {
            height: 100%;
            text-align: center;
            color: white;
            line-height: 20px;
        }
        #info {
            margin-top: 10px;
            font-size: 14px;
        }

.missing-criteria {
            font-size: 14px;
            color: #dc3545;
        }

.missing-criteria-heading {
            font-weight: bold;
            color: #000;
            font-size: 16px;
        }
    </style>
</head>
<body>
    <div class="container">
        <h2>Passwortmeter</h2>
        <div class="form-group">
            <label for="password">Passwort: mind. <span id="min-length-text"></span> Zeichen</label>
            <input type="password" class="form-control" id="password" oninput="updateMeter()" placeholder="Passwort eingeben">
        </div>

<div class="form-check">
            <input type="checkbox" class="form-check-input" id="showPassword" onclick="togglePasswordVisibility()">
            <label class="form-check-label" for="showPassword">Passwort anzeigen</label>
        </div>
        
        <div id="password-meter" class="progress">
            <div id="meter-fill" class="progress-bar" role="progressbar"></div>
        </div>

<script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>

// Dynamischen Text für die Mindestlänge setzen
        document.getElementById('min-length-text').textContent = MIN_PASSWORD_LENGTH;

// Funktion zur linearen Interpolation zwischen zwei Farben
        function interpolateColor(color1, color2, factor) {
            const r1 = (color1 >> 16) & 0xff;
            const g1 = (color1 >> 8) & 0xff;
            const b1 = color1 & 0xff;

const r2 = (color2 >> 16) & 0xff;
            const g2 = (color2 >> 8) & 0xff;
            const b2 = color2 & 0xff;

const r = Math.round(r1 + (r2 - r1) * factor);
            const g = Math.round(g1 + (g2 - g1) * factor);
            const b = Math.round(b1 + (b2 - b1) * factor);

return (r << 16) | (g << 8) | b;
        }

// Berechnung der Passwortsicherheit und Punktzahl
        function calculatePasswordScore(password) {
            let score = 0;
            let feedback = [];
            let missingCriteria = [];

// Kleinbuchstaben
            if (/[a-z]/.test(password)) {
                score += 20;
                feedback.push("Kleinbuchstaben eingegeben +20 Punkte");
            } else {
                missingCriteria.push("Kleinbuchstaben fehlen");
            }

// Großbuchstaben
            if (/[A-Z]/.test(password)) {
                score += 20;
                feedback.push("Großbuchstaben eingegeben +20 Punkte");
            } else {
                missingCriteria.push("Großbuchstaben fehlen");
            }

// Zahlen
            if (/\d/.test(password)) {
                score += 20;
                feedback.push("Zahlen eingegeben +20 Punkte");
            } else {
                missingCriteria.push("Zahlen fehlen");
            }

// Sonderzeichen
            if (/[!@#$%^&*(),.?":{}|<>]/.test(password)) {
                score += 20;
                feedback.push("Sonderzeichen eingegeben +20 Punkte");
            } else {
                missingCriteria.push("Sonderzeichen fehlen");
            }

// Mindestlänge
            if (password.length >= MIN_PASSWORD_LENGTH) {
                score += 20;
                feedback.push(`Mindestlänge ${MIN_PASSWORD_LENGTH} Zeichen +20 Punkte`);
            } else {
                missingCriteria.push(`Mindestens ${MIN_PASSWORD_LENGTH} Zeichen erforderlich`);
            }

// Strafen für wiederholte Zeichen
            let repeatedPatternPenalty = 0;
            const repeatedPatternRegex = /(.)\1{1,}/g;

let match;
            while (match = repeatedPatternRegex.exec(password)) {
                let repeatedLength = match[0].length;
                repeatedPatternPenalty -= 10 * (repeatedLength - 1);
                feedback.push(`${match[0]} hintereinander -${10 * (repeatedLength - 1)} Punkte`);
            }

score += repeatedPatternPenalty;
            score = Math.min(score, 100);

return { score, feedback, missingCriteria };
        }

// Funktion zum Aktualisieren des Passwortmeters
        function updateMeter() {
            let password = document.getElementById('password').value;
            let result = calculatePasswordScore(password);

// Fortschritt berechnen
            let percentage = Math.min(result.score, 100);
            let meterFill = document.getElementById('meter-fill');
            meterFill.style.width = percentage + '%';
            meterFill.setAttribute('aria-valuenow', percentage);
            meterFill.textContent = percentage + '%';

const startColor = 0xA80101;
            const endColor = 0x55A705;
            const factor = percentage / 100;
            const interpolatedColor = interpolateColor(startColor, endColor, factor);

meterFill.style.backgroundColor = `#${interpolatedColor.toString(16).padStart(6, '0')}`;

let info = result.feedback.join('<br>');
            document.getElementById('info').innerHTML = info;

// Anzeige der fehlenden Kriterien
            let missingInfo = result.missingCriteria.length > 0 ? "<div class='missing-criteria-heading'>Fehlende Kriterien:</div>" + result.missingCriteria.join('<br>') : "";
            document.getElementById('missing-criteria').innerHTML = missingInfo;
        }

// Funktion zum Umschalten der Passwortsichtbarkeit
        function togglePasswordVisibility() {
            var passwordField = document.getElementById('password');
            var showPasswordCheckbox = document.getElementById('showPassword');

if (showPasswordCheckbox.checked) {
                passwordField.type = 'text';
            } else {
                passwordField.type = 'password';
            }
        }
        
    </script>
    
</body>
</html>

Link zum Demo: passwortmeter.html

Last Updated: 2. Februar 2025By johannesTags: Informatik, Mathematik, php, Programmierung

Lineare Interpolation verstehen und anwenden – Ein einfaches Tutorial

Lineare Interpolation verstehen und anwenden – Ein einfaches Tutorial

Zurück zur Übersicht…

Von der Schulformel zur Lerp-Formel

Einleitung

Die klassische Schulformel

Umformung zur Lerp-Formel:

Einsetzen in die Schulformel:

Die Idee hinter der Lerp-Formel:

Anwendungsbeispiel: Passwortmeter

1. Vorstellung des Anwendungsbeispiels

2. Vorstellung der Funktion `interpolateColor()` und genaue Erklärung anhand unserer Formel

3. Vorstellung des Passwordscores und genaue Erklärung

4. Erklärung der Funktion `updateMeter()`

5. Quellcode und Link zum Demo

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

Lineare Interpolation verstehen und anwenden – Ein einfaches Tutorial

Lineare Interpolation verstehen und anwenden – Ein einfaches Tutorial

Zurück zur Übersicht…

Von der Schulformel zur Lerp-Formel

Einleitung

Die klassische Schulformel

Umformung zur Lerp-Formel:

Einsetzen in die Schulformel:

Die Idee hinter der Lerp-Formel:

Anwendungsbeispiel: Passwortmeter

1. Vorstellung des Anwendungsbeispiels

2. Vorstellung der Funktion interpolateColor() und genaue Erklärung anhand unserer Formel

3. Vorstellung des Passwordscores und genaue Erklärung

4. Erklärung der Funktion updateMeter()

5. Quellcode und Link zum Demo

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

2. Vorstellung der Funktion `interpolateColor()` und genaue Erklärung anhand unserer Formel

4. Erklärung der Funktion `updateMeter()`