Abo
  • Services:

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. BWI GmbH, Bonn, Meckenheim, Koblenz
  2. matrix technology AG, 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
Hardware-Angebote
  1. 59,79€ inkl. Rabatt
  2. ab 399€
  3. 915€ + Versand
  4. 194,90€ + Versand mit Gutschein: RYZEN20 (Bestpreis!)

YoungManKlaus 29. Jun 2011

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


Folgen Sie uns
       


Sony Xperia XZ3 - Hands on (Ifa 2018)

Das neue Xperia XZ3 von Sony kommt mit Oberklasse-Hardware und interessanten Funktionen, die dem Nutzer den Alltag erleichtern können. Außerdem hat das Gerät einen OLED-Bildschirm, eine Premiere bei einem Smartphone von Sony.

Sony Xperia XZ3 - Hands on (Ifa 2018) Video aufrufen
iPhone Xs, Xs Max und Xr: Wer unterstützt die eSIM in den neuen iPhones?
iPhone Xs, Xs Max und Xr
Wer unterstützt die eSIM in den neuen iPhones?

Apples neue iPhones haben neben dem Nano-SIM-Slot eine eingebaute eSIM, womit der Konzern erstmals eine Dual-SIM-Lösung in seinen Smartphones realisiert. Die Auswahl an Netzanbietern, die eSIMs unterstützen, ist in Deutschland, Österreich und der Schweiz aber eingeschränkt - ein Überblick.
Von Tobias Költzsch

  1. Apple Das iPhone Xr macht's billiger und bunter
  2. Apple iPhone Xs und iPhone Xs Max sind bierdicht
  3. Apple iPhones sollen Stiftunterstützung erhalten

Energietechnik: Die Verlockung der Lithium-Luft-Akkus
Energietechnik
Die Verlockung der Lithium-Luft-Akkus

Ein Akku mit der Energiekapazität eines Benzintanks würde viele Probleme lösen. In der Theorie ist das möglich. In der Praxis ist noch viel Arbeit nötig.
Von Frank Wunderlich-Pfeiffer

  1. Elektroautos CDU will Bau von Akkuzellenfabriken subventionieren
  2. Brine4Power EWE will Strom unter der Erde speichern
  3. Forschung Akku für Elektroautos macht es sich im Winter warm

SpaceX: Milliardär will Künstler mit zum Mond nehmen
SpaceX
Milliardär will Künstler mit zum Mond nehmen

Ein japanischer Milliardär ist der mysteriöse erste Kunde von SpaceX, der um den Mond fliegen will. Er will eine Gruppe von Künstlern zu dem Flug einladen. Die Pläne für das Raumschiff stehen kurz vor der Fertigstellung.
Von Frank Wunderlich-Pfeiffer

  1. Mondwettbewerb Niemand gewinnt den Google Lunar X-Prize

    •  /