Mit Animationen in Javascript Canvas habe ich mich in den letzten Monaten schon mehrfach beschäftigt. Erst vor Kurzem bin ich dabei auf den Bereich der "Transformationen" in der Canvas-Bibliothek aufmerksam geworden. Dazu gehören u.a. die Funktionen
Um den Umgang mit Transformationen zu studieren, habe ich mir folgendes Beispiel überlegt: Ein rotes und ein grünes Quadrat sollen unabhängig voneinander in verschiedene Richtungen rotieren.
Das Quadrat soll nun um 5 Grad nach rechts geneigt werden. Dazu kann die Canvas-Funktion "rotate" benutzt werden, mit dem das Canvas um seinen Koordinatenursprung rotiert werden kann.
Testen Sie in der Codebox oben verschiedene Winkel, indem Sie statt 5 die Werte 10, 15, 20 usw. ausprobieren! Sie werden feststellen, dass das Quadrat um den Koordinatenursprung, d.h. um die linke obere Ecke rotiert.
Damit das Quadrat korrekt "um sich selbst" rotiert, muss der Ursprung vor der Rotation auf die Mitte des Quadrats gesetzt werden, also an die Position (x=75, y=75). Wir verwenden dafür die Canvas-Funktion "translate". Nach dem Aufruf von "translate" liegt in der Mitte des Quadrats der Punkt (x=0, y=0) und die linke obere Ecke des Quadrats liegt bei (x=-25, y=-25). Der Aufruf "rect" zum Zeichnen des Quadrats muss daher entsprechend abgeändert werden.
Nun haben wir noch das Problem, dass die Funktion "clearRect" nicht ordnungsgemäß funktioniert, wenn das Canvas rotiert und sein Ursprung verschoben wurde. Das heißt, clearRect bezieht sich nun auch auf das transformierte Canvas und nicht auf unsere ursprüngliche Canvas-Fläche. Wir brauchen die Funktion, damit das Rechteck beliebig oft mit verschiedenen Einstellungen neu gezeichnet werden kann, z.B. wenn Sie den angle1 verändern und dann erneut auf "Ausführen" klicken. Auch bei einer Animation muss in einem bestimmten Millisekunden-Intervall jeweils die ganze Canvas-Fläche gelöscht und neu gezeichnet werden.
Um das in Ordnung zu bringen, nutzen wir die Funktion "save", um den aktuellen Zustand des Canvas (Rotation und Ursprung) zwischenzuspeichern. Nachdem wir unser Quadrat gezeichnet haben, stellen wir den Zustand mit "restore" wieder her. Die mit translate und rotate vorgenommenen Änderungen werden damit wieder zurückgesetzt (was sich nicht auf das gerade gezeichnete Quadrat auswirkt).
Testen Sie nun den Code für verschiedene Winkel:
Ich führe nun ein zweites, grünes Quadrat ein, welches auch um einen bestimmten Winkel (angle2) gedreht wird.
Zur Animation ist es nun nicht mehr weit. Zwei Schritte sind noch notwendig:
Die Funktion "rotateObjects" wird nicht mehr nur einmal, sondern wiederholt in einem Zeitintervall von z.B. 10ms aufgerufen. Ich verwende "setInterval" um das Intervall zu definieren.
Bei jedem Intervallaufruf müssen die Winkel angle1 und angle2 geringfügig erhöht oder erniedrigt werden, damit der Effekt einer Rotation ensteht.
Hinweis: Wenn Sie jetzt mehrfach auf "Ausführen" klicken, wird es zu Problemen kommen.
Die ganze Datei gibt es hier zum Download: drehen.html
Voriges Jahr habe ich bereits einen Beitrag über die Programmierung eines animierten Sternenhimmels mit Javascript Canvas geschrieben. Die Programmierung war zwar mathematisch interessant, aber recht aufwändig, da Canvas von Haus aus keine dreidimensionalen Koordinaten unterstützt. Die x- und y-Positionen der Sterne habe ich daher mit Hilfe der Formeln der perspektivischen Projektion so berechn...
Vor ein paar Monaten habe ich diesen animierten Tunnel programmiert:
See the Pen Simple 3d tunnel with curves by Anna Prenzel (@blaustern_fotografie) on CodePen.
Hintergrund: Vorher hatte ich (auf Anregung meiner Mama) den animierten Sternenhimmel programmiert, d...
Die Intros alter Star-Trek-Serien zeigen einen virtuellen Flug durch den Weltraum:
Ich mag diese Animation, denn sie ist einfach und trotzdem effektvoll. So etwas möchte ich mit Javascript Canvas programmieren. In diesem Tutorial erkläre ich Schritt f...
Willkommen zum zweiten Teil meines Javascript-Canvas-Tutorials! Die Programmierung meiner fraktalen, ornamentalen Blumenranke tritt nun in die entscheidende Phase. Mit der animierten Sinuskurve habe ich im ersten Teil bereits die Grundform der Hauptranke definiert....