201331Mai

Scrubby: JavaScript-Werte in Echtzeit verändern

Wer sich für Animationen, Spiele und interaktive Grafikanwendungen in HTML/JavaScript interessiert, wird Seiten wie CreativeJS oder die GLSL Sandbox bereits kennen. Für das Erstellen und Bearbeiten von Canvas-Animationen direkt im Browser hatte ich vor einem Jahr den Canvas Animation Playground entwickelt, der das Schreiben von Animationen beschleunigen soll.
Ein interessantes Skript in diesem Zusammenhang stellt Scrubby dar: Damit können die Zahlenwerte von JavaScript-Codes per Schieberegler verändert werden, wodurch sich eine HTML5-Canvas-Anwendung in Echtzeit manipulieren lässt.

Scrubby - Tweak values in JavaScript without having to reload

Für das direkte Bearbeiten von Animationen im Browser eignet sich Scrubby also hervorragend, da gerade für die Berechnungen von Positionen, Farben und Effekten etliche Anpassungen erforderlich sein können. Ein Skript-Block muss nur mit dem Typ "text/scrubby" gekennzeichnet werden, damit sich Werte interaktive verändern lassen.
Scrubby setzt dafür die ECMAScript-Tools Esprima und Escodegen ein. Bei GitHub findet sich der Quellcode zu Scrubby und eine Roadmap. So sind bereits weitere interessante Features geplant, wie etwa das Verändern von Strings oder das Einblenden eines Farbwählers.