Aufgabe 6 ( SVG-Toolchen ) SVG und grafische Kunst

Paul Klee:
Wenn ein Punkt Bewegung und Linie wird, so erfordert das Zeit. Ebenso, wenn sich eine Linie zur Fläche verschiebt. Desgleichen die Bewegung von Flächen zu Räumen. Entsteht vielleicht ein Bildwerk auf einmal? Nein, es wird Stück für Stück aufgebaut, nicht anders als ein Haus. Und der Beschauer, wird er auf einmal fertig mit dem Werk? (Leider oft ja.)

Ein selbstgestaltetes ( "self-made" ) SVG-Projekt soll Web-Kunstwerke "herstellen". Plagiate sind "out". Es gilt, eigene "Algorithmen für modern Art" zu entwicklen und die zugehörigen Web-Kustwerke zu präsentieren. Diese Übung soll einen vertieften Schnelleinstieg in die grafische SVG-Web-Entwicklungen ermöglichen ( generativen Grafik, HTML5, ECMAScript, SVG ). Diese SVG-Übung darf zusammen hängen mit der Visualisierung von Daten, Generierung von ästetischen Grafiken, Animationen von SVG-Attributen.

Grafik-Grundkenntnisse auffrischen ... Weblinks OpenGL, WebGL, SVG, Canvas

Für eine erfolgreiche Toolchen-Entwicklung ist die Bedienung von Grafik-Programmen wohl nicht hinreichend, wenn Events bei Grafische Elementen und mauszentrierte Applikationsentwicklungen genötigt werden. Falls erforderlich, können/sollen Grafik-Kenntnissen aufgefrischt werden. Hier ist ein Quickstart zu notwendigen Grafik-Grundwissen und hier ein SVG-Quickstart mit einführenden SVG-Lehrbeispielen .

Einführendes zur Grafik steht z.B. bei
de.wikipedia Scalable Vector Graphics,
de.wikipedia Computergrafik,
de.wikipedia Grafikdesign , Logos, Vektorkunst, CD-Motiven, Postern,
de.wikipedia Graphische Kunst,
de.wikipedia Comics,
de.wikipedia Fraktale,
hg54 Fraktale und Kunst,
de.wikipedia Lindenmayer-System,
proceduralgraphics L-Systeme (Beiepiele),
Google-SketchUp, Mediengestaltungen,
de.wikipedia Technische Zeichnung im Bauingenieurswesen und Maschinenbau,
de.wikipedia CAD beim rechnerunterstützten Zeichnen und Konstruieren,
Statistik-Visualisierung, technischen Diagrammen, Balkendiagramme, Tortendiagramme,
charts library, Landkarten, Stadtplänen, Flugblätter, 3D-Schriftzüge,
elektronisches Dashboard (englisch für Armaturenbrett, Instrumententafel), usw.

Seit den Anfängen der elektronischen Datenverarbeitung gibt es zahlreiche, kommerzielle, umfangreiche Grafik-Programme, siehe z.B.
de.wikipedia Grafiksoftware.

Links zu SVG::
w3.orgSVG 1.1 Scalable Vector Graphics, W3C Recommendation 16 August 2011
w3.orgSVG ( Property Index ) ( w3.org, Scalable Vector Graphics 1.1)
w3.orgGraphics/SVG w3.org mit zahlreichen Links

w3.org Browser ( SVG 1.1 - Verügbarkeit 2011 )
caniuse.com caniuse SVG
```
SVG Reference
http://polettix.s3.amazonaws.com/svg/svg-refcard.pdf
http://www.w3schools.com/svg/svg_reference.asp
https://developer.mozilla.org/en-US/docs/Web/SVG/Element
SVG element reference
http://polettix.s3.amazonaws.com/svg/svg-refcard.svg
svg-refcard als .svg-Source
http://www.cheat-sheets.org/own/svg/index.xhtml
SVG Visual Cheat Sheet
http://upload.wikimedia.org/wikipedia/commons/7/74/Timeline_of_web_browsers.svg
Browser-Timeline als .svg-Source
```
sourceforgeSVG -Demos
svg-wow.orgSVG -Demos
mozilla.orgSVG -Demos ( svg-css3-animations )
snapsvg.ioSVG -Demos ( Animationen )

w3.org ( SVG-Historie ) Secret_Origin_of_SVG w3.org mit SVG-Historie
de.wikibooksSVG-Tutorial, einführend als HTML.
de.wikibooksSVG-Tutorial als SVG.pdf, 614 Seiten
SVG – Learning By Coding von Dr. Thomas Meinike mit Zahlreiche Beispielen
SVG-Tutorial .pdf 240 Seiten
SVG - Wikibooks Lehrbuch zu SVG mit Beispielen.
SVG Tutorial von Ralf Pohlmann.
SVG Tutorial Studienarbeit von Tjorven Lauchardt.
SVG-Animation von Dr. O. Hoffmann mit Beispielen und Tests.
SVG von Dr. Olaf Hoffmann mit PHP, Kurven, Kurveninterpolation, Transformationen, Animationen, Differentialgleichungen.
about-svg.de von Maik Boche, kommentierte Beispiele mit Quelltext, Kartographie.
SVG von Petra Kukofka gnuplot nach svg (js-Source) http://gnuplot.sourceforge.net/demo_svg_4.7/gnuplot_svg.js
Links zu OpenGL:
de.wikipedia OpenGL bei de.wikipedia
opengl42-quick-reference-card.pdf von khronos
WebGL-Spezifikation; von khronos
OpenGL-Einstieg (Tutorial)
Tutorial , Extensive OpenGL programming tutorials and resources.
OpenGL developer FAQ, FAQ and troubleshooting guide
Links zu WebGL:
de.wikipedia WebGL bei de.wikipedia
introduction to webgl Opera-Tutorial:
Learning WebGL
webgltutorial von Peter-Strohm
SVG = Scalable Vector Graphics (Allgemeine Hinweise): SVG ist eine XML basierende Sprache, die skalierbaren Grafiken bestehen aus ASCII-Code, SVG unterstützt CSS und ECMAScript. Ein kleines, freies, plattformunabhängiges Programm zur Erstellung von Scalable Vector Graphics ist Inkscape ( Kofferwort aus engl. Tinte und Landschaft). Im Internet gibt es zahlreiche (meist kleinere) Anwendungen mit/für Vektor-Grafik, wie z.B.
svg-edit.googlecode SVG-Editor

HTML5 und SVG ( allgemeines ) Weblinks

HTML5 ermöglicht die eingebettete Verwendung von SVG-Tags, die als Grafik-Flächen dienen. Auch können externe SVG-Dokumente ähnlich wie Bilder ( object-Tag ) eingebunden werden. Hier ist ein de.wikipedia-Beispiel: SVG-Buch-logo.svg ,

Hinweis: 2D-Flächenmodellierung mit Regelfächen

Die Linienpunkte durch ( wenige ) vorgegebene Punkte können mit Interpolationsverfahren ( wikipedia ) berechnet werden. Beispiele sind Spline ( wikipedia ) , en.wikipedia Hermite Polynomials ( wikipedia ) , Cubic Hermite spline ( wikipedia ), usw.

Wie können mathematische Formeln für die Berechnung der Oberflächenpunkte erhalten werden? Siehe z.B. Regelflächen ( ruled surface ) ruled surface

Hinweis: SVG und Koodinaten-Transformationen 2D-Wertkoordinante und Viewport

Siehe z.B. w3.org: SVG - Coordinate Systems, Transformations and Units ( Kap 7 )

Hinweis: SVG und Maus Canvas und Maus

Wie können Teilstrukturen der SVG-Grafik interaktiv mit der Maus verschoben werden? Hierzu können die Maus-Geräte-Koordinaten bei Mausereignissen verwendet werden ...

Viel Freude bei der Ausarbeitung!
Letzter Abgabetermine So 12.00 Uhr