Grafische Kunst mit Hilfe von SVG SVG-Toolchen

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.)

Projekt-Kurzfassung: Es gibt zahlreiche IT-Web-Anwendungsbereiche, die graphische 2D-Elemente benötigen. Bei diesem Projekt geht es um die Entwicklung einer App, die ECMAScript verwendet und das Entwicklen von SVG-Komponenten unterstützt. Ein selbstgestaltetes ( "self-made" ) SVG-Projekt soll das Erstellen von ästetischen Grafik-Kunstwerke unterstützen. Die ästetischen Grafiken sollen für anspruchsvolle Webseiten geeignet sein ( Seiten mit Web-Kunst ).

Eigene SVG-Projekt-Idee Was soll gemacht werden?

Es können z.B. eigene "Algorithmen für modern-Art-Kunst" entwicklt werden. Bei der Computerkunst gibt es Beziehungen zwischen Interface und Benutzern, der Programmierung und den Rechenprozessen ( generative, hypertextuelle und modulare Verfahren ). Zu eigenen Ideen können Infos beitragen wie Digitale Kunst , Computerkunst, Digitale Malerei, Biomorphs, Emergenz, HTML Art, Browser- und Netzkunst, Fraktale Geometrie, Fractal Flames, Ornamentik. Book of Kells ist Weltdokumentenerbe. Für die Konstruktionsverfahren der keltischen Ornamentik siehe "The Book of Kells Painting Book". Einführung zu Fraktale , https://www.youtube.com/watch?v=0jGaio87u3A , https://www.youtube.com/watch?v=N4N4Fv5BMOA künstlich erschaffene Welten.

Verwendet werden kann generativen Grafik, HTML5, ECMAScript, w3.org: SVG 1.1 , Authoring Guide SVG 2 , Roadmap SVG . Diese SVG-Übung darf zusammen hängen mit der Visualisierungen von Daten, der Generierung von ästetischen Grafiken, Animationen von SVG-Attributen, usw.. Die eigene Idee soll in möglichst einfacher, robuster Weise als Projekt realisiert werden. Plagiate sind out.

Hier werden lediglich Basis-Ideen und Hinweise stichwortartig beschrieben. Die "self-made" soll praxistauglich sein und SVG gestaltend einbeziehen.

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 .

Ein Wissen um die Bedienung von Grafik-Programmen ist für eine erfolgreiche Toolchen-Entwicklung wohl nicht hinreichend, wenn Events bei Grafische Elementen und mauszentrierte Applikationsentwicklungen genötigt werden. Falls erforderlich, können/sollen Grafik-Kenntnissen aufgefrischt werden.

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

Hinweis: HTML5 und SVG ( allgemeines ) Weblinks

Hier einige Links zu SVG:

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: SVG path-Tag einführend

Quelltext ( SVG-Beispiel "Herz-Icon" ) 

<svg width="30%" height="100"
 style="width:30%; height: 100px;" viewBox="0 0 32 32">

 <desc> Herzförmiges Icon mit SVG </desc> 

 <path fill="#f9c" stroke="#cc0"
   d = "M16,28.261c0,0-14-7.926-14-17.046c0-9.356,13.159-10.399,14-0.454 
        c1.011-9.938,14-8.903,14,0.454C30,20.335,16,28.261,16,28.261z"/>
</svg>

Anzeige ( SVG-Beispiel "Herz-Icon" )

Herzförmiges Icon mit SVG

Hinweise zum path-Tag: 

M 10 10     gehe zu x=10, y=10
m 10 10     gehe zu x=jetzt+10, y=jetzt+10
L 10 100    Linie zu x=10, y=100 ziehen
l 10 10     Linie zu x=jetzt+10, y=jetzt+10
H 100       horizontale Linie zu x=100, y=jetzt
h 100       horizontale Linie zu x=jetzt+100, y=jetzt
V 100       vertikale Linie zu x=jetzt, y=100
v 100       vertikale Linie zu x=jetzt, y=jetzt+100

Q 140 150, 160 30     quadratische Bézier-Kurve 
                      mit Anfasser (x=140, y=150) und Zielpunkt

q 140 150, 160 30     relativ zum Bezugspunkt

C 150 150,180 170,300 40 kubische Bézier-Kurve mit 2 Anfassern
                         und einem Zielpunkt
c 150 150,180 170,300 40 relativ zum Bezugspunkt

T 100 100             quadratische Bézier-Kurve 
                      mit gespiegeltem Anfasser
T 100 100             relativ zum Bezugspunkt 
                      (ausgehend vom letzten)
Hinweis: SVG-Transformationen Matrizen

Transformationen sind translate, rotate und scale. Siehe w3.org Koordinaten-Transformationen . 

svg-Tag mit width="600" height="150" und viewBox="-100 0 300 150"
 x="10"  y="10"  width="50" height="50" transform="matrix(1 0 0 1   0   0)"
 x="10"  y="10"  width="50" height="50" transform="matrix(1 0 0 1  25  25)"
 x="-25" y="-25" width="50" height="50" transform="matrix(1 0 0 1  85  85)"
 x="85"  y="85"  width="50" height="50" transform="rotate(45 110 110)"

Teste Transformationen ( Bitte auf ein farbiges Quadrat klicken )

Siehe Weblink svg-transformations

Etwas Theorie ... 

   i = a·x + c·y + e

   j = b·x + d·y + f

Die Initialisierung entspricht transform="matrix(1 0 0 1 0 0)", d.h. b = c = e = f = 0 und a = d = 1. In der Matrizenschreibweise sieht die Transformation der Userkoordinaten (x,y) in die Gerätekoordinaten (i,j) so aus: 

Viewport =   Matric  *  Userspace

⎡ i ⎤   ⎡ a  c  e ⎤ ⎡ x ⎤
⎢   ⎥   ⎢         ⎥ ⎢   ⎥
⎢ j ⎥ = ⎢ b  d  f ⎥·⎢ y ⎥
⎢   ⎥   ⎢         ⎥ ⎢   ⎥
⎣ 1 ⎦   ⎣ 0  0  1 ⎦ ⎣ 1 ⎦

Mit den Transformationskonstanten a, b, c, d, e, f können die Userkoordinaten (x,y) in die Gerätekoordinaten (i,j) umgewandelt werden. Ist a·d != b·c, so kann die Umkehrmatrix berechnet werden: 

⎡ 1  0  0 ⎤     ⎡ a  c  e ⎤ ⎡  d  -c  c·f-d·e ⎤
⎢         ⎥     ⎢         ⎥ ⎢                 ⎥
⎢ 0  1  0 ⎥  =  ⎢ b  d  f ⎥·⎢ -b   a  b·e-a·f ⎥·(a·d - b·c)
⎢         ⎥     ⎢         ⎥ ⎢                 ⎥
⎣ 0  0  1 ⎦     ⎣ 0  0  1 ⎦ ⎣  0   0  a·d-b·c ⎦

Bei translate(ti,tj) ist e = tx, f = ty 

    [ 1,  0,  ti]
    [ 0,  1,  tj]
    [ 0,  0,  1 ]

Bei rotate(w) entspricht a = cos(w), b = sin(w), b = -sin(w), d = cos(w), e = 0, f = 0. 

    [ co,  sn,  0]  mit co = cos(w); sn = sin(w);
    [-sn,  co,  0]
    [  0,   0,  1]

Bei scale(sx,sy) entspricht a = sx, b= 0, c = 0, d = sy, e = 0, f = 0. 

    [sx,  0,  0]
    [ 0, sy,  0]
    [ 0,  0,  1]

Die Reihenfolge der Transformationen ist wesentlich. Beispiel: 

rot(a)       := matrix(cos(a), sin(a), -sin(a), cos(a), 0, 0)

scale(sx,sy) := matrix(    sx,      0,       0,     sy, 0, 0)

rot(a) * scale(sx,sy) = matrix(sx*cos(a), sx*sin(a), 
                              -sy*sin(a), sy*cos(a), 0, 0)

scale(sx,sy) * rot(a) = matrix(sx*cos(a), sy*sin(a), 
                              -sx*sin(a), sy*cos(a), 0, 0)

Bei Rotationen um einen Punkt ( i0, j0 ) ist eine Verschiebung ( -e, -f ) zum Nullunkt, dann eine Rotation um den Nullpunkt und dann eine Verschiebung um ( e, f ) erforderlich. 

⎡ a1  c1  a1·e+c1·f - e ⎤   ⎡ 1  0  -e ⎤ ⎡ a1  c1  0 ⎤ ⎡ 1  0  e ⎤
⎢                       ⎥   ⎢          ⎥ ⎢           ⎥ ⎢         ⎥
⎢ b1  d1  b1·e+d1·f - f ⎥ = ⎢ 0  1  -f ⎥·⎢ b1  d1  0 ⎥·⎢ 0  1  f ⎥
⎢                       ⎥   ⎢          ⎥ ⎢           ⎥ ⎢         ⎥
⎣  0   0       1        ⎦   ⎣ 0  0   1 ⎦ ⎣  0   0  1 ⎦ ⎣ 0  0  1 ⎦

Somit
e_neu = a1·i0 + c1·j0 - i0 und
f_neu = b1·i0 + d1·j0 - j0 

Plagiate sind out!
Viel Freude bei der Ausarbeitung!
Letzter Abgabetermine So 12.00 Uhr