Rotazione della palette

    let palette = [];

function setup() {
    createCanvas( 300, 300 );
    colorMode( HSL );
    rectMode( CENTER );
    noStroke();
    for (let n=0;  n<20;  n++) {
        palette[n] = color( n*18, 80, 55 );  // venti toni
    }
}

function draw() {
    if (frameCount % 8 == 0) {
        // il primo colore passa in fondo all'array
        palette.push( palette.shift() );
    }
    for (let i=0;  i<20;  i++) {
        fill( palette[i] );
        square( 150, 150, 300 - i*15 );
    }
}

Una volta ogni 8 fotogrammi, quando il resto della divisione di frameCount per 8 è zero.

Il metodo shift() toglie il primo colore dall’array e lo restituisce, push() lo aggiunge in fondo. Gli altri colori scalano di una posizione, e i quadrati, che restano fermi, prendono a ogni passo il colore di quello che contengono: i colori scorrono verso l’esterno.

Procedimento del color cycling, usato nei videogiochi con grafica a 256 colori: l’immagine resta ferma, e a muoversi sono i colori della palette.

Provare a cambiare la velocità, sostituendo 8 con 3 o con 30.

Provare con una palette di luminosità invece che di toni: palette[n] = color( 210, 80, 10 + n*4 );.

Per far scorrere i colori verso il centro, togliere l’ultimo colore con pop() e rimetterlo all’inizio con unshift(): palette.unshift( palette.pop() );.

 

I metodi pop() e push() degli array di JavaScript, che si scrivono dopo il nome dell’array, non hanno niente a che fare con le funzioni push() e pop() di p5.js, che aprono e chiudono le trasformazioni temporanee.

Approfondimenti: