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. Rhomberg Gruppe, Bregenz (Österreich)
  2. ViaMedia AG, nordöstlich von Stuttgart
  3. über Duerenhoff GmbH, München
  4. EUROP ASSISTANCE VERSICHERUNGS AG, München


Anzeige
Top-Angebote
  1. 0,00€
  2. (heute u. a. Nintendo Handhelds und Spiele, Harry Potter und Mittelerde Blu-rays, Objektive, Lenovo...

Folgen Sie uns
       


  1. Star Wars - Die letzten Jedi

    Viel Luke und zu viel Unfug

  2. 3D NAND

    Samsung investiert doppelt so viel in die Halbleitersparte

  3. IT-Sicherheit

    Neue Onlinehilfe für Anfänger

  4. Death Stranding

    Kojima erklärt Nahtodelemente und Zeitregen

  5. ROBOT-Angriff

    19 Jahre alter Angriff auf TLS funktioniert immer noch

  6. Bielefeld

    Stadtwerke beginnen flächendeckendes FTTB-Angebot

  7. Airspeeder

    Alauda plant Hoverbike-Rennen

  8. DisplayHDR 1.0

    Vesa definiert HDR-Standard für Displays

  9. Radeon-Software-Adrenalin-Edition

    Grafikkartenzugriff mit Smartphone-App

  10. Datentransfer in USA

    EU-Datenschützer fordern Nachbesserungen beim Privacy Shield



Haben wir etwas übersehen?

E-Mail an news@golem.de


Anzeige
E-Golf auf Tour: Reichweitenangst oder: Wie wir lernten, Lidl zu lieben
E-Golf auf Tour
Reichweitenangst oder: Wie wir lernten, Lidl zu lieben
  1. Uniti One Schwedisches Unternehmen Uniti stellt erstes Elektroauto vor
  2. LEVC London bekommt Elektrotaxis mit Range Extender
  3. Vehicle-to-Grid Honda macht Elektroautos zu Stromnetz-Puffern

Alexa-Geräte und ihre Konkurrenz im Test: Der perfekte smarte Lautsprecher ist nicht dabei
Alexa-Geräte und ihre Konkurrenz im Test
Der perfekte smarte Lautsprecher ist nicht dabei
  1. Alexa und Co. Wirtschaftsverband sieht Megatrend zu smarten Lautsprechern
  2. Smarte Lautsprecher Google unterstützt indirekt Bau von Alexa-Geräten
  3. UE Blast und Megablast Alexa-Lautsprecher sind wasserfest und haben einen Akku

4K UHD HDR: Das ZDF hat das Internet nicht verstanden
4K UHD HDR
Das ZDF hat das Internet nicht verstanden
  1. Cisco und Lancom Wenn Spionagepanik auf Industriepolitik trifft
  2. Encrypted Media Extensions Web-DRM ist ein Standard für Nutzer

  1. Re: Hört mal auf mit diesem Blödsinn

    medium_quelle | 04:18

  2. Re: Golem Was soll das? Überschrift geht ja garnicht

    DAUVersteher | 04:01

  3. Re: Keine Lust auf schwere, komplexe Kämpfe?

    motzerator | 03:46

  4. Re: Das wird total abgefahren....

    ChristianKG | 03:31

  5. Re: Für was der Bedarf an Wildcard-Zertifikaten?

    ManfredHirsch | 03:23


  1. 18:40

  2. 17:11

  3. 16:58

  4. 16:37

  5. 16:15

  6. 16:12

  7. 16:01

  8. 15:54


  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