Category: Javascript Canvas

Animierter Tunnel mit Kurven (Javascript Canvas)

August 8, 2017August 8, 2017 blaustern Animation, Javascript

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…

Frameworks Javascript Canvas

Animierter Sternenhimmel mit Javascript Canvas

February 22, 2017August 8, 2017 blaustern Animation, Grafik, Javascript1 Comment

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…

Frameworks Javascript Canvas

Animierte Blattranke mit Javascript Canvas (Teil 2)

October 13, 2016October 31, 2016 blaustern Animation, Fraktal, Javascript

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…

Frameworks Javascript Canvas

Animierte Blattranke mit Javascript Canvas (Teil 1)

October 4, 2016October 14, 2016 blaustern Animation, Grafik, HTML, Javascript

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…