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. Digital Transformation Manager (m/w/d)
    OEDIV KG, Bielefeld
  2. Prozessmanager / Projektmanager (m/w/d) Digitalisierung
    KombiConsult GmbH, Frankfurt
Detailsuche

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.

Golem Karrierewelt
  1. C++ Programmierung Basics: virtueller Fünf-Tage-Workshop
    05.-09.09.2022, virtuell
  2. Hands-on C# Programmierung: virtueller Zwei-Tage-Workshop
    13./14.09.2022, virtuell
Weitere IT-Trainings

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.

Bitte aktivieren Sie Javascript.
Oder nutzen Sie das Golem-pur-Angebot
und lesen Golem.de
  • ohne Werbung
  • mit ausgeschaltetem Javascript
  • mit RSS-Volltext-Feed


Aktuell auf der Startseite von Golem.de
US-Streaming
Abonnenten immer unzufriedener mit Netflix

Wenn Netflix-Abonnenten das Abo kündigen, wird vor allem der hohe Preis sowie ein schlechtes Preis-Leistungs-Verhältnis als Grund dafür genannt.

US-Streaming: Abonnenten immer unzufriedener mit Netflix
Artikel
  1. Elektro-SUV: Drako Dragon soll Teslas Model X Plaid deutlich übertreffen
    Elektro-SUV
    Drako Dragon soll Teslas Model X Plaid deutlich übertreffen

    Das Elektroauto Drako Dragon soll mit seinen vier Motoren eine Leistung von 1.470 kW entwickeln und 320 km/h Spitze fahren.

  2. Evari 856: Minimalistisches E-Bike mit Monocoque-Rahmen und Titan
    Evari 856
    Minimalistisches E-Bike mit Monocoque-Rahmen und Titan

    Evari 856 heißt das E-Bike, das mit einem Monocoque-Rahmen aus Carbon ausgestattet ist. Dadurch soll es besonders leicht und stabil sein.

  3. Machine Learning: Die eigene Stimme als TTS-Modell
    Machine Learning
    Die eigene Stimme als TTS-Modell

    Mit Machine Learning kann man ein lokal lauffähiges und hochwertiges TTS-Modell der eigenen Stimme herstellen. Dauert das lange? Ja. Braucht man das? Nein. Ist das absolut nerdig? Definitv!
    Eine Anleitung von Thorsten Müller

Du willst dich mit Golem.de beruflich verändern oder weiterbilden?
Zum Stellenmarkt
Zur Akademie
Zum Coaching
  • Schnäppchen, Rabatte und Top-Angebote
    Die besten Deals des Tages
    Daily Deals • MSI RTX 3080 Ti Ventus 3X 12G OC 1.049€ • Alternate (u. a. Corsair Vengeance LPX 32 GB DDR4-3600 106,89€) • be quiet! Pure Rock 2 26,99€ • SanDisk microSDXC 400 GB 29€ • The Quarry + PS5-Controller 99,99€ • Samsung Galaxy Watch 3 119€ • Top-PC mit Ryzen 7 & RTX 3070 Ti 1.700€ [Werbung]
    •  /