Ordine delle trasformazioni

L'ordine con cui vengono impostate le trasformazioni può influire molto sul risultato.

// height=100 lines=auto
function setup() {
    background( 200 );

    translate( 50, 50 );    // origine spostata al centro
    rotate( 0.52 );         // rotazione di 30°
    ellipse( 0,0, 50,20 );  // ellisse al centro

    resetMatrix();

    rotate( 0.52 );         // rotazione di 30°
    translate( 50, 50 );    // spostamento sugli assi ruotati
    ellipse( 0,0, 50,20 );  // ellisse in basso a sinistra
}

translate( 50, 50 );    
rotate( 0.52 );

L'origine delle coordinate cartesiane (il punto 0,0) viene spostata prima della rotazione che avverrà quindi attorno alla nuova posizione e non all'angolo in alto a sinistra del canvas.

rotate( 0.52 );
translate( 50, 50 );

Gli assi cartesiani verranno ruotati mantenendo immutata l'origine (che continuerà a trovarsi in alto a sinistra) e la traslazione seguirà l'inclinazione dei nuovi assi.

Provare a modificare i singoli angoli di rotazione per comprendere meglio gli effetti delle diverse combinazioni di trasformazioni.