Trasformazioni animate con for annidati

    function setup() {
    createCanvas( 670, 300 );
    rectMode( CENTER );
}

function draw() {
    background( 220 );
    let angolo = frameCount * 0.01;  // inizio diverso a ogni fotogramma

    for (let y=0;  y<=height;  y+=20) {
        for (let x=5;  x<=width;  x+=20) {

            angolo += 0.0027;        // incremento progressivo
            resetMatrix();
            translate( x,y );
            rotate( angolo );

            square( 0,0, 20 );
        }
    }
}
  

  background( 220 );

Copre il fotogramma precedente prima di disegnare il nuovo.

  let angolo = frameCount * 0.01;

Valore di partenza che cambia progressivamente a ogni fotogramma. La rotazione di tutti gli elementi della griglia avanza con il tempo.

  angolo += 0.0027;

Incremento che cambia a ogni elemento. Ogni quadrato è ruotato un po’ più del precedente, e lo sfasamento fra gli elementi resta lo stesso durante il movimento.

Provare a modificare separatamente i due valori, 0.01 e 0.0027, per distinguere la velocità del movimento dallo sfasamento fra gli elementi.