5. Aufgabe ( Modern-Art ) Kunst mit Canvas

Randnotiz ( Google-Unternehmensinformationen ggf. mit "cloudigen" Gedanken-Assoziationen ):
"Das Ziel von Google besteht darin, die Informationen der Welt zu organisieren und allgemein nutzbar und zugänglich zu machen."

Diese Übung wird in der Veranstaltung besprochen.

Diese Übung soll sowohl ein Schnelleinstieg in HTML5-Canvas-Entwicklungen als auch mit Hilfe der generativen Grafik ( HTML5, Canvas, ECMAScript ) selbstentwickleten Algorithmen für Computer-Kunstwerke als ästetische Bilder ( "modern Art" ) präsentieren. Plagiate sind "out".

  1. Basis-Wissen zu HTML5-Canvas und grafische Grundkenntnisse. Für einen Schnelleinstieg kann das experimentelle, erweiterbare Canvas-Toolchen für mathematisch-grafische Algorithmen sowie das experimentelle Graphen-Toolchen für mathematische Funktionen in Parameterdarstellung nützlich sein.
  2. Es sind Lehrbeispiele für 2D-Canvas Matrizen-Transformationen zu schreiben. Das experimentellen, erweiterbaren Canvas-Toolchen kann als eigene Seite übernommen werden und ist zu erweitern. Insbesondere sind kleine, übersichtliche Lehrbeispiele zu ctx.translate(ti,tj), ctx.scale(si,sj), ctx.rotate(w) zu ergänzen, zu testen, zu dokumentieren.
  3. Es sind grafische Algorithmen für digitaler Kunst und ästetische Bilder ( "modern Art" ) zu entwickeln, zu testen, zu dokumentieren.
Zu 1: Einführendes und grafische Grundkenntnisse Basis-Wissen

Siehe z.B. die Hinweise zu den Grundlagen_der_Computergrafik

Zu 2: 2D-Canvas Matrizen-Transformationen Wozu Matrizen?

Transformationen sind translate, rotate und scale. Diese entsprechen den folgenden Matrizen: 

translate(ti,tj) entspricht  [ 1,  0,  0]
                             [ 0,  1,  0]
                             [ti, tj,  1]

rotate(w) entspricht         [ c,  s,  0] 
c = cos(w); s = sin(w);      [-s,  c,  0]
                             [ 0,  0,  1]

scale(si,sj) entspricht      [si,  0,  0]
                             [ 0, sj,  0]
                             [ 0,  0,  1]

HTML5-Canvas hat keine .getTransform() aber eine 
.setTransform(m11, m12, m21, m22, dx, dy)

                             [m11, m12, 0]
                             [m21, m22, 0]
                             [dx,  dy,  1]
mit 
       i_neu = i * m11 + j * m21 + dx,
       j_neu = i * m12 + j * m22 + dy
Zu 3: Mathematischen Verfahren und digitale Kunst Wie und Was konkret?

Für dei Entwicklung von Verfahren zur Erstellung von digitaler Kunst ist mathematisches Basis-Wissen zu grafischen Algorithmen notwendig. Beispiele für Parametergleichungen ( ebene Kurven ): 

Gerade: 
     x(t) = x1 + t*(x2 - x1); 
     y(t) = y1 + t*(y2 - y1);

Kreis:                         Ellipse:
     x(t) = x0 + r * cos(t);       x(t) = x0 + a * cos(t); 
     y(t) = y0 + r * sin(t);       y(t) = y0 + b * sin(t); 

Neilsche Parabel: 
     x(t) = t^2; 
     y(t) = a * t^3;

Mit Hilfe der generativen Grafik ( HTML5, Canvas, ECMAScript ) sollen in einer weiteren HTML-Seite ästetische Bilder ( "modern Art" ) erzeugt werden. Hierzu werden selbst entwickelte Algorithmen verwendet. Plagiate sind "out". Die künstlerisch ansprechende Bilder sollen in der HTML-Seite dargestellt generiert und gerndert werden. Die selbst entwickelten Algorithmen sind zu dokumentieren.

Nach welchem Prinzipen werden sie ein modernes Kunstwerk erstellen? Welche mathematischen Verfahren werden sie verwenden?

Mit Hilfe der generativen Grafik ( HTML5, Canvas ) können Bilder erzeugt werden. Die gewählten Algorithmen bestimmen die Bildklassen. Selbst entwickelte Algorithmen sollen unterschiedlich parametrisiert werden, um künstlerisch ansprechende Bilder zu zuerstellen, wie z.B. Geometrische Kurvenscharen ( de.wikipedia ) , Lissajous Curve ( en.wikipedia ) , iterierte Funktionensysteme, Turtle Graphics ( en.wikipedia ) , Koch-Kurve, Sierpinski-Dreieck, Farn, Gräser, Baum, Collage-Theorem Fraktale Z=Z^2+C ( en.wikipedia ) , Julia-Mengen, L-Systeme ( en.wikipedia ) , Algen-Wachstum, komplexe Ortsvektoren, mathematische Trajektorien, Mandala, Epizykloide ( de.wikipedia ) , usw.

Parameter-Variation liefert viele Bilder ( siehe z.B. en.wikipedia Maurer Rose , Spirograph ). Ein Mandala ist ein ästetisches Bild, das ein Zentrum hat, und individuelle, innere "Meta-Erfahrungen" und , abstrakte Weltsichten verkörpert. Natürlich hängt der optisch-psychologische Eindruck von den Parameterngrenzen und dem Algorithmus ab. Parameter-Variation liefert viele Bilder.

Durch Parametervariationen können atomatisch pseudo-ästetische Bilder erzeugt werden. Die mit unterschiedlichen Parametereinstellungen erzeugten Bilder haben keine Gefühlszuordnung oder Bedeutung in der Kunst. Die Parameterauswahl und damit die Bildauswahl nach künstlerischen, ästetischen Kriterien "hat was eigenes". Wer kennt den Urgrund der Kunst? Siehe z.B. Computerkunst , de.wikipedia: Digitale Kunst

Viel Freude bei der Ausarbeitung!
Letzter Abgabetermine So 12.00 Uhr