WaBis

walter.bislins.ch

Schnittpunkt zweier Geraden berechnen (JavaScript)

Samstag, 14. Februar 2015 - 15:05 | Autor: wabis | Themen: Wissen, Geometrie, Programmierung, Animation, Interaktiv
Wie berechnet man den Schnittpunkt zweier Geraden mit Vektor-Geometrie?

Ich zeige, wie durch Wahl eines geeigneten Koordinatensystems die Berechnung des Schnittpunktes zweier Geraden vereinfacht wird. Ich leite die Formeln her und erstelle ein JavaScript, welches den Schnittpunkt zweier Geraden berechnet. Eine interaktive Animation zeigt das JavaScript in Aktion.

Aufgabe

Gegeben seien zwei Geraden g1 und g2 in Vektorform. Das heisst die Gerade g1 geht durch den Punkt und hat die Richtung des Einheitsvektors , die Gerade g2 geht durch den Punkt und hat die Richtung des Einheitsvektors .

Gesucht ist der Schnittpunkt der beiden Geraden.

Vereinfachung der Aufgabe

Durch Wahl eines geeigneten Koordinatensystems K' lässt sich die Aufgabe vereinfachen:

Ich wähle die Gerade g1 als X-Achse des Koordinatensystems K' und den Punkt als seinen Ursprung. Dann transformiere ich die Gerade g2, d.h. den Punkt und die Richtung , in das System K'. Jetzt muss nur berechnet werden, bei welchem X-Wert a die Gerade g2 die X-Achse schneidet. Dies ergibt den Punkt , welcher auf der X-Achse von K' liegt. Diesen Punkt muss ich nun wieder ins Koordinatensystem K zurück transformieren und ich erhalte damit den Schnittpunkt der beiden Geraden.

Für die beiden Geraden gelten die folgenden Geraden-Gleichungen:

(1)
(2)
wobei'
' =' 'alle Punkte, welche auf der Geraden g1 liegen
' =' 'ein beliebiger Punkt der Geraden g1
' =' 'Laufvariable für Gerade g1
' =' 'Richtung der Geraden g1 als Einheitsvektor
' =' 'alle Punkte, welche auf der Geraden g2 liegen
' =' 'ein beliebiger Punkt der Geraden g2
' =' 'Laufvariable für Gerade g2
' =' 'Richtung der Geraden g2 als Einheitsvektor

Transformation ins Koordinatensystem K'

Skizze Schnittbild zweier Linien

Die Gerade g1 bildet die X-Achse des Koordinatensystems K' mit dem Ursprung beim Punkt . Im System K' hat somit die Gerade g1 den Punkt beim Nullpunkt und die Richtung entspricht dem Einheitsvektor der X-Achse von K'.

Den Punkt und die Richtung kann ich mit Hilfe des Skalarproduktes ins System K' abbilden:

(3)
mit
wobei'
' =' 'X-Komponente des Punktes im System K'
' =' 'Y-Komponente des Punktes im System K'
' =' 'Richtung der X-Achse des Systems K' bezüglich K
' =' 'Um 90° im Gegenuhrzeigersinn gedrehter Vektor bezüglich K

Die Richtung der Geraden g2 lässt sich analog transformieren:

(4)
mit
wobei'
' =' 'X-Komponente der Richtung im System K'
' =' 'Y-Komponente der Richtung im System K'

Damit erhalte ich zwei neue Geradengleichungen im System K':

(5)

Linie g1

(6)

Linie g2

Für den Schnittpunkt gilt :

(7)

Linie g1

(8)

Linie g2

Die Werte a und b erhalte ich, wenn ich die beiden obigen Gleichungen einander gleichsetze:

(9)

Die obige Gleichung in die beiden Komponenten zerlegt:

(10)

Vereinfacht:

(11)
(12)

Daraus lassen sich direkt die beiden Variablen a und b berechnen:

(13)
(14)

Um den Schnittpunkt im System K zu erhalten, muss ich nur den Wert λ1 = a in die Geradengleichung (1) für die Gerade g1 einsetzen:

(15)

JavaScript IntersectLines

Dem JavaScript müssen die beiden Punkte und , sowie die beiden Richtungen und übergeben werden. Die Vektoren werden als zweidimensionales Array der Form [ x, y ] übergeben. Als Resultat wird der Schnittpunkt der beiden Geraden als [ Ox, Oy ] Array zurückgegeben.

Wenn sich die Geraden nicht schneiden oder identisch sind, wird null zurückgegeben.

function IntersectLines( P, r, Q, s ) {
  // line1 = P + lambda1 * r
  // line2 = Q + lambda2 * s
  // r and s must be normalized (length = 1)
  // returns intersection point O of line1 with line2 = [ Ox, Oy ] 
  // returns null if lines do not intersect or are identical
  var PQx = Q[0] - P[0];
  var PQy = Q[1] - P[1];
  var rx = r[0];
  var ry = r[1];
  var rxt = -ry;
  var ryt = rx;
  var qx = PQx * rx + PQy * ry;
  var qy = PQx * rxt + PQy * ryt;
  var sx = s[0] * rx + s[1] * ry;
  var sy = s[0] * rxt + s[1] * ryt;
  // if lines are identical or do not cross...
  if (sy == 0) return null;
  var a = qx - qy * sx / sy;
  return [ P[0] + a * rx, P[1] + a * ry ];
}

Animation

Der rote Kreis ist der vom JavaScript berechnete Schnittpunkt.

Dein Kommentar zu diesem Artikel
Name
Email optional; wird nicht angezeigt
Kommentar
  • Name wird bei deinem Kommentar angezeigt.
  • Email ist nur für den Administrator, sie wird nicht angezeigt.
  • Du kannst deine Kommentare eine Zeit lang editieren oder löschen.
  • Du kannst Formatierungen im Kommentar verwenden, z.B: Code, Formeln, usw.
  • Externen Links und Bilder werden nicht angezeigt, bis sie der Admin freischaltet.
Weitere Infos zur Seite
Erzeugt Montag, 19. Januar 2015
von wabis
Zum Seitenanfang
Geändert Montag, 18. März 2019
von wabis