Bezier Kurven

Info

Im Rahmen der Vorlesung Web Clients der FHNW im Herbstsemester 2020 wird kurz erklärt, was Bezier Kurven sind und in welcher Art diese anzutreffen sind in der Web-Umgebung. Zur Vereinfachung der Erklärung habe ich dieses schlichte Tool bestehend aus HTML & JavaScript Dateien erstellt. Diese Veranschaulichung dient lediglich für die linearen, quadratischen und kubischen Bezier Kurven.

Try it out

Das Tool ist online erreichbar unter https://sivakumm.github.io/webcl-hs20-bezier-curve.

Lokales Setup

Um das Tool zu starten, muss lediglich zuerst das Repository gecloned oder heruntergeladen werden.

$ git clone https://github.com/sivakumm/webcl-hs20-bezier-curve.git

Anschliessend kann die Datei index.html in einem der gängigsten Browser geöffnet werden.

Dieses Tool funktioniert nicht mit dem Internet Explorer. Erfolgreich getestete Browser sind: Google Chrome, Firefox & Microsoft Edge

Aufbau

Das Tool ist hauptsächlich in drei Dateien aufgegliedert:

• index.html - Eine einfache HTML-Seite für die Darstellung
• controller.js - Dieses Script reagiert auf Interaktionen vom Benutzer & berechnet die nächsten Schritte
• drawer.js - Dieses Script ist für die Darstellung des Canvas zuständig

Zusätzlich wurden im Verzeichnis lib die CSS von Bootstrap und im Verzeichnis icons SVGs abgelegt für ein minimales Styling des Tools.

Erklärung

Das Grundkonzept bei den Bezier Kurven ist, dass ein Punkt von einem Startpunkt zum Zielpunkt gezeichnet wird. Die so entstandene Spur ist eine Bezier Kurve (nachfolgend rot dargestellt).

Lineare Bezier Kurve

So sieht das bei einer linearen Bezier Kurve aus:
Quelle: Wikipedia

Zu beachten ist der Wert t, welcher von 0 bis 1 wandert. Dieser Wert entspricht der prozentualer Strecke, welcher der Punkt bereits zurück gelegt hat.

Quadratische Bezier Kurve

Hier gibt es drei Stützpunkte P₀, P₁ und P₂. Die Punkte werden mit grauen Strecken verbunden. Auf jeder dieser Strecken verlaufen grüne Punkte vom Start zum Ziel. Dabei ist zu beachten, dass die Positionen der grünen Punkte sich prozentual zur aufligenden Strecke gleich ist. Sprich, wenn der eine grüne Punkt sich in der Mitte seiner Strecke befindet, dann ist der andere grüne Punkt auch in der Mitte seiner Strecke. Dieser prozentualer Wert ist nachfolgend erneut mit t gekennzeichnet. Zusätzlich werden die grünen Punkte durch eine grüne Strecke verbunden. Darauf ist der schwarze Punkt, welcher auch prozentual auf derselben Position auf der grünen Strecke ist. Die vom schwarzen Punkt gezeichnete rote Spur entspricht hier der Bezier Kurve.
Quelle: Wikipedia

Kubische Bezier Kurve

Im Prinzip passiert hier nochmals dasselbe, wobei die Stützpunkte um P₃ erweitert worden sind. Statt zwei grünen Punkten verlaufen nun 3 grüne Punkte auf ihre Strecke. Auf den zwei grünen Strecken verläuft je ein blauer Punkt, welche mit einer blauen Strecke verbunden sind. Nun zeichnet der schwarze Punkt die rote Bezier Kurve, indem dieser prozentual über die blaue Strecke fährt. Alle Punkte starten bei t = 0 bei ihren Startpunkten und sind am Ziel bei t = 1.
Quelle: Wikipedia

Rechte

Dieses Tool benutzt Icons von Font Awesome für Buttons und ein Favicon von Free SVG.
Mithusan Sivakumar, FHNW