Archivlink: javarea.de Forum > JavaScript > Rotations- und Transformationsmatrizen
Vollständigen Link anzeigen: javarea.de Forum > JavaScript > Rotations- und Transformationsmatrizen

Pages: [1]

geschrieben von Martin am 31.10.2006 - 11:44

geschrieben von Micha am 31.10.2006 - 19:48
Hi,

ich kann Matrizenrechnung und auch eine einfache Rotation in JavaScript bekomme ich hin.

Ich habe leider nicht verstanden, was Du genau suchst? Die Ursprungssituation solltest Du doch kennen oder willst Du die Rotation rückgängig machen?

Letzteres geht nur(!!!) wenn Du Dir

1. den Winkel (Vorzeichen definieren!)
2. die Achse merkst um die gedreht wurde
3. die Reihenfolge speicherst

Im anhang ein Bild, was dies verdeutlicht - beachte die Winkel!!!

Eine Rotation ist im Raum sonst nicht umkehrbar. Die Kenntnis über die Drehwinkel allein nutzt Dir auch nichts. Du musst die Achse und die Reihenfole kennen!

Wenn Du die rein mathematische vorgehensweise kennst aber an Matrizenrechnung scheiterst, dann hilft Dir vll JavaScript Square Matrix Library, wobei Du das Ding nicht für eine reine Rotation benötigst. Die Multiplikation sollte letztlich kein Problem darstellen, oder?

LG Micha

Micha

geschrieben von Martin am 01.11.2006 - 12:52
Ave,

*patsch an die Stirn* Natürlich spielt die Reihenfolge der Rotationen eine elementare Rolle. Muss mir da wohl etwas einfallen lassen. Sowas wie die "History" im Browser wäre wahrscheinlich sinnvoll.

Ein anderes Problem was noch ungelöst ist. Ich habe eine Zoom-Funktion (Matrix) um die Darstellung(-Größe) der Galaxie zu verändern.

Leider kann ich wegen der internen Multplikation nur mit dem Faktor - (kleiner x>1) - z.B. 0.5 eine Verkleinerung erreichen. Leider ist das für eine Animation ziemlich ruppig.

Des weiteren suche ich noch eine sinnvolle Möglichkeit abhängig vom Abstand im Raum(Z) eine Verkleinerung der Grafik und die Verschiebung im Raum (StyleSheet: z-index) zu erreichen.

Die Mathematik (Matrizenberechnung) ist etwas Problematisch, da ich nur bedingt auf Schulwissen zurückgreifen kann. Bin kein Abiturient mit 3 Jahren Hochschulmathematik. Hab mir erst viel anlesen müssen.

mfg martin

geschrieben von Micha am 01.11.2006 - 15:18

geschrieben von Martin am 01.11.2006 - 15:38
Ave,

das ist die 4x4 Matrix die ich benutze. MatrixScale() ist besagte Org. Funktion zum Scalieren eines Objekts. MatrixCompose() verbindet/addiert danach die 2 Matrizen miteinander.



/**
* Matrix
* Constructs a 4x4 Matrix you will need to transform points.
* Preconfigured as identity matrix, i.e.
* 1 0 0 0
* 0 1 0 0
* 0 0 1 0
* 0 0 0 1
*
* Returns
* a new Matrix object
*/
function Matrix() {
// sets identity matrix
this.a01 = this.a02 = this.a03 = 0;
this.a10 = this.a12 = this.a13 = 0;
this.a20 = this.a21 = this.a23 = 0;
this.a30 = this.a31 = this.a32 = 0;
this.a00 = this.a11 = this.a22 = this.a33 = 1;

return this;
}

...

/*
* Matrix.scale
* Scale with the scale factors.
*
* Parameters
* float sx - the x scale factor
* float sy - the y scale factor
* float sz - the z scale factor
*
*/
function MatrixScale(sx, sy, sz) {
var myMatrix = new Matrix();

myMatrix.a00 = sx;
myMatrix.a01 = myMatrix.a02 = myMatrix.a03 = 0;
myMatrix.a10 = 0;
myMatrix.a11 = sy; myMatrix.a12 = myMatrix.a13 = 0;
myMatrix.a20 = myMatrix.a21 = 0;
myMatrix.a22 = sz;
myMatrix.a23 = 0;
myMatrix.a30 = myMatrix.a31 = myMatrix.a32 = 0;
myMatrix.a33 = 1;

myMatrix.compose(this);
this.setMatrixValues(myMatrix);
}

....

/*
* Matrix.compose
* Composes this matrix with the given matrix m
*
* Parameters
* Matrix m - the matrix to compose with
*
*/
function MatrixCompose(m) {
var r, c;
var myMatrix = new Matrix();

// matrices multiplication
for(r = 0; r < 4; r++)
for(c = 0; c < 4; c++) {
myMatrix["a" + r + c] =
this["a" + r + "0"] * m["a0" + c]
+ this["a" + r + "1"] * m["a1" + c]
+ this["a" + r + "2"] * m["a2" + c]
+ this["a" + r + "3"] * m["a3" + c];
}

// copies the new matrix to this
for(r = 0; r < 4; r++) {
for(c = 0; c < 4; c++) {
this["a" + r + c] = myMatrix["a" + r + c];
}
}
}

....
// var zoom = .5;
var globalScaling = new Matrix();
function zoom_myScene( zoom ) {
myScaleMatrix = new Matrix();
myScaleMatrix.scale(zoom,zoom,zoom);
mySceneModel.transform(myScaleMatrix);
draw_myScene();
}


MatrixTransfom macht dann nicht anderes als das Ausmultiplizieren mit der ursprünglichen Matrix. So skaliere ich die orginale Matrix. Leider wie gesagt mit dem angesprochenen Ergebnis.

mfg martin

geschrieben von Micha am 01.11.2006 - 17:19
Hallo,

wie gesagt, es handelt sich scheinbar nicht um ein Matrizenproblem. In das Script wollte ich mich nicht weiter reindenken. Matrix.scale scheint aber nicht zu skalieren, sondern überschreibt einen Wert absolut. Matrix.compose addiert auch scheinbar nichts - zumindest keine Matrix.

Die räumlichen Darstellung (Z) mache ich übrigens so, wenn ich das auf die schnelle nachvollziehen konnte:

HTML-Quelltext
1: 
2: 
myPoint[Nr].style.left = nullpoint[0] + (Point[0][0]-Point[2][0]/2) + "px";
myPoint[Nr].style.top = nullpoint[1] - (Point[1][0]-Point[2][0]/2) + "px";


myPoint ist der dargestellte 2D-Punkt auf dem Bildschirm. nullpoint ist der Ursprung. Point ist der 3D-Punkt, der dargestellt werden soll.

Point[0][0] ist X
Point[1][0] ist Y
Point[2][0] ist Z


Wie gesagt, Du musst Dein Anliegen etwas mehr hervorheben. Zum Reindenken ins vollständige Script fehlt mir ein wenig die Lust. Versuche Deine Problemstellen zu kapseln.

Micha


Powered by: JBB v.2.0.4 Copyright ©2000-2006, www.javarea.de.