Tag: Javascript

Javascript Canvas: mehrere Objekte gleichzeitig rotieren lassen

May 17, 2019July 5, 2019 blaustern Animation, Javascript

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…

Frameworks Velocity

Animierter Sternenhimmel mit Velocity JS

July 11, 2018July 11, 2018 blaustern Animation, Javascript

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…

Frameworks 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…

Plugin-Entwicklung Wordpress

WordPress: Javascript-Code interaktiv in einem Post ausführen

July 27, 2016October 13, 2016 blaustern Javascript, PHP

Viele WordPress-Blogs behandeln Inhalte aus der Informatik. Naturgemäß müssen dabei häufig mehr oder weniger umfangreiche Quellcode-Abschnitte erläutert werden. Die Anschaulichkeit und Lernförderlichkeit solcher Webseiten kann erheblich gesteigert werden, indem für den Leser die Möglichkeit geboten wird, den betreffenden Code direkt in der Webseite auszuführen und die Resultate zu betrachten. Das ProgrammingWiki verfolgt diesen Ansatz, um u.a. das Erlernen von Programmiersprachen zu erleichtern. In diesem Beitrag zeige ich, wie mit Hilfe eines selbst entwickelten Plugins auch in WordPress-Posts und -Pages Quellcode interaktiv ausgeführt werden kann. Ich beschränke mich dabei auf Javascript-Code….

Plugin-Entwicklung Wordpress

WordPress: mit einem eigenen Plugin eine Übersicht über Postinhalte generieren

July 11, 2016July 16, 2019 blaustern Javascript, PHP

Ziel ist es, Inhalte gleichen Typs, die in zahlreichen WordPress-Posts verstreut sind, auf einer Übersichtsseite zusammenzufassen. Folgende Typen sind z.B. denkbar: alle Bilder, die in den Posts enthalten sind bzw. Bilder mit einer bestimmten ID oder Klasse alle Tabellen bzw. Tabellen mit einer bestimmten ID oder Klasse alle Überschriften bzw. Überschriften einer bestimmten Ebene (h1, h2 usw.) Die Übersichtsseite soll sozusagen als Bild-, Tabellen-, oder Inhaltsverzeichnis dienen. In meinem Blog “Blaustern Fotografie” gibt es z.B. eine Bildzusammenfassung (siehe Abbildung unten). Es wird ein Plugin benötigt, welches automatisch den HTML-Code…

Plugin-Entwicklung Wordpress

WordPress: Farben und Styles einzelner Posts mit einem eigenen Plugin individuell anpassen (Teil 2)

July 10, 2016July 16, 2019 blaustern Javascript, PHP

Ich betrachte den Fall, dass der Nutzer eine Farbe auswählen möchte, die perfekt auf ein im Post enthaltenes Bild abgestimmt ist. Dann wäre es wünschenswert, wenn die Auswahl direkt durch Anklicken einer bestimmten Stelle in einem ausgewählten Bild erfolgen könnte. Das im ersten Teil entwickelte Plugin werde ich um diese Funktionalität erweitern. Folgende Schritte sind notwendig: Die Meta-Box wird erweitert, sodass ein Bild aus der Media-Library geladen werden kann. Dem ausgewählten Bild wird eine Event-Handler-Funktion zugeordnet, die beim Anklicken des Bildes aufgerufen wird. Die Handler-Funktion extrahiert den Farbwert des Bildes an…

Plugin-Entwicklung Wordpress

WordPress: Farben und Styles einzelner Posts mit einem eigenen Plugin individuell anpassen (Teil 1)

July 9, 2016July 16, 2019 blaustern CSS, Javascript, PHP

Jedes WordPress-Theme enthält ein CSS-Stylesheet, welches die Formatierung für alle Posts und Pages einheitlich festlegt (z.B. Hintergrundfarben, Schriftgrößen oder Abstände). Manchmal ist es jedoch erwünscht, bestimmte Posts (bzw. Pages) individuell gestalten zu können. In meinem Blog “Blaustern Fotografie” wollte ich z.B. die Hintergrundfarbe der Menüleiste am oberen Rand der Seite für jeden Post individuell anpassen. Um diese Funktionalität zu erhalten, habe ich ein Plugin entwickelt, welches folgende Merkmale besitzt: Das Plugin ergänzt im Admin-Bereich neben dem Editor eine Meta-Box. Die Meta-Box enthält einen Color-Picker, der die Auswahl eines Farbwertes ermöglicht. Des…