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. SYNLAB Holding Deutschland GmbH, Augsburg
  2. Robert Bosch GmbH, Leonberg
  3. Deutsche Telekom AG, verschiedene Standorte
  4. SYNLAB Holding Deutschland GmbH, München, Augsburg


Anzeige
Hardware-Angebote
  1. 18,99€ statt 39,99€

Folgen Sie uns
       


  1. Europol

    EU will "Entschlüsselungsplattform" ausbauen

  2. Krack-Angriff

    AVM liefert erste Updates für Repeater und Powerline

  3. Spieleklassiker

    Mafia digital bei GoG erhältlich

  4. Air-Berlin-Insolvenz

    Bundesbeamte müssen videotelefonieren statt zu fliegen

  5. Fraport

    Autonomer Bus im dichten Verkehr auf dem Flughafen

  6. Mixed Reality

    Microsoft verdoppelt Sichtfeld der Hololens

  7. Nvidia

    Shield TV ohne Controller kostet 200 Euro

  8. Die Woche im Video

    Wegen Krack wie auf Crack!

  9. Windows 10

    Fall Creators Update macht Ryzen schneller

  10. Gesundheitskarte

    T-Systems will Konnektor bald ausliefern



Haben wir etwas übersehen?

E-Mail an news@golem.de


Anzeige
Flettner-Rotoren: Wie Schiffe mit Stahlsegeln Treibstoff sparen
Flettner-Rotoren
Wie Schiffe mit Stahlsegeln Treibstoff sparen
  1. Hyperflight China plant superschnellen Vactrain
  2. Sea Bubbles Tragflächen-Elektroboote kommen nach Paris
  3. Honolulu Strafe für Handynutzung auf der Straße

Cybercrime: Neun Jahre Jagd auf Bayrob
Cybercrime
Neun Jahre Jagd auf Bayrob
  1. Antivirus Symantec will keine Code-Reviews durch Regierungen mehr
  2. Verschlüsselung Google schmeißt Symantec aus Chrome raus
  3. Übernahme Digicert kauft Zertifikatssparte von Symantec

Passwortmanager im Vergleich: Das letzte Passwort, das du dir jemals merken musst
Passwortmanager im Vergleich
Das letzte Passwort, das du dir jemals merken musst
  1. 30.000 US-Dollar Schaden Admin wegen Sabotage nach Kündigung verurteilt
  2. Cyno Sure Prime Passwortcracker nehmen Troy Hunts Hashes auseinander
  3. Passwortmanager Lastpass ab sofort doppelt so teuer

  1. Re: bei mir genau umgekehrt ...

    DeathMD | 13:54

  2. Re: So sieht das Ende aus

    Talhawkins | 13:52

  3. Re: In der Praxis: Alles über die Server von Skype

    schily | 13:48

  4. Re: Traurig für Berlin

    benandex | 13:41

  5. Re: Update gestartet, iTunes meldet Fehler...

    LadyGaga0 | 13:31


  1. 13:27

  2. 11:25

  3. 17:14

  4. 16:25

  5. 15:34

  6. 13:05

  7. 11:59

  8. 09:03


  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