Es werden lediglich Basis-Ideen und Hinweise beschrieben, die zu einem selbstgestalteten ( "self-made" ) SVG-Projekt anregen können. Ein Sprichwort sagt:
Konfuzius: Die Erfahrung ist wie eine Laterne im Rücken; sie beleuchtet stets nur das Stück Weg, das wir bereits hinter uns haben.
Der Quickstart zum notwendigen Grafik-Grundwissen und hier ein SVG-Quickstart mit einführenden SVG-Lehrbeispielen .
Es werden lediglich Basis-Ideen und Hinweise beschrieben, die zu einem selbstgestalteten ( "self-made" ) SVG-Projekt anregen können.
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.
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 ,
Mindmapping ist ein Visualisieren von Zusammenhängen in Form von Mindmaps. Eine Mindmap ( auch Mind-Map ) visualisiert Abhängigkeiten und Zusammenhänge. Eine Mindmap bildet Ideen grafisch in eine Baumstruktur ab. Jedes Mindmap-Element kann farbige Stichwort(e) und/oder eine symbolische Grafik enthalten, die das Denken in Bildern anregt. Mindmaps können um Webverweise erweitert werden. Ideen werden durch Pfeile verbunden. Ideen-Äste können weitr verzweigen.
Eine Mind Map kann die eigene Intuition unterstützen, wie z.B. bei Präsentationen, Ideensammlung nach Brainstorming, Planung von Besprechungen, Veranstaltungen vorbereiten, Texte abfassen, Vorträgen gestalten, usw.. Wie können Problem-Maps beim Problemlösen helfen? In Problem-Maps können wir z.B. Ziele und Lösungsansätze sammeln, ein vielsprechendes Ziel auswählen und weiter verfolgen.
Randnotiz von Google-Unternehmensinformationen ggf. mit "cloudigen" Gedanken-Assoziationen:
Das Ziel von Google besteht darin,
alle Informationen der Welt zu organisieren
und allgemein nutzbar und zugänglich zu machen.
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
Eines physikalisch-geometrisches Objekt ( Blume, Haus, Maschine, usw. ) kann mit Datenstrukturen modelliert werden. Eine solche Repräsentation mit Datenstrukturen ist mehr als nur ein Bild, das z.B. als Draht - Modell, Flächen - Modelle, Volumen - Modell gerndert werden kann. Ein physikalisch-geometrisches Objekt kann z.B. bewegt und mit grafischen Methoden in den Bildraum ( Bildebene ) projiziert werden. Die generierten Bilder sind dann nur ein otische Objekt-Präsentation Beispiele sind virtuelle 3D-Objekte, virtuelle Landschaften, Digitales Geländemodell, Kinematik, Gang durch ein virtuelles Gebäude, 3D-Spiele, usw.
Das Speichern von grafischen Daten kann in unterschiedlicher Weise erfolgen. 2D - Bilder können z.B. pixelweise ( unter Verwendung von Kompressions-Algorithmen ) gespeichert werden. Diese Speicherart ist geräteabhängig. Zwischen den Bild - Elementen bestehen lediglich Pixel - Nachbarschaften.
Zum Speichern von geometrischen Körper - Daten ist die Model - Daten - Struktur wesentlich. Für einen Quader der Seitenlängen a = 2.0, b = 1.0, c = 3.0 können die folgenden Punkt -, Kanten - und Flächen - Tabelle aufgeschrieben werden.
kartesische Koordinaten Anfangs- und End- für den i-ten Punkt-Nummer für die k-te Eckpunkte P: Kanten K: | j x y z k j1 j2 |----|------|-----|-----| |----|----|----|---- | 0 | 0.0 | 0.0 | 0.0 | | 0 | 1 | 2 | | 1 | 2.0 | 0.0 | 0.0 | | 1 | 2 | 6 | | 2 | 2.0 | 1.0 | 0.0 | | 2 | 6 | 5 | 0. Fläche | 3 | 0.0 | 1.0 | 0.0 | | 3 | 5 | 1 | |----|------|-----|-----| |----|----|----|---- | 4 | 0.0 | 0.0 | 3.0 | | 4 | 0 | 4 | | 5 | 2.0 | 0.0 | 3.0 | | 5 | 4 | 7 | | 6 | 2.0 | 1.0 | 3.0 | | 6 | 7 | 3 | 1. Fläche | 7 | 0.0 | 1.0 | 3.0 | | 7 | 3 | 0 | |----|------|-----|-----| |----|----|----|---- | 8 | 3 | 7 | | 9 | 7 | 6 | | 10 | 6 | 2 | 2. Fläche Anfangs- und End- | 11 | 2 | 3 | Punkt-Nummern der |----|----|----|---- i-ten begrenzenden | 12 | 0 | 1 | Fläche A: | 13 | 1 | 5 | 3. Fläche | 14 | 5 | 4 | i k1 k2 | 15 | 4 | 0 | |----|----|----|--- |----|----|----|---- | 0 | 0 | 3 | | 16 | 4 | 5 | | 1 | 4 | 7 | | 17 | 5 | 6 | | 2 | 8 | 11 | | 18 | 6 | 7 | 4. Fläche | 3 | 12 | 15 | | 19 | 7 | 4 | | 4 | 16 | 19 | |----|----|----|---- | 5 | 20 | 23 | | 20 | 0 | 3 | |----|----|----|--- | 21 | 3 | 2 | | 22 | 2 | 1 | 5. Fläche | 23 | 1 | 0 | |----|----|----|----
Zum Speichern von geometrischen Körper-Daten ist die Daten - Struktur wesentlich. Die x-, y- , z - Koordinaten der Körper-Punkte können in x[],y[],z[] Arrays gespeichert werden. Z.B. hat der 5 - te Körper-Punkt ( j=5, P5 ) die 3D - Koordinaten ( 2.0, 0.0, 3.0 ).
Weil jede Fläche durch die Punkt - Folge ( Umlaufrichtung beachten ) festgelegt wird, so wird jede ( ungerichtete ) Kante in 2 entgegen gesetzte Richtungen durchlaufen. Die 1 - te Kante verbindet den Punkt P2 mit P6. Die 10 - te Kante verbindet den Punkt P6 mit P2. Die 1 - te Kante gehört zur 0 - ten Fläche. Die 10 - te Kante gehört zur 2 - ten Fläche.
// Punkte j=0., 1., 2., 3., 4., 5., 6., 7.- Punkt double x[]={ 0.0, 2.0, 2.0, 0.0, 0.0, 2.0, 2.0, 0.0 }; double y[]={ 0.0, 0.0, 1.0, 1.0, 0.0, 0.0, 1.0, 1.0 }; double z[]={ 0.0, 0.0, 0.0, 0.0, 3.0, 3.0, 3.0, 3.0 }; //Kanten k=0,1,2,3 | 4,5,6,7 | 8,9, ......................... 22,23.-Kante int j1[]={ 1,2,6,5, 0,4,7,3, 3,7,6,2, 0,1,5,4, 4,5,6,7, 0,3,2,1 }; int j2[]={ 2,6,5,1, 4,7,3,0, 7,6,2,3, 1,5,4,0, 5,6,7,4, 3,2,1,0 }; for ( k = 0; i < 24; i ++ ) { //alle Kanten ( doppelt ) xj1 = x [ j1 [ k ] ]; xj2 = x [ j2 [ k ] ]; yj1 = y [ j1 [ k ] ]; yj2 = y [ j2 [ k ] ]; zj1 = z [ j1 [ k ] ]; zj2 = z [ j2 [ k ] ]; //Linie von (xj1, yj1, zj1) nach (xj2, yj2, zj2) }
Durch hinzufügen eines weiteren A - Index ( hier 6 ) kann auf die k2 Spalte in der Flächen - Tabelle A verzichtet werden. Zur 2 - te Fläche gehören in der Kanten - Tabelle die Indizes 8 bis ( 12 - 1 ).
Anfangs- und ( End-Punkt-Nummern +1 ) der i-ten begrenzenden Fläche A: i k1 --> weitere Daten |-------------------------------------------------- | 0 | 0 | --> Daten für die 0 - te Fläche | 1 | 4 | --> Daten für die 1 - te Fläche | 2 | 8 | --> Daten für die 2 - te Fläche | 3 | 12 | --> Daten für die 3 - te Fläche | 4 | 16 | --> Daten für die 4 - te Fläche | 5 | 20 | --> Daten für die 5 - te Fläche | 6 | 24 | --> Daten für das Volumen |--------------------------------------------------
Auf die j2 - te Spalte der Kanten - Tabelle K kann verzichtet werden, weil zwei aufeinander folgende i Indizes der Flächen - Tabelle A die j Indizes der Kanten - Tabelle festlegen. /* Aufruf Quader * pQuader = new Quader(a,2.0-a,3.0); pQuader->draw(); delete pQuader; */
class Quader {
int A[7]; //Flaechentab A
double Area[6], Ax[6],Ay[6],Az[6];//normierte Normalen Ax,Ay,Az
int K[24]; //Kantentab K
double * pX,* pY,* pZ; //Punktetab X,Y,Z
public:
int anzA, anzK, anzP;
void drawArea( int i );
void draw();
bool calcNormalen();
~Quader() { delete pX; delete pY; delete pZ; }
Quader(double aa, double bb, double cc ) {
anzA = 6; //Flaechentabelle
A[0]= 0; A[1]= 4; A[2]= 8;
A[3]=12; A[4]=16; A[5]=20; A[6]=24;
anzK = 12; //Kantentabelle
K[ 0]=1; K[ 1]=2; K[ 2]=6; K[ 3]=5;
K[ 4]=0; K[ 5]=4; K[ 6]=7; K[ 7]=3;
K[ 8]=3; K[ 9]=7; K[10]=6; K[11]=2;
K[12]=0; K[13]=1; K[14]=5; K[15]=4;
K[16]=4; K[17]=5; K[18]=6; K[19]=7;
K[20]=0; K[21]=3; K[22]=2; K[23]=1;
anzP = 8; //Punktetabelle
pX = new double[anzP];
pY = new double[anzP];
pZ = new double[anzP];
pX[0] = -aa; pY[0] = -bb; pZ[0] = -cc;
pX[1] = +aa; pY[1] = -bb; pZ[1] = -cc;
pX[2] = +aa; pY[2] = +bb; pZ[2] = -cc;
pX[3] = -aa; pY[3] = +bb; pZ[3] = -cc;
pX[4] = -aa; pY[4] = -bb; pZ[4] = +cc;
pX[5] = +aa; pY[5] = -bb; pZ[5] = +cc;
pX[6] = +aa; pY[6] = +bb; pZ[6] = +cc;
pX[7] = -aa; pY[7] = +bb; pZ[7] = +cc;
calcNormalen();
}
};
void Quader::drawArea( int i ) {
double x, y, z; int j, k, k1, k2;
glBegin( GL_LINE_STRIP );
glNormal3d( Ax[i], Ay[i], Az[i] );
k1 = A[i];
k2 = A[i+1];
for ( k = k1; k <= k2; k ++ ) {
if ( k < k2 ) j = K[k ];
else j = K[k1];
x = pX[j];
y = pY[j];
z = pZ[j];
glVertex3d( x, y, z );
}
glEnd();
}
void Quader::draw(void) {
for ( int i = 0; i < anzA; i ++ ) drawArea( i );
}
bool Quader::calcNormalen() {
int i, j, k, k1, k2 ;
double x1, y1, z1, x2, y2, z2, ax, ay, az, a;
for ( i = 0; i < anzA; i ++ ) { ax = ay = az = a = 0.0;
k1 = A[i];
k2 = A[i+1];
j = K[k1];
x1 = pX[j]; y1 = pY[j]; z1 = pZ[j];
for ( k = k1+1; k <= k2; k ++ ) {
j = K[k]; if ( k == k2 ) j = K[k1];
x2 = pX[j]; y2 = pY[j]; z2 = pZ[j];
ax += ( ( y1 - y2 ) * ( z1 + z2 ) ) ;
ay += ( ( z1 - z2 ) * ( x1 + x2 ) ) ;
az += ( ( x1 - x2 ) * ( y1 + y2 ) ) ;
x1 = x2; y1 = y2; z1 = z2;
}
a = sqrt( ax * ax + ay * ay + az * az ) ;
if ( a < 1.0E-9 ) {
Area[i] = Ax[i] = Ay[i] = Az[i] = 0.0 ;
return FALSE ;
} else { a *= 0.5;
Area[i] = a; //Area=Wert der Flaeche
Ax[i] = ax / a; //NormalenKomp Ax,Ay,Az
Ay[i] = ay / a;
Az[i] = az / a;
}
}
return TRUE ;
}
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