Rotation Matrix sul punto arbitrario

Question

Per impostazione predefinita, la matrice di rotazione utilizza il punto di origine come centro della rotazione. Per ruotare attorno a un punto arbitrario, devi sottrarre la distanza all'origine usando una matrice di traslazione, fai la rotazione e poi traduci. Tranne che questo non sembra funzionare così bene per me. Ho il seguente codice (assumere il mio oggetto è 100x100 con un centro a 50,50):

t = IDENTITY; 
t = translate(t, -50, -50); 
t = rotate(t, theta); 
t = translate(t, 50, 50); 

Purtroppo, se si applica questa trasformazione matrice t al mio oggetto, l'oggetto è posizionato correttamente.

Ho implementato un rapido jsfiddle per dimostrare il mio problema: http://jsfiddle.net/9M3uy/67/

Nel JSFiddle, il rosso ruotato piazza è dove la rotazione dovrebbe essere finito (per gentile concessione di costruzione trasformare origine di CSS3), e il il quadrato blu ruotato è dove finisce il mio calcolo (il verde sarebbe stato il quadrato originale non ruotato).

Qualche idea? Sto solo non capendo come tradurre, ruotare, tradurre i lavori meccanici o sto facendo qualcosa di terribilmente sbagliato?

Answer 1

Ci sono due problemi nel codice:

1. La matrice moltiplicazioni sono fatte in ordine inverso di quello che probabilmente si intende. Sembra che tu intenda rotate(t, theta) restituire una matrice che si applica a t seguita da una rotazione, ma in realtà è l'opposto - la rotazione verrà applicata prima dello t. È necessario invertire l'ordine dei parametri nelle chiamate a matrixMultiply in rotate e translate.

2. I parametri della funzione CSS matrix sono nell'ordine sbagliato. Dovrebbe essere a11, a21, a12, a22, a13, a23. Quello che stai passando è a11, a12, a21, a22, a13, a23.

Ecco lo fixed version.

Answer 2

Provare a implementare prima la moltiplicazione di matrice 3x3 "standard" per i casi 2d e solo dopo aver tentato di ottimizzare gli elementi, che risultano moltiplicando per zero. È un po 'difficile vedere se le formule sono corrette, quando lo schema di indicizzazione è troppo poco ortodosso.

La matrice di rotazione = [c -s 0; s c 0; 0 0 1]; La matrice di traduzione = [1 0 x; 0 1 y; 0 0 1];

Devo supporre che la funzione di traduzione css assuma anche il risultato 3x3.

Sia la moltiplicazione che la rotazione vengono eseguite moltiplicando i vettori (x, y, 1) per la matrice corrispondente.

EDIT: Dopo giocherellare un po ', sembra che sia la matrice m dovrebbe essere tradotto, o gli operatori potrebbe essere definito come return MatMul([rot matrix],m) and return MatMul([trans matrix],m)

EDIT2: Ora posso vedere qualcosa di strano: traducendo solo da + -50, + -50 e ruotando di ~ 10 gradi, l'angolo non rimane nel mezzo del quadrato rosso. Ma non capisco comunque il formato della matrice CSS. Siamo spiacenti ...