Epizykloiden-Morph
Das ist eine Demo, welche das Zeichnen von Epizykloiden veranschaulichen soll und dabei kontinuierlich entsprechende Figuren zeichnet. Jede Figur ist als eine Liste aus zu addierenden Drehbewegungen definiert.
Eine Drehbewegung beschreibt einen sich um den Koordinatenursprung (0; 0) drehenden Punkt und enthält dabei Werte für Abstand amp, Startwinkel phase und Drehfrequenz freq.
Gezeichnet wird die Epizykloide, die Figur, von t=0 bis t=2*pi. Die Drehbewegung mit der Frequenz freq=1 oder freq=-1 dreht sich da genau einmal ’rum, alle weiteren drehen sich ganzzahlig schneller links oder rechts herum. Die Punkte der Linie werden berechnet, indem man t von 0 bis 2*pi laufen lässt und für jeden Punkt bei x=0 und y=0 startet. Pro Drehbewegung wird dann x und y mit den Formeln aus dem Bild berechnet und aufaddiert.
Die einzelnen Drehbewegungen werden in der Demo als weiße um den Mittelpunkt wirbelnde, wie ein Zollstock zusammenhängende gerade Linien dargestellt. Der Endpunkt des »Zollstocks« beschreibt die zu zeichnende Epizykloide.
Jede Figur ist definiert durch eine Liste aus Drehbewegungen. Hier sind zwei Beispiele:
// Die Ziffer 2
_2 = [ { freq: -15, amp: 0.0133, phase: -0.6549 },
{ freq: -14, amp: 0.0307, phase: -1.4426 },
{ freq: -13, amp: 0.0397, phase: 1.7789 },
{ freq: -12, amp: 0.0959, phase: 1.8671 },
{ freq: -11, amp: 0.0928, phase: 2.7724 },
{ freq: -10, amp: 0.0323, phase: -2.4101 },
{ freq: -9, amp: 0.1411, phase: -0.2822 },
{ freq: -8, amp: 0.2527, phase: 0.2828 },
{ freq: -7, amp: 0.2172, phase: 0.481 },
{ freq: -6, amp: 0.0656, phase: -0.8955 },
{ freq: -5, amp: 0.3207, phase: -1.1427 },
{ freq: -4, amp: 0.568, phase: -1.2718 },
{ freq: -3, amp: 0.4431, phase: -0.5724 },
{ freq: -2, amp: 0.7873, phase: -3.0104 },
{ freq: -1, amp: 1.3616, phase: -1.4518 },
{ freq: 0, amp: 1.0858, phase: 1.3691 },
{ freq: 1, amp: 1.3671, phase: -0.6549 },
{ freq: 2, amp: 0.7768, phase: -1.4426 },
{ freq: 3, amp: 0.4313, phase: 1.7789 },
{ freq: 4, amp: 0.559, phase: 1.8671 },
{ freq: 5, amp: 0.3247, phase: 2.7724 },
{ freq: 6, amp: 0.0723, phase: -2.4101 },
{ freq: 7, amp: 0.2094, phase: -0.2822 },
{ freq: 8, amp: 0.2527, phase: 0.2828 },
{ freq: 9, amp: 0.1463, phase: 0.481 },
{ freq: 10, amp: 0.0293, phase: -0.8955 },
{ freq: 11, amp: 0.0916, phase: -1.1427 },
{ freq: 12, amp: 0.0974, phase: -1.2718 },
{ freq: 13, amp: 0.0408, phase: -0.5724 },
{ freq: 14, amp: 0.0312, phase: -3.0104 },
{ freq: 15, amp: 0.0132, phase: -1.4518 }];
// ein Pfeil nach rechts
_arrow = [ { freq: 2, amp: 2.763, phase: -3.14159 },
{ freq: 1, amp: 0.277, phase: 1.5707 },
{ freq: -1, amp: 2.773, phase: 1.577 },
{ freq: -2, amp: 2.763, phase: 3.141 } ];
Die Werte dazu habe ich mittels Fourier-Transformation ermittelt. Dem Thema habe ich einen eigenen Beitrag gewidmet.
Die anderen variieren in Anzahl und den Werten. Man kann diese Datenstruktur auch als Spektrum bezeichnen, da jeder Frequenz ein Wert für amp und phase zugeordnet ist.
Über die Zeit werden die Spektren ineinander gefadet — die Werte schrittweise ineinander überführt und diese Zwischenstufen als Epizykloide gezeichnet.
Dabei kann man durch Klicken auf die Zeichenfläche zwischen drei Geschwindigkeiten wählen:
- Normalgeschwindigkeit — Die Epizykloide wird am Stück aus 1000 Weg-Punkten gezeichnet und pro Animationsframe das anzuzeigende Spektrum aus dem der aktuellen und der nächsten Figur berechnet. Das ist die schnellste Stufe.
- ca. 100x Zeitlupe — Man kann den Zeichenprozess besser beobachten und die Linien werden exakter.
- ca. 3000x Zeitlupe — Die feinsten Schleifen werden gezeichnet.