Oscillazioni sinusoidali con for annidati

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

function draw() {
    background( 220 );
    let angolo = frameCount * 0.01;
    let oscillazione = sin( frameCount * 0.029 );    // da -1 a 1
    let lato = map( oscillazione,  -1, 1,  3, 40 );  // da 3 a 40

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

            angolo += 0.19;
            resetMatrix();
            translate( x,y );
            rotate( angolo );

            square( 0,0, lato );
        }
    }
}
  

  let oscillazione = sin( frameCount * 0.029 );

Valore che oscilla fra -1 e 1 con il passare dei fotogrammi. Viene calcolato prima dei due for, una volta sola per fotogramma.

  let lato = map( oscillazione,  -1, 1,  3, 40 );

Converte l’oscillazione in un lato che va da 3 a 40 pixel. Al massimo il lato supera la distanza fra gli elementi della griglia, e i quadrati si sovrappongono.

  square( 0,0, lato );

Tutti i quadrati dello stesso fotogramma hanno lo stesso lato, che cresce e diminuisce insieme in tutta la griglia.

Provare a cambiare il lato minimo e quello massimo, gli ultimi due parametri di map().

Provare a spostare le righe di oscillazione e lato dentro il secondo for, subito dopo l’incremento di angolo, e a sommare angolo a frameCount * 0.029. Ogni quadrato oscilla allora con uno sfasamento diverso, come succede con la rotazione.