Javascript Canvas: mehrere Objekte gleichzeitig rotieren lassen Programmierung 

Javascript Canvas: mehrere Objekte gleichzeitig rotieren lassen

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 save() restore() translate() rotate() scale()   Mehr Informationen: https://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Transformations 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. Wir beginnen mit einem roten Quadrat, welches sich an der Position (x=50, y=50) befindet und eine Höhe und Breite…

Read More
Animierter Sternenhimmel mit Velocity JS Frameworks Velocity 

Animierter Sternenhimmel mit Velocity JS

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 berechnet, dass ein räumlicher, dreidimensionaler Eindruck entsteht. CSS-Animationen sind eine Alternative zur Animation mit Javascript Canvas. Dabei werden sogar 3D-Transformationen unterstützt, wie z.B. “translateX, translateY, translateZ”, “rotateX, rotateY, rotateZ” oder “scaleX, scaleY, scaleZ”. Das verspricht eine viel einfachere…

Read More
Animierter Tunnel mit Kurven (Javascript Canvas) Frameworks Javascript Canvas 

Animierter Tunnel mit Kurven (Javascript Canvas)

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, den ich in diesem Beitrag beschrieben habe. Dabei lernte ich die perspektivische Projektion kennen, mit der sich dreidimensionale Punkte auf dem zweidimensionalen Bildschirm darstellen lassen. Auf einmal öffnete sich für mich ein Tor zur 3D-Grafikprogrammierung, ein Gebiet, mit dem ich mich vorher noch nicht beschäftigt hatte. Mein Interesse war geweckt. Das nächste Projekt sollte…

Read More
Animierter Sternenhimmel mit Javascript Canvas Frameworks Javascript Canvas 

Animierter Sternenhimmel mit Javascript Canvas

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ür Schritt eine mögliche Lösung. Vorbereitung Zuerst lege ich den benötigten HTML-Code an. Er enthält das <canvas>-Tag, also die “Leinwand”, auf die ich später mit Javascript “zeichnen” werde. Ich speichere die Seite z.B. unter dem Namen “stars.html” (weitere Infos zum Umgang mit HTML-Dateien gibt es hier). Im Head-Bereich verlinke ich die Javascript-Datei, in die ich den…

Read More
Animierte Blattranke mit Javascript Canvas (Teil 2) Frameworks Javascript Canvas 

Animierte Blattranke mit Javascript Canvas (Teil 2)

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. Im nächsten Schritt muss die rekursive Verzweigung der Ranke implementiert werden.   Rotation und Translation Die Verzweigung der Ranken funktioniert unter der Voraussetzung, dass Sinuskurven beliebig rotiert und translatiert (d.h. verschoben) werden können.   Beispiel 1 Eine Ranke muss entlang der x- und y-Achse jeweils um einen bestimmten Betrag (“Offset”) verschoben werden können. Ich speichere die Offsets…

Read More
Animierte Blattranke mit Javascript Canvas (Teil 1) Frameworks Javascript Canvas 

Animierte Blattranke mit Javascript Canvas (Teil 1)

Mein Fotoblog Blaustern Fotografie sollte mit einer animierten, wachsenden Blumenranke geschmückt werden. Das Ergebnis können Sie bereits im Fotoblog betrachten (nur für Bildschirme ab 900px Breite). In diesem zweiteiligen Tutorial erkläre ich, wie das Ornament programmiert ist.   Der Aufbau der Ranke folgt dem Konzept der fraktalen Geometrie: Von der Hauptranke zweigen sich mehrere Seitenranken ab, die selbst genauso aussehen wie die Hauptranke. Jede Seitenranke verzweigt sich auf die gleiche Weise wie die Hauptranke. Dadurch entstehen neue Ranken, die sich wiederum verzweigen und so weiter und so fort – bis…

Read More