Ein Beispiel für Bogenmaß aus Winkel, Sinus und Cosinus
Aus diesen Vorgaben sollen An- und Gegenkathete berechnet werden
Hierfür gibt es zig Abhandlungen. Dennoch muss ich dies für mich verinnerlichen.
| winkel 0° / 360° | sin: 0 | cos: 1 |
| 1. Quandrant | sin > 0 | cos: > 0 |
| winkel 90° | sin: 1 | cos: 0 |
| 2. Quandrant | sin > 0 | cos: < 0 |
| winkel 180° | sin: 0 | cos: -1 |
| 3. Quandrant | sin < 0 | cos: < 0 |
| winkel 270° | sin: -1 | cos: 0 |
| 4. Quandrant | sin < 0 | cos: > 0 |
Zur Erläuterung: Die Demonstration wird auf einer SVG-Zeichenfläche dargestellt. x und y wird von der oberen linken Ecke aus berechnet. Damit erklärt sich, dass die Linien, die sich am Kreis ( Hypothenuse = Radius und Gegenkathete ) treffen und der linken oberen Ecke nähern mit einem Minusvorzeichen versehen sind. Den Nullpunkt bestimmt dennoch das Zentrum des Kreises.
| Winkel: 0 sin α: 0 cos α: 1 |
Mittels Schiebebalken kann ein Winkel in 5° Schritten gewählt werden. Auf der x-Achse wird die blaue Ankathete, auf y-Achse die grüne Gegenkathete und die Hypothenuse in rot dargestellt.
Keine Ahnung ob das eine Erwähnung wert ist, das Bogenmaß oder Radiant in rad errechne ich mit
rad=π*α/180
für JavaScript gilt: var rad=Math.PI*α/180;, da nur der Winkel bestimmt wird.
Die Variablen sin=sin(rad) und cos=cos(rad) werden ermittelt. Erst mit der Auswahl eines Winkels werden die Werte für Ankathete: Radius-(cos*Radius) und Gegenkathete: sin*Radius errechnet. Wohlgemerkt Radius ist gleichzeitig die Hypothenuse.
Das war bis hierher nur eine Vorbereitung. Mein Augenmerk gilt der Stelle, an der sich Gegenkathete und Hypothenuse am Kreis treffen. An dieser Stelle sollen sich ein Kreis oder ein Dreieck nach Wahl entlang bewegen.
| Kreis | |
| Dreieck |
Die Demonstration kann mit einem Kreis oder einem Dreieck je nach Wahl ausgeführt werden. Etwas schwieriger ist die Variante mit dem Dreieck zu realisieren.
Für den Kreis gilt der Mittelpunkt als Bezug und kommt somit ohne zusätzliche Berechnungen aus.
| Startbedingungen: | |||
| von unten zu Winkel 0° | von rechts zu Winkel 90° | von oben zu Winkel 180° | von links zu Winkel 270° |
| von oben zu Winkel 0° | von links zu Winkel 90° | von unten zu Winkel 180° | von rechts zu Winkel 270° |
Ausgabe der aktuellen Position:
Aussage gilt nur für das Dreieck:
Noch eine kleine Randbemerkung:
Dass Vollkreis (grau) und Viertelkreis (rot) nicht deckungsgleich sind, hat mich anfangs etwas irritiert. Jetzt nehme ich das einfach hin. Dann ist das halt so!
Diese Übung dient als Alternative zu animateMotion, da unter diesen Bedingungen nur der Firefox funktionieren würde. Edge fällt bekanntlich komplett aus, Chrome und Opera unterstützen keine Pfadangabe, die erst durch JavaScript gegeben wird.