Abo
  • IT-Karriere:

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

Stellenmarkt
  1. Auswärtiges Amt, Berlin
  2. Landkreis Hameln-Pyrmont, Hameln-Pyrmont

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.



Anzeige
Spiele-Angebote
  1. (-78%) 11,00€
  2. 4,19€
  3. (-80%) 6,99€
  4. 229,00€

YoungManKlaus 29. Jun 2011

agreed ... aber erzähl das mal den "wir sind so coole hacker" kiddies ;)


Folgen Sie uns
       


Control - Fazit

Ballern in einer mysteriösen Behörde, seltsame Vorgänge und übernatürliche Kräfte: Das Actionspiel Control von Remedy Entertainment bietet spannende Unterhaltung.

Control - Fazit Video aufrufen
HP Pavilion Gaming 15 im Test: Günstig gut gamen
HP Pavilion Gaming 15 im Test
Günstig gut gamen

Mit dem Pavilion Gaming 15 bietet HP für 1.000 Euro ein Spiele-Notebook an, das für aktuelle Titel genügend 1080p-Leistung hat. Auch Bildschirm und Ports taugen, dafür nervt uns die voreingestellte 30-fps-Akku-Drossel.
Ein Test von Marc Sauter

  1. Gaming-Notebooks Asus ROG mit Core i9 und fixen oder farbstarken Displays

Mobile-Games-Auslese: Superheld und Schlapphutträger zu Besuch im Smartphone
Mobile-Games-Auslese
Superheld und Schlapphutträger zu Besuch im Smartphone

Markus Fenix aus Gears of War kämpft in Gears Pop gegen fiese (Knuddel-)Aliens und der Typ in Tombshaft erinnert an Indiana Jones: In Mobile Games tummelt sich derzeit echte und falsche Prominenz.
Von Rainer Sigl

  1. Mobile-Games-Auslese Verdrehte Räume und verrückte Zombies für unterwegs
  2. Dr. Mario World im Test Spielspaß für Privatpatienten
  3. Mobile-Games-Auslese Ein Wunderjunge und dreimal kostenloser Mobilspaß

Umwelt: Grüne Energie aus der Toilette
Umwelt
Grüne Energie aus der Toilette

In Hamburg wird in bislang nicht gekanntem Maßstab getestet, wie gut sich aus Toilettenabwasser Strom und Wärme erzeugen lassen. Außerdem sollen aus dem Abwasser Pflanzennährstoffe für die Landwirtschaft gewonnen werden. Dafür müssen aber erst einmal die Schadstoffe aus den Gärresten gefiltert werden.
Von Monika Rößiger

  1. Fridays for Future Klimastreiks online und offline

    •  /