Abo
  • Services:
Anzeige
Paper.js: Generative Gestaltung in Javascript und HTML5
(Bild: Paper.js)

Paper.js

Generative Gestaltung in Javascript und HTML5

Paper.js: Generative Gestaltung in Javascript und HTML5
(Bild: Paper.js)

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.

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.

Anzeige

Ein Document Object Model in Szene gesetzt

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.


eye home zur Startseite
YoungManKlaus 29. Jun 2011

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



Anzeige

Stellenmarkt
  1. Continental AG, Eschborn, Regensburg
  2. ABB AG, Ladenburg
  3. HALLESCHE Krankenversicherung a. G., Stuttgart
  4. Lufthansa Technik AG, Hamburg


Anzeige
Spiele-Angebote
  1. 9,99€
  2. 14,99€ + 1,99€ Versand (für alle die kein NES Classic ergattern konnten)
  3. ab 59,00€ (Vorbesteller-Preisgarantie)

Folgen Sie uns
       


  1. Umweltbundesamt

    Software-Updates für Diesel reichen nicht

  2. Acer Nitro 5 Spin

    Auf dem Gaming-Convertible spielen und zeichnen

  3. Galaxy Note 8 im Hands on

    Auch das Galaxy Note sieht jetzt doppelt - für 1.000 Euro

  4. Microsoft

    Git-Umzug von Windows-Team abgeschlossen

  5. Play Store

    Google entfernt 500 Android-Apps mit 100 Millionen Downloads

  6. DreamHost

    US-Regierung will nun doch keine Daten von Trump-Gegnern

  7. Project Brainwave

    Microsoft beschleunigt KI-Technik mit Cloud-FPGAs

  8. Microsoft

    Im Windows Store gibt es viele illegale Streaming-Apps

  9. Alpha-One

    Lamborghini-Smartphone für über 2.000 Euro vorgestellt

  10. Wireless-AC 9560

    Intel packt WLAN in den Prozessor



Haben wir etwas übersehen?

E-Mail an news@golem.de


Anzeige
Schifffahrt: Yara Birkeland wird der erste autonome E-Frachter
Schifffahrt
Yara Birkeland wird der erste autonome E-Frachter
  1. Sea Bubbles Tragflächen-Elektroboote kommen nach Paris
  2. Honolulu Strafe für Handynutzung auf der Straße
  3. Yara Birkeland Autonomes Containerschiff soll elektrisch fahren

Nach Anschlag in Charlottesville: Nazis raus - aber nur aus PR-Gründen
Nach Anschlag in Charlottesville
Nazis raus - aber nur aus PR-Gründen
  1. Bundesinnenministerium Neues Online-Bürgerportal kostet 500 Millionen Euro
  2. EU-Transparenz EuGH bekräftigt nachträglichen Zugang zu Gerichtsakten
  3. Rücknahmepflicht Elektronikschrott wird kaum zurückgegeben

Radeon RX Vega 64 im Test: Schnell und durstig mit Potenzial
Radeon RX Vega 64 im Test
Schnell und durstig mit Potenzial
  1. Vega 64 Strix ausprobiert Asus' Radeon macht fast alles besser
  2. Radeon RX Vega Mining-Treiber steigert MH/s deutlich
  3. Radeon RX Vega 56 im Test AMD positioniert sich in der Mitte

  1. Re: Stickoxide....

    matok | 19:29

  2. Re: Umweltprämie? Dadurch wirds doch noch schlimmer!

    Allandor | 19:28

  3. Re: Sind 1000 Euro nicht zu teuer?

    XxXXXxxXxx | 19:26

  4. Re: werGoogelnKann (kann auch Java -NEIN!

    m1ndgames | 19:26

  5. Re: Schwierigkeit aufgeweicht

    Thunderbird1400 | 19:25


  1. 17:51

  2. 17:08

  3. 17:00

  4. 16:55

  5. 16:38

  6. 16:08

  7. 15:54

  8. 14:51


  1. Themen
  2. A
  3. B
  4. C
  5. D
  6. E
  7. F
  8. G
  9. H
  10. I
  11. J
  12. K
  13. L
  14. M
  15. N
  16. O
  17. P
  18. Q
  19. R
  20. S
  21. T
  22. U
  23. V
  24. W
  25. X
  26. Y
  27. Z
  28. #
 
    •  / 
    Zum Artikel