Self-made-Animationen mit SVG-Templates

Franz Kafka: "Verbringe nicht die Zeit mit der Suche nach einem Hindernis, vielleicht ist keines da."

Es soll ein Toolchen entworfen, entwickelt und getestet werden, das auf einfachste Weise unterschiedliche dynamische Präsentation von kurzen Scenen erstellen kann. Der Designer kann z.B. aus mehreren Self-made-SVG-Templates ein gewünschtes Basis-SVG-Template auswählen. Die Basis-SVG-Templates für Kurz-Animationen sollen für viele Anwendungsgebiete nutzbar sein und möglichst hohen ästetischen Ansprüchen genügen.


Interpolation ( Allgemein ) Einführung

Wie kann ein Pfad anhand weniger Punkte modelliert werden? Die Lösung kann sowohl für den einfachen Aufbau von geometrischen Objekten und auch für weitere Verfeinerungen von Animationscenen als auch deren Darstellung ( grafisches Rendern ) verwendet werden.

Informativ sind z.B. das Kochanek–Bartels-Verfahren und das SVG-Bild ( wikimedia ) zur TCB-Interpolation , Hermite - Spline -Verfahren

Interpolationsverfahren ( Welches? ) Mathe

Es gibt ser viele Interpolationsverfahren. Welche sind günstig, einfach, universell? Empfehlung siehe Interpolation mit trigonometrischen Funktionen Erklärungen in der Veranstaltung.

Hier Hinweise: Z.B. mit o = {calc_modus:0/"line", r0:95, idx:[0, 1, 2, 3, 4], xxx:[95, 0, -95, 0, 95], yyy:[ 0, -95, 0, 95, 95 ]}  berechnet calc_tsplines_x_y_arr(o) aus den 4 Punkten in xxx, yyy einen Array mit x-y-Wertefolgen, die auf einem Kreis liegen. Die interpolierten Punkte werden mit der Funktion draw_tsplines(o) gezeichnet. Natürlich können mehr als 4 Stützpunkte verwendet werden. dt = 1 / 30

function calc_tsplines_x_y_arr(o) { 
var I = o.idx, X = o.xxx, Y = o.yyy, len = Y.length, xy = [],
    i, t, ww, co, si, g0, g1, g2, g3, x, y, dt = o.dt || 1/30;
if (o.draw_modus === "line") { len -= 1; } // sonst geschlossen 

for (i = 0; i < len; i += 1) { I.unshift( I.pop() );
  for (t = 0; t < 1 + dt / 2; t += dt) {  ww = t * Math.PI / 2;
    co = Math.cos(ww); si = Math.sin(ww);
    switch(o.calc_modus){
    case 0; // Extrapolation
      g0 = (1 - co) / 4; g2 = (1 + co) / 4;
      g1 = (1 + si) / 4; g3 = (1 - si) / 4; break; 
   default: // Interpolation
      g0 = co * (co - 1) / 2;  g2 = co * (co + 1) / 2;
      g1 = si * (si + 1) / 2;  g3 = si * (si - 1) / 2; break;
    }
    x = g0 * X[I[0]] + g1 * X[I[1]] + g2 * X[I[2]] + g3 * X[I[3]];
    y = g0 * Y[I[0]] + g1 * Y[I[1]] + g2 * Y[I[2]] + g3 * Y[I[3]];
    xy.push(x); xy.push(y);
  } 
} return xy;
}
ECMAScript-Objeke einmischen Objekt als Func-Parameter

Dieses Projekt benötigt viele Werte und Parameter von DOM, Grafik-Kontext, Geometrie-Modellierung, Zeitsteuerung, usw. Es ist günstig, Objekt als Funktionsargumente zu nutzen. Hierzu dient extend(obj, add_obj). Erklärungen in der Veranstaltung ( flache Objekt-Komponenten-Strukturen, siehe auch Object.create() ).

// lediglich ein add_obj
function extend(obj, add_obj) { var k;
  for (k in add_obj) {
    if (add_obj.hasOwnProperty(k)) {
      obj[k] = add_obj[k]; 
    }
  } return obj;
}
// für mehrere add_Objekte 
function extend() { var obj = arguments[0] || {},
                    i, k, add_obj, len = arguments.length;
for (i = 1; i < len; i += 1) {  add_obj = arguments[i];
  if (typeof add_obj !== 'object') { continue; }
  for (k in add_obj) {
    if (add_obj.hasOwnProperty(k)) { obj[k] = add_obj[k]; }
  }
} return obj;
}

Beispiel

// Ausgabe von:
// var obj1 = {a0:0,a1:1,a2:2};
// var obj2 = {a3:"33",a2:"22"};
// var objA = extend({},   obj1,obj2);
// var objB = extend(obj1, obj2);   // liefert
Welt-Vieport-Abbildungen SVG und 2D-Welt

Anstelle von Device-Koordinaten soll die Bibliothek eine isotrope/anisotrope 2D-Welt unterstützen. Hier ein Hinweis c2d.txt. Erklärungen in der Veranstaltung.

Matrizen-Transformationen ( SVG 2D ) Mathe

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]  mit 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]

HTML 5 hat keine .getTransform() aber .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
SVG ( = Scalable Vector Graphics ) Weblinks

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

Links zu SVG:

w3.orgSVG 1.1 Scalable Vector Graphics, W3C Recommendation 16 August 2011
w3.orgGraphics/SVG w3.org mit zahlreichen Links
w3.orgSecret_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
Comparison of JavaScript Graph Frameworks ( .pdf )
SVG-Editor Im Internet gibt es zahlreiche Anwendungen mit/für Vektor-Grafik. Soweit möglich verwendet auch Wikipedia SVG für Grafiken und Bilder.

Viel Freude bei der Ausarbeitung!
Letzter Abgabetermine So 12.00 Uhr