201209Apr

Canvas Animation Playground: Animationen im Browser

Ich hatte mit HTMLiveCode einen Browser-Editor entwickelt, der auf das Erstellen von HTML/CSS/JS-Prototypen ausgelegt ist. Auf der Basis von HTMLiveCode entstand schließlich der Canvas Animation Playground: Ein experimentelles Tool, das dem "Creative Coding" zugeschrieben ist und es ermöglicht, Canvas-Animationen direkt im Browser zu erzeugen. Genau wie HTMLiveCode besteht auch der Canvas-Spielplatz aus einem Editor-Bereich und einer Echtzeit-Vorschau, die ein <canvas>-Element darstellt. Der Editor übernimmt die grundlegenden Schritte und so wird die Funktion "CanvasAnimationLoop()" per "requestAnimationFrame" abgespielt. Eigener Code kann also direkt hier eingefügt und ausgeführt werden. Fertige Animationen können zudem als Vollbild-Animation exportiert werden.

HTML5 Canvas Animation Playground - Create animations in real-time

Inspiriert wurde meine Arbeit an dem Editor von bestehenden WebGL-Spielplätzen wie der GLSL Sandbox, dem Shader Toy oder dem WebGL Playground. Natürlich bieten die genannten Tools weitaus komplexere Möglichkeiten, da hardwarebeschleunigte Animationen möglich sind. Für experimentierfreudige JavaScript-Entwickler, die erste Erfahrungen mit Canvas-Animationen sammeln wollen, könnte der Canvas Animation Playground dennoch eine Hilfestellung sein.
Wer ohnehin auf der Suche nach guten Ressourcen aus diesem Bereich ist, sollte bei CreativeJS vorbeischauen. Hier finden sich aktuelle Beiträge und Tutorials rund um kreatives Programmieren.

Kommentare

A L I C A N schrieb am 10.04.2012 #1

Yo,

cooles Projekt, bro!
wäre noch ganz praktisch, wenn man ein Dokument speichern könnte und es durch eine individuelle URL wieder aufrufen oder weiter schicken könnte.

Matthias schrieb am 12.04.2012 #2

Ja, daran arbeite ich noch :)

Webmasterle schrieb am 12.04.2012 #3

Der schon unter dem vorherigen Artikel gepostete Pastebin-Patch pastebin.com/0qjnj0hs gilt auch für den Canvas Animation Playground. Wenn Cookies abgeschaltet sind, ergeben sich sonst Security Errors mit Firefox und es erscheint nur eine weisse Seite mit einer 1 oben links und dann nichts mehr.

Matthias schrieb am 14.04.2012 #4

Ist korrigiert :-)