[math][javascript] Transform matrix om center laten rotaten.

[msentinelb]

Hopelijk zijn er wat mensen hier die wijzer zijn matrix wiskunde dan ik! Ik ben nu al een paar dagen me hoofd aan het breken over het volgende vraagstuk.

Ik heb een aantal transforms:

translate()
rotate()
scale()

Deze transform wil ik omzetten naar 1 enkele matrix die om zijn eigen center draait.

Ik pak het nu als volgt aan.

De eerste matrix translate het geheel naar het midden van het object.
De volgende matrix doet een scale een rotate en een translate naar de juiste plek op het scherm.
De laatste matrix translate de boel weer naar de top/left van het object.

Ik gebruik sylvester om de matrixen te vermenigvuldigen met elkaar.

Om het een en ander duidelijk te maken heb ik een jsfiddle gemaakt. http://jsfiddle.net/xYsHZ/3/

Het is dus de bedoeling dat de rode rect net zo draait als de groene rect. Er zit nu nogal een rare afwijking in die ik niet kan verklaren. Wat doe ik fout?

[ Voor 30% gewijzigd door msentinelb op 04-12-2012 09:19 ]

[STW]

Zonder echt naar je code te kijken, matrix vermenigvuldigingen zijn niet commutatief. Dus de uitkomst van A*B is niet gelijk aan B*A.
Als je dan een andere volgorde van vermenigvuldigingen doet bij de rode en de groene zou het wel kunnen verklaren waarom de beweging uiteindelijk anders is.

[ Voor 37% gewijzigd door STW op 04-12-2012 09:07 ]

[msentinelb]

Idd dat snap ik maar ik heb alle vermenigvuldig volgorden van mijn huidige matrixen al geprobeerd. Er lijkt dus meer een fout te zitten in mijn berekening. Maar ik kan het niet vinden..

[Schnoop]

Ik heb er niet veel verstand maar als ik me niet vergis
matrix(1, 2, 3, 4, 5, 6)

gelijk aan

1 - 3 - 5
2 - 4 - 6
0 - 0 - 1

en zou om die reden het onderste stuk van je code er in ieder geval zo moeten uitzien:

code:

$("#red")[0].setAttribute( 'transform', 'matrix(' + layer.matrix[ 0 ][ 0 ] + ',' + layer.matrix[ 1 ][ 0 ] + ',' + layer.matrix[ 0 ][ 1 ] + ',' + layer.matrix[ 1 ][ 1 ] + ',' + layer.matrix[ 0 ][ 2 ] + ',' + layer.matrix[ 1 ][ 2 ] + ')' );

Als je vervolgens ook nog eens in de matrix de cos en sin omwisselt kom je al aardig in de buurt.

Maar voor het zelfde geld heb ik hier puur geluk. Ik heb er even 5 min ermee zitten spelen.

[msentinelb]

Held! Dat was idd het probleem hij doet het nu http://jsfiddle.net/6DR3D/2/