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. über Dr. Maier & Partner GmbH Executive Search, österreichische Alpenregion
  2. BGV / Badische Versicherungen, Karlsruhe

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. (-77%) 11,49€
  2. 111€
  3. 55,11€ (Bestpreis!)

YoungManKlaus 29. Jun 2011

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


Folgen Sie uns
       


Always Connected PCs angesehen (Windows 10 on ARM)

Mit einer neuen Plattform will Microsoft noch einmal ARM-basierte Geräte als Notebook-Alternative auf den Markt bringen. Dieses Mal können auch zahlreiche alte Programme ausgeführt werden.

Always Connected PCs angesehen (Windows 10 on ARM) Video aufrufen
P20 Pro im Kameratest: Huaweis Dreifach-Kamera schlägt die Konkurrenz
P20 Pro im Kameratest
Huaweis Dreifach-Kamera schlägt die Konkurrenz

Mit dem P20 Pro will Huawei sich an die Spitze der Smartphone-Kameras katapultieren. Im Vergleich mit der aktuellen Konkurrenz zeigt sich, dass das P20 Pro tatsächlich über eine sehr gute Kamera verfügt: Die KI-Funktionen können unerfahrenen Nutzern zudem das Fotografieren erleichtern.
Ein Test von Tobias Költzsch

  1. Android Huawei präsentiert drei neue Smartphones ab 120 Euro
  2. Wie Samsung Huawei soll noch für dieses Jahr faltbares Smartphone planen
  3. Porsche Design Mate RS Huawei bringt 512-GByte-Smartphone für 2.100 Euro

Physik: Maserlicht aus Diamant
Physik
Maserlicht aus Diamant

Ein Stickstoff-Fehlstellen-basierter Maser liefert kontinuierliche und kohärente Mikrowellenstrahlung bei Raumtemperatur. Eine mögliche Anwendung ist die Kommunikation mit Satelliten.
Von Dirk Eidemüller

  1. Colorfab 3D-gedruckte Objekte erhalten neue Farbgestaltung
  2. Umwelt China baut 100-Meter-Turm für die Luftreinigung
  3. Crayfis Smartphones sollen kosmische Strahlung erfassen

Dell XPS 13 (9370) im Test: Sehr gut ist nicht besser
Dell XPS 13 (9370) im Test
Sehr gut ist nicht besser

Mit dem XPS 13 (9370) hat Dell sein bisher exzellentes Ultrabook in nahezu allen Bereichen überarbeitet - und es teilweise verschlechtert. Der Akku etwa ist kleiner, das spiegelnde Display nervt. Dafür überzeugen die USB-C-Ports, die Kühlung sowie die Tastatur, und die Webcam wurde sinnvoller.
Ein Test von Marc Sauter und Sebastian Grüner

  1. Ultrabook Dell hat das XPS 13 ruiniert
  2. XPS 13 (9370) Dells Ultrabook wird dünner und läuft kürzer
  3. Ultrabook Dell aktualisiert XPS 13 mit Quadcore-Chip

    •  /