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. Schaeffler Technologies AG & Co. KG, Nürnberg
  2. NEVARIS Bausoftware GmbH, deutschlandweit
  3. KDO Service GmbH, Oldenburg
  4. Pensions-Sicherungs-Verein VVaG, Köln


Anzeige
Hardware-Angebote
  1. 599€ + 5,99€ Versand
  2. 59,90€

Folgen Sie uns
       


  1. Microsoft

    Windows on ARM ist inkompatibel zu 64-Bit-Programmen

  2. Fehler bei Zwei-Faktor-Authentifizierung

    Facebook will keine Benachrichtigungen per SMS schicken

  3. Europa-SPD

    Milliardenfonds zum Ausbau von Elektrotankstellen gefordert

  4. Carbon Copy Cloner

    APFS-Unterstützung wird wegen Datenverlustgefahr beschränkt

  5. Die Woche im Video

    Spezialeffekte und Spoiler

  6. Virtual RAN

    Telekom und Partner bauen Edge-Computing-Testnetz

  7. Basemental

    Mod erweitert Die Sims 4 um Drogen

  8. Verschlüsselung

    TLS 1.3 ist so gut wie fertig

  9. Colt Technology

    Mobilfunk ist Glasfaser mit Antennen

  10. Robotik

    Defekter Robonaut kommt zurück zur Erde



Haben wir etwas übersehen?

E-Mail an news@golem.de


Anzeige
Ryzen 5 2400G und Ryzen 3 2200G im Test: Raven Ridge rockt
Ryzen 5 2400G und Ryzen 3 2200G im Test
Raven Ridge rockt
  1. Krypto-Mining AMDs Threadripper schürft effizient Monero
  2. AMD Zen+ und Zen 2 sind gegen Spectre gehärtet
  3. Pinnacle Ridge Asus aktualisiert Mainboard für Ryzen 2000

Dorothee Bär: Netzbetreiber werden über 100 MBit/s angeblich kaum los
Dorothee Bär
Netzbetreiber werden über 100 MBit/s angeblich kaum los
  1. FTTH/B Glasfaser wird in Deutschland besser nachgefragt
  2. Koalitionsvertrag fertig "Glasfaser möglichst direkt bis zum Haus"
  3. Glasfaser Telekom weitet FTTH-Pilotprojekt auf vier Orte aus

Hightech im Haushalt: Der Bügel-Battle fällt leider aus
Hightech im Haushalt
Der Bügel-Battle fällt leider aus
  1. Smart Home Hardwareteams von Nest und Google werden zusammengeführt
  2. Lingufino Sprachgesteuerter Kobold kuschelt auch mit Datenschützern
  3. Apple Homepod soll ab Frühjahr 2018 in Deutschland erhältlich sein

  1. Re: Geht doch auch mit alter Hardware...

    sidmos6581 | 06:46

  2. Re: Kupfer ist besser als eine Antenne

    wire-less | 06:41

  3. Re: Wasserstoff wäre billiger

    Bradolan | 06:21

  4. Re: Noch in den Kinderschuhen, aber sehr interessant.

    DAGEGEN | 04:38

  5. Re: neuer C64 statt C64 Mini

    gehtjanx | 04:36


  1. 19:40

  2. 14:41

  3. 13:45

  4. 13:27

  5. 09:03

  6. 17:10

  7. 16:45

  8. 15:39


  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