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. Franke Coffee Systems GmbH, Grünsfeld
  2. opta data Abrechnungs GmbH, Essen

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
Spiele-Angebote
  1. 2,49€
  2. (-68%) 15,99€
  3. 32,95€
  4. 5,99€

YoungManKlaus 29. Jun 2011

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


Folgen Sie uns
       


Bewerbungsgespräch mit der KI vom DFKI - Bericht

Wir haben uns beim DFKI in Saarbrücken angesehen, wie das Training von Bewerbungsgesprächen mit einer Künstlichen Intelligenz funktioniert.

Bewerbungsgespräch mit der KI vom DFKI - Bericht Video aufrufen
Verschlüsselung: Die meisten Nutzer brauchen kein VPN
Verschlüsselung
Die meisten Nutzer brauchen kein VPN

VPN-Anbieter werben aggressiv und preisen ihre Produkte als Allheilmittel in Sachen Sicherheit an. Doch im modernen Internet nützen sie wenig und bringen oft sogar Gefahren mit sich.
Eine Analyse von Hanno Böck

  1. Security Wireguard-VPN für MacOS erschienen
  2. Security Wireguard-VPN für iOS verfügbar
  3. Outline Digitalocean und Alphabet-Tochter bieten individuelles VPN

Mobile Bezahldienste: Wie sicher sind Apple Pay und Google Pay?
Mobile Bezahldienste
Wie sicher sind Apple Pay und Google Pay?

Die Zahlungsdienste Apple Pay und Google Pay sind nach Ansicht von Experten sicherer als klassische Kreditkarten. In der täglichen Praxis schneidet ein Dienst etwas besser ab. Einige Haftungsfragen sind aber noch juristisch ungeklärt.
Von Andreas Maisch

  1. Anzeige Was Drittanbieter beim Open Banking beachten müssen
  2. Finanzdienstleister Wirecard sieht kein Fehlverhalten
  3. Fintech Wirecard wird zur Smartphone-Bank

Galaxy S10e im Test: Samsungs kleines feines Top-Smartphone
Galaxy S10e im Test
Samsungs kleines feines Top-Smartphone

Mit dem Galaxy S10e bietet Samsung auch ein kompaktes Modell seiner neuen Oberklasse-Smartphone-Serie an. Beim Gerät gibt es zwar ein paar Abstriche bei der Hardware, es liegt aber fantastisch in der Hand und macht super Fotos - für uns der klare Geheimtipp der neuen Reihe.
Ein Test von Tobias Költzsch

  1. Samsung Galaxy M20 kommt an drei Tagen nach Deutschland
  2. Smartphone Samsungs LPDDR4X-Speicher fasst 12 GByte
  3. Non-Volatile Memory Samsung liefert eMRAM aus

    •  /