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. CSL Behring GmbH, Marburg, Hattersheim am Main
  2. Robert Bosch GmbH, Stuttgart

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. 297€ + Versand oder Abholung im Markt
  2. 239€ (ohne LTE 199€) - Bestpreis!
  3. 289€ (Bestpreis!)

YoungManKlaus 29. Jun 2011

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


Folgen Sie uns
       


Golem.de besucht Pininfarina (Reportage)

Golem.de hat bei Pininfarina in Turin hinter die Kulissen geschaut und sich mit den Designern des Elektrosportwagens PF0 unterhalten.

Golem.de besucht Pininfarina (Reportage) Video aufrufen
Yuneec H520: 3D-Modell aus der Drohne
Yuneec H520
3D-Modell aus der Drohne

Multikopter werden zunehmend auch kommerziell verwendet. Vor allem machen die Drohnen Luftbilder und Inspektionsflüge und vermessen. Wir haben in der Praxis getestet, wie gut das mit dem Yuneec H520 funktioniert.
Von Dirk Koller


    Machine Learning: Wie Technik jede Stimme stehlen kann
    Machine Learning
    Wie Technik jede Stimme stehlen kann

    Ein Unternehmen aus Südkorea arbeitet daran, Stimmen reproduzierbar und neu generierbar zu machen. Was für viele Branchen enorme Kosteneinsparungen bedeutet, könnte auch eine neue Dimension von Fake News werden.
    Ein Bericht von Felix Lill

    1. AWS Amazon bietet seine Machine-Learning-Tutorials kostenlos an
    2. Random Forest, k-Means, Genetik Machine Learning anhand von drei Algorithmen erklärt
    3. Machine Learning Amazon verwirft sexistisches KI-Tool für Bewerber

    Mars Insight: Nasa hofft auf Langeweile auf dem Mars
    Mars Insight
    Nasa hofft auf Langeweile auf dem Mars

    Bei der Frage, wie es im Inneren des Mars aussieht, kann eine Raumsonde keine spektakuläre Landschaft gebrauchen. Eine möglichst langweilige Sandwüste wäre den beteiligten Wissenschaftlern am liebsten. Der Nasa-Livestream zeigte ab 20 Uhr MEZ, dass die Suche nach der perfekten Langeweile tatsächlich gelang.

    1. Astronomie Flüssiges Wasser auf dem Mars war Messfehler
    2. Mars Die Nasa gibt den Rover nicht auf
    3. Raumfahrt Terraforming des Mars ist mit heutiger Technik nicht möglich

      •  /