Rotationswinkel für einzuzeichnende Dreieckswinkel berechnen anhand der 3 Dreieckspunkte

Question

Heute bin ich dabei, ein Dreiecks-Programm von Flash nach CindyJS zu übertragen.

Flash: https://www.matheretter.de/do/loadprog?id=72

Das Programm hatte ich 2011 (lang ist es her) entwickelt.

Den aktuellen Stand mit CindyJS findet man hier:

https://jsfiddle.net/kajus/se0j8woy/1/

Problem ist, die Winkel richtig zu rotieren, sodass sie korrekt in den Dreiecksecken liegen. Derzeit sind sie nicht rotiert und es sieht noch wie folgt aus:

Die damals von mir in Flash angelegte Funktion, um die Winkelrotierungen auszurechnen, klappt zwar ohne Probleme - aber ist mir aus jetziger Sicht viel zu kompliziert. Ich hatte den Arkustangens verwendet und geprüft, wo die drei Punkte liegen.

Wie würdet ihr vorgehen?

Beispiel: Die Rotierung des Winkels Beta soll berechnet werden und ihr habt die Koordinaten A(x|y), B(x|y) und C(x|y) gegeben. Wie gesagt, kurze Antworten sind interessant. Klappt es ggf. einfach über Vektoren?

Answer 1

Hallo Kai,

Ja - nur mit Vektoren (mit was denn sonst?). Hier ein Fiddle, wo ich den Winkel \(\alpha\) angepasst habe.

https://jsfiddle.net/n27cqjhw/

Suche nach 'hier beginnt der Code für alpha';

Ich benutze die Kommandos fillarc und fillpoly um den Kreissektor zu füllen. Die Anzeige oben rechts von \(\alpha\) funktioniert aber jetzt nicht mehr. Anscheinend hat Dein anglemark einen Seiteneffekt!?

Klappt auch mit 'Überschlag'. Ziehe den Punkt \(A\) mal auf die andere Seite von \(BC\) ...

Comments

Super! Echt cool.

https://jsfiddle.net/kajus/se0j8woy/2/

Es fällt auf, dass es eine kleine Linie zwischen Arc und Füllung gibt. Aber das scheint ein CindyJS-Problem zu sein. Ggf. einfach eine Border hinzufügen. -- Mittlerweile gefixt mit: draw( [A+radius*unit(B-A), A+radius*unit(C-A)], color->cgreenlight, size->1.5);

Kannst du noch kurz den Code erläutern? (Habe im Folgenden angleradius entfernt, damit es einfacher zu erkennen ist.)

unit(v) := (v.x/sqrt(v.x*v.x+v.y*v.y),v.y/sqrt(v.x*v.x+v.y*v.y));
fillarc(A+unit(B-A), A+unit(C+B-2*A), A+unit(C-A));
fillpoly( [A, A+unit(B-A), A+unit(C-A)]);

Mit unit(v) berechnest du die Komponenten des Einheitsvektors, richtig?

fillarc: https://cindyjs.org/ref/Elementary_Drawing_Functions.html#fillarc$3

fillpoly: https://cindyjs.org/ref/Elementary_Drawing_Functions.html#fillpoly$1

Hier die neue Version mit der neuen Methode:

https://jsfiddle.net/kajus/qnth3049/8/

---

Mit unit(v) berechnest du die Komponenten des Einheitsvektors, richtig?

Ja genau. Die Funktion unit liefert den Einheitsvektor in Richtung \(v\).

Mit deren Hilfe berechne ich drei Punkte; nennen wir sie mal \(P\), \(Q\) und \(R\)$$P = A + r \cdot \text{unit}(B-A) \\ Q = A + r\cdot \text{unit}(C+B-2A) \\ R= A + r\cdot \text{unit}(C-A)$$

obiges Bild zeigt die Lage der Punkte. Wichtig ist, dass \(P\), \(Q\) und \(R\) den selben Abstand zu \(A\) haben. Das erreiche ich mit dem Normieren der Vektoren und anschließender Multiplikation mit \(r\). Bei \(Q\) ist nur wichtig, dass er auf dem Kreisbogen zwischen \(P\) und \(R\) liegt.

Dann zeichne ich den ausgefüllten Kreisbogen \(PQR\) und das ebenso ausgefüllte Dreieck \(APR\).

---

Es fällt auf, dass es eine kleine Linie zwischen Arc und Füllung gibt.

Ja stimmt. Es fällt auch bei dem blauen Feld erst richtig auf.

Ich habe aber mir nochmal die Funktion anglemark angeschaut. Man kann diese Winkelmarkierungen auch ganz einfach mit einer Intersection von zweimal halfplane und einmal circle realisieren. Der Originalcode ist einfach zu kompliziert gedacht ;-)

Leider funktioniert das JSFiddle aktuell nicht mehr(!) in meinem Browser. Da muss ich mich erst mal drum kümmern ...

---

So mein JSFiddle läuft wieder. Mein zweiter Vorschlag geht so:

markAngle(P, S, Q, r, fillcolor, fillalpha) := (
  shape=halfplane(join(S,P), Q)~~halfplane(join(S,Q), P)~~circle(S, r);
  fill(shape, color->fillcolor, alpha->fillalpha);
);

markAngle(B, A, C, angler, cgreenlight, 1);
markAngle(C, B, A, angler, credlight, 1);
markAngle(A, C, B, angler, cbluelight, 1);

https://jsfiddle.net/uqje1fLr/

Jeder Winkel wird über drei Punkte Schenkel-Scheitel-Schenkel eingegeben.

.. und das mit den Winkeln oben rechts bekomme ich auch noch hin, aber jetzt ist es schon wieder zu spät. Am Wochenende vielleicht ...