Überprüfen, ob Punkt innerhalb Dreieck mit p5.js

p5.js ist eine Javascript Bibliothek, die das Zeichnen auf der HTML5 Canvas ermöglicht. Möchte man mit Dreiecken interagieren, ist es oft nötig zu überprüfen ob ein gegebener Punkt (bspw. die Koordinaten des Mauszeigers) innerhalb des Dreieckes liegen oder nicht. So ließe sich etwa ein Button in Form eines Dreieckes denken, der bei Mausklick die Farbe ändert.

Algorithmus

Der verwendete Algorithmus ist nicht sonderlich performant, aber dafür intuitiv verständlich. Das Dreieck wird entgegen dem Uhrzeigersinn durch 3 Geraden aufgespannt. Für jede Gerade wird geprüft, ob sich der gegebene Punkt links der Seite befindet. Ist dies für alle 3 Seiten der Fall, befindet sich der Punkt innerhalb des Dreieckes.

Beispiel mit Quellcode

Folgendes Beispiel zeigt ein Dreieck, welches bei MouseOver die Farbe von blau auf grün ändert.

Weiterführende Links

Überprüfen, ob Punkt innerhalb Dreieck mit p5.js
Markiert in:            

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.