Tag: Grafik

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…

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…