Paper.js

Generative Gestaltung in Javascript und HTML5

Mit Paper.js haben die Designer Jürg Lehni und Jonathan Puckey ein Webframework für das HTML5-Canvas-Element vorgestellt, das mit Javascript generative Gestaltung ermöglichen soll. Das Framework soll eine Art Schweizer Messer für skalierbare Vektorgrafiken werden.

Artikel veröffentlicht am , Matthias Thömmes
Paper.js: Generative Gestaltung in Javascript und HTML5
(Bild: Paper.js)

Ein universelles Werkzeug für skalierbare Vektorgrafiken soll das Grafikframework "Paper.js" nach den Vorstellungen des Designerduos Lühni aus der Schweiz und Puckey aus Norwegen werden. Im Stil von Vektorgrafikprogrammen ist die interaktive Erstellung von Grafiken in Javascript auf HTML5-Canvas-Elementen unter anderem mit Bézierkurven, Pfaden, Animationen und Farbverläufen möglich.

Ein Document Object Model in Szene gesetzt

Die Entwickler betonen, dass es sich bei Paper.js nicht nur um einen Wrapper für Canvas handele, da Paper.js ein eigenständiges DOM enthalte. Dieses unterscheidet vergleichbar mit der Ebenenverwaltung in Grafikbearbeitungsprogrammen zwischen Pfaden und Bildern, die mittels Javascript auf Ebenen und in Gruppen angeordnet werden können.

  • Vektorgrafik mit Paper.js
  • Vektorgrafik mit Paper.js
  • Vektorgrafik mit Paper.js
  • Vektorgrafik mit Paper.js
  • Vektorgrafik mit Paper.js
Vektorgrafik mit Paper.js

So definierte Elemente verwaltet das Framework selbstständig in einem DOM, das die Entwickler auch als Szenengraphen bezeichnen. Vergleichbar mit einem Webbrowser geschieht auch die Darstellung der Objekte automatisch, so dass Skripten lediglich die Modifikation und Erstellung vorbehalten bleibt.

Interaktive Vektorgrafiken per Skript

Die Entwickler haben bei der Ausgestaltung des APIs einen eigenständigen Parser vorgesehen, der "Paperscript" genanntes Javascript in einem eigenen Gültigkeitsbereich ausführt und dabei den Zugriff auf Eigenschaften der Elemente vorsieht. Diese Skripte können unter anderem spezifische Kalkulationen auf Pfaden durchführen und Vektoren und Bilder transformieren. Für die Elemente werden Maus- und Tastaturereignisse bereitgestellt. Um Ressourcen zu schonen, können mehrere Instanzen eines Elements initiiert und optimiert ausgegeben werden.

Lehni und Puckey betonen, dass sie für Paper.js ihre Erfahrungen aus ihrer Adobe-Illustrator-Erweiterung Scriptographer genutzt haben, auf der das Framework auch basiert. Unter paperjs.org steht das unter der MIT-Lizenz veröffentlichte Projekt zum Download bereit. Dort gibt es auch verschiedene interaktive Beispiele.

Bitte aktivieren Sie Javascript.
Oder nutzen Sie das Golem-pur-Angebot
und lesen Golem.de
  • ohne Werbung
  • mit ausgeschaltetem Javascript
  • mit RSS-Volltext-Feed


Aktuell auf der Startseite von Golem.de
Interview mit Don Lemon
Elon Musk spricht über Ketamin-Konsum und Raketen-Roadster

Das einstündige Interview hat seinen Moderator den Job gekostet. Viel Neues lässt sich über Elon Musks Drogenkonsum, Weltbild und Zukunftspläne trotzdem nicht lernen.
Von Daniel Ziegener

Interview mit Don Lemon: Elon Musk spricht über Ketamin-Konsum und Raketen-Roadster
Artikel
  1. Fiio CP13 im Test: Kassetten-Retrofeeling mit starkem Sound und Einschnitten
    Fiio CP13 im Test
    Kassetten-Retrofeeling mit starkem Sound und Einschnitten

    Nach Platten sind jetzt Kassetten wieder im Kommen - entsprechend gibt es auch neue Player. Fiios CP13 ist nicht perfekt, weckt aber durchaus Nostalgiegefühle.
    Ein Test von Tobias Költzsch

  2. TLS unter Windows: RSA-Schlüssel müssen bald mindestens 2.048 Bit lang sein
    TLS unter Windows
    RSA-Schlüssel müssen bald mindestens 2.048 Bit lang sein

    TLS-Zertifikate auf Basis von 1.024-Bit-RSA-Schlüsseln gelten schon seit Jahren als unsicher. Microsoft will 2.048 Bit unter Windows nun zur Pflicht machen - mit Ausnahmen.

  3. Office 2024 LTSC: Office ohne Cloud- und Kontopflicht kommt dieses Jahr
    Office 2024 LTSC
    Office ohne Cloud- und Kontopflicht kommt dieses Jahr

    Mit Office 2024 und dessen LTSC-Version will Microsoft weiterhin einen Nischenmarkt bedienen. Die Lizenzen werden allerdings teurer.

Du willst dich mit Golem.de beruflich verändern oder weiterbilden?
Zum Stellenmarkt
Zur Akademie
Zum Coaching
  • Schnäppchen, Rabatte und Top-Angebote
    Die besten Deals des Tages
    • Daily Deals • Gaming-Deals (bis -51%) bei MediaMarkt • Samsung Galaxy Week: Rabatte bis 47% • Ubisoft Spring Sale (PC) • 8x Panasonic eneloop AA 19,99€ • NBB: Black Weeks bis -70% • be quiet! Shadow Base 800 93,89€ • Hisense 85A6BG 999€ [Werbung]
    •  /