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. OSRAM GmbH, Berlin, Garching bei München
  2. TÜV SÜD Gruppe, München

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
Top-Angebote
  1. (u. a. Conan Exiles 12,99€, PSN Card 25 Euro für 21,99€)
  2. 229,99€
  3. 5,55€
  4. (u. a. GRAND THEFT AUTO V: PREMIUM ONLINE EDITION 13,99€, Shadows: Awakening 12,50€)

YoungManKlaus 29. Jun 2011

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


Folgen Sie uns
       


Cherry Stream 3.0 mit großem ß ausprobiert

Alle möglichen Umlaute auf einer Tastatur: Wir haben Cherrys Europa-Tastatur ausprobiert.

Cherry Stream 3.0 mit großem ß ausprobiert Video aufrufen
Black Mirror Staffel 5: Der Gesellschaft den Spiegel vorhalten
Black Mirror Staffel 5
Der Gesellschaft den Spiegel vorhalten

Black Mirror zeigt in der neuen Staffel noch alltagsnäher als bisher, wie heutige Technologien das Leben in der Zukunft katastrophal auf den Kopf stellen könnten. Dabei greift die Serie auch aktuelle Diskussionen auf und zeigt mitunter, was bereits im heutigen Alltag schiefläuft - ein Meisterwerk! Achtung, Spoiler!
Eine Rezension von Tobias Költzsch

  1. Streaming Netflix testet an Instagram erinnernden News-Feed
  2. Start von Disney+ Netflix wird nicht dauerhaft alle Disney-Inhalte verlieren
  3. Videostreaming Netflix will Zuschauerzahlen nicht länger geheim halten

5G-Auktion: Warum der Preis der 5G-Frequenzen so hoch war
5G-Auktion
Warum der Preis der 5G-Frequenzen so hoch war

Dass die Frequenzen für den 5G-Mobilfunk teuer wurden, lasten Telekom, Vodafone und Telefónica dem Newcomer United Internet an. Doch dies ist laut dem Netzplaner Kai Seim nicht so gewesen.
Eine Analyse von Achim Sawall

  1. Funklöcher Hohe Bußgelder gegen säumige Mobilfunknetzbetreiber
  2. Bundesnetzagentur 5G-Frequenzauktion erreicht 6,5 Milliarden Euro
  3. 5G-Auktion Etablierte wollen Preis für 1&1 Drillisch hochtreiben

Final Fantasy 7 Remake angespielt: Cloud Strife und die (fast) unendliche Geschichte
Final Fantasy 7 Remake angespielt
Cloud Strife und die (fast) unendliche Geschichte

E3 2019 Das Remake von Final Fantasy 7 wird ein Riesenprojekt, allein die erste Episode erscheint auf zwei Blu-ray-Discs. Kurios: In wie viele Folgen das bereits enorm umfangreiche Original von 1997 aufgeteilt wird, kann bislang nicht mal der Producer sagen.

  1. Final Fantasy 14 Online Report Zwischen Cosplay, Kirmes und Kampfsystem
  2. Square Enix Final Fantasy 14 erhält Solo-Inhalte und besonderen Magier
  3. Rollenspiel Square Enix streicht Erweiterungen für Final Fantasy 15

    •  /