201128Jul

VVVV.js: JavaScript-Port des Multimedia-Toolkits

Der Begriff "Creative Coding" dürfte schon etwas länger bekannt sein, da es inzwischen etliche Projekte und Entwicklungsumgebungen für dieses Gebiet gibt. Generative Gestaltung oder "Computational Design" zeichnet sich durch visuelle Darstellungen aus, die durch Algorithmen erzeugt und animiert werden. Die Zutaten reichen von einfachen Bildern und Grafiken über Sound bis hin zu komplexen 3D-Animationen. Bekannte Frameworks wären Processing und openFrameworks, aber inzwischen gibt es noch weitere Toolkits wie Polycode oder das HYPE Framework für Flash.
Ein bekanntes Projekt, das auf eine visuelle Programmiersprache und das Verbinden von Knotenpunkten (Nodes) setzt, stellt VVVV dar. Mit dem "Multipurpose Toolkit" lassen sich multimediale Echtzeit-Anwendungen umsetzen, die vor allem für Installationen und physikalische Interfaces interessant sind.

VVVV.js

Wer das VVVV-Projekt nicht kennt, sollte sich auf der Website einfach Beispiele ansehen und in der Dokumentation stöbern. Diejenigen, die VVVV bereits kennen, können nun ihre XML-Patches (im V4P-Format) auch im Browser ausprobieren, da eine JavaScript-Umsetzung der VVVV-Runtime-Parts veröffentlicht wurde. Auf Basis von jQuery kann ein Patch geladen und die Hautschleife (MainLoop) gestartet werden.

  • var patch;
  • var mainloop;
  • $(document).ready(function() {
  •  
  • initVVVV("vvvv_js");
  •  
  • patch = new VVVV.Core.Patch("patch.v4p", function() {
  • mainloop = new VVVV.Core.MainLoop(this);
  • });
  •  
  • });

Während in VVVV für 3D-Animationen DirectX zum Einsatz kommt, nutzt die JavaScript-Portierung WebGL und Canvas für entsprechende Darstellungen. Eine Dokumentation der unterstützten Nodes sowie weitere Informationen zur Implementierung finden sich auf der Website von VVVV.js.