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. nobilia-Werke J. Stickling GmbH & Co. KG, Verl
  2. Lidl Dienstleistung GmbH & Co. KG, Neckarsulm

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
Blu-ray-Angebote
  1. 4,25€
  2. (2 Monate Sky Ticket für nur 4,99€)

YoungManKlaus 29. Jun 2011

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


Folgen Sie uns
       


Hasselblad X1D und Fujifilm GFX 50S - Test

Im analogen Zeitalter waren Mittelformatkameras meist recht klobige Geräte, die vor allem Profis Vorteile boten. Einige davon sind im Zeitalter der Digitalfotografie obsolet. In Sachen Bildqualität sind Mittelformatkameras aber immer noch ganz weit vorn, wie wir beim Test der Fujifilm GFX 50S und Hasselblad X1D herausgefunden haben.

Hasselblad X1D und Fujifilm GFX 50S - Test Video aufrufen
Nasa-Teleskop: Überambitioniert, überteuert und in dieser Form überflüssig
Nasa-Teleskop
Überambitioniert, überteuert und in dieser Form überflüssig

Seit 1996 entwickelt die Nasa einen Nachfolger für das Hubble-Weltraumteleskop. Die Kosten dafür stiegen seit dem von 500 Millionen auf über 10 Milliarden US-Dollar. Bei Tests fiel das Prestigeprojekt zuletzt durch lockere Schrauben auf. Wie konnte es dazu kommen?
Von Frank Wunderlich-Pfeiffer

  1. Nasa Forscher entdecken Asteroiden, bevor er die Erde erreicht
  2. Nasa 2020 soll ein Helikopter zum Mars fliegen
  3. Raumfahrt Nasa startet neue Beobachtungssonde Tess

Esa: Sonnensystemforschung ohne Plutonium
Esa
Sonnensystemforschung ohne Plutonium

Forscher der Esa arbeiten an Radioisotopenbatterien, die ohne das knappe und aufwendig herzustellende Plutonium-238 auskommen. Stattdessen soll Americium-241 aus abgebrannten Brennstäben von Kernkraftwerken zum Einsatz kommen. Ein erster Prototyp ist bereits fertig.
Von Frank Wunderlich-Pfeiffer

  1. Jaxa Japanische Sonde Hayabusa 2 erreicht den Asteroiden Ryugu
  2. Mission Horizons @Astro_Alex fliegt wieder
  3. Raumfahrt China lädt die Welt zur neuen Raumstation ein

Bargeldloses Zahlen: Warum Apple Pay sich hier noch nicht auszahlt
Bargeldloses Zahlen
Warum Apple Pay sich hier noch nicht auszahlt

Während Google Pay jüngst hierzulande gestartet ist, lässt Apple Pay auf sich warten. Kein Wunder: Der deutsche Markt ist schwierig - und die Banken sind in einer guten Verhandlungsposition.
Eine Analyse von Andreas Maisch

  1. Bargeldloses Zahlen Apple und Goldman Sachs planen Apple-Kreditkarte

    •  /