Bézierkurven

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

Registriere dich um viele Vorteile zu genießen! Weniger Werbung, bessere Kommunikation und vieles mehr!

  • Diese Lexikon-Eintrag demonstriert kurz den praktischen Einsatz von Bézier-Kurven anhand einer Visualisierung in JavaScript und HTML5.
    Bézierkurven im Einsatz
    1. Einleitung
    2. Mathematische Beschreibung
    3. Vorbereitung
    4. Implementierung
    5. Interpretation
    1 Einleitung
    Bézierkurven sind Kurven, die in Abhängigkeit von Parametern modelliert werden. In der Praxis finden sie ihre Anwendung aufgrund der optischen Eleganz hauptsächlich im Bereich der Computergrafik. Interpolationsfunktionen für Animationen, Pfade in Bildbearbeitungssoftware und Vektorgrafiken sind Beispiele dafür. Aus mathematischer Sicht sind Bézierkurven einfach zu verstehen und können mit elementaren Mitteln erschlossen werden.

    2 Mathematische Beschreibung
    Gegeben sei eine endliche Menge M mit Punkten, wobei gilt: . Würde man für jedes Element aus dieser Menge eine neue Menge anlegen und das Element jener Menge hinzufügen, wäre das Ergebnis eine Sammlung disjunkter Mengen der Mächtigkeit 1.
    Überdies definieren als eine reelle Zahl, die den Fortschritt der Interpolation repräsentiert.
    Um nun eine Bézierkurve zu generieren, werden immer zwei Punkte aus M gewählt. Auf der Strecke zwischen den beiden Punkten wird mithilfe von t ein weiterer Punkt durch lineare Interpolation bestimmt. Anschließend fügt man den erhaltenen Punkt einer neuen Menge hinzu. Hat man die Prozedur für alle Punkte in M mit Ausnahme des letzten Punkts durchlaufen, liegt eine neue Menge mit der Mächtigkeit von M minus 1 vor. Falls dieser Wert größer als 1 ist, wird der gesamte Vorgang erneut durchlaufen, jedoch mit der neu erhaltenen Menge. Indem M endlich ist, stellt man sicher, dass der Algorithmus terminiert. Zurückgegeben wird der letzte verbleibende Punkt, welcher auf der Bézierkurve liegt.


    3 Vorbereitung
    Wir legen das folgende HTML-Dokument an:

    HTML-Quellcode

    1. <!DOCTYPE html>
    2. <html lang="en">
    3. <head>
    4. <meta charset="UTF-8">
    5. <title>Bezier Curve Generator</title>
    6. </head>
    7. <body>
    8. <canvas id="canvas" width="800" height="500"></canvas>
    9. <script>
    10. </script>
    11. </body>
    12. </html>
    Alles anzeigen
    Es sei angemerkt, dass der gesamte Quellcode dieses Lexikon-Eintrag lediglich Testzwecken dient und daher auf eine konventielle Projektorganisation mit mehreren Dateien verzichtet wird.

    Das Canvas-Element dient der Visualisierung, der <script>-Tag ist für den JavaScript-Code reserviert.


    4 Implementierung
    Der JavaScript-Code sieht wie folgt aus:

    JavaScript-Quellcode

    1. // (1)
    2. const ctx = document.getElementById('canvas').getContext('2d');
    3. const iterations = 200;
    4. // (2)
    5. function bezier(points, t) {
    6. // (3)
    7. if (points.length == 1) {
    8. return points[0];
    9. }
    10. // (4)
    11. var newArray = [];
    12. for (var i = 0; i < points.length - 1; i++) {
    13. // (5)
    14. newArray.push({
    15. x: points[i].x + t * (points[i+1].x - points[i].x),
    16. y: points[i].y + t * (points[i+1].y - points[i].y)
    17. });
    18. }
    19. // (6)
    20. return bezier(newArray, t);
    21. }
    22. // (7)
    23. ctx.fillRect(0, 0, 800, 500);
    24. // (8)
    25. var controlPoints = [
    26. {
    27. x: 0,
    28. y: 0
    29. },
    30. {
    31. x: 400,
    32. y: 490
    33. },
    34. {
    35. x: 790,
    36. y: 0
    37. }
    38. ];
    39. // (9)
    40. ctx.fillStyle = 'yellow';
    41. for (var i = 0; i < controlPoints.length; i++) {
    42. ctx.fillRect(controlPoints[i].x, controlPoints[i].y, 8, 8);
    43. }
    44. // (10)
    45. ctx.fillStyle = 'white';
    46. var time = Date.now();
    47. for (var i = 0; i < iterations; i++) {
    48. var p = bezier(controlPoints, i / iterations);
    49. ctx.fillRect(p.x, p.y, 1, 1);
    50. }
    51. // (11)
    52. console.log('Kurve abgeschlossen! Iterationen: ' + iterations);
    53. console.log('Die Berechnung dauerte ' + (Date.now() - time) + 'ms');
    Alles anzeigen

    Erklärungen / nähere Informationen:
    (1) Canvas-Element aus dem DOM lesen, Context-Objekt in Konstante speichern und Anzahl der Iterationen festlegen
    (2) Funktionsdefinition mit zwei Parametern: Den Kontrollpunkten (Menge M) und dem Wert t
    (3) Abfrage: Ist nur ein Punkt vorhanden, wird dieser zurückgegeben
    (4) Neues Array (neue Menge) erzeugen und alle Elemente der Menge bis auf das letzte iterieren
    (5) Lokale lineare Interpolation durchführen und berechneten Punkt zur neuen Liste hinzufügen
    (6) Rekursiver Funktionsaufruf mit der neuen Liste
    (7) Schwarzen Hintergrund zeichnen
    (8) Kontrollpunkte definieren
    (9) Alle Kontrollpunkte gelb darstellen
    (10) Punkte auf der Bézierkurve berechnen und zeichnen
    (11) Informationen ausgeben


    5 Interpretation
    Es sollte auffallen, dass die Funktion nicht nur einmal aufgerufen wird. Das rührt daher, dass zum Zeichnen einer Kurve mehrere Punkte bekannt sein müssen. Festgelegt durch die Konstante iterations werden mehrere Punkte auf der Kurve berechnet und auf dem Bildschirm dargestellt. Bei einem Intel Core i5 Prozessor mit 3,1 GHz dauert die Berechnung mit den drei Kontrollpunkten bei 4.000.000 Iterationen etwa 5s. Dabei ist es beachten, dass schon 2000 Iterationen ausreichen, um visuell ein gutes Ergebnis zu erzielen. Folglich bieten Bézierkurven auch auf leistungsschwächeren eine Möglichkeit, optimisch ansprechende Resultate zu erreichen. Des Weiteren lässt sich das Verfahren elegant auf drei Dimensionen ausweiten.



    Im Falle Fragen, Anregungen oder Kritik könnt ihr mich einfach kontaktieren.
    Falls dieser Lexikon-Eintrag gefällt und eine Vertiefung dieses Konzepts oder mehr mathematische Themen gewünscht sind, lasst es mich wissen.

    356 mal gelesen