Creazione e uso di una palette predefinita

// height=100 lines=auto
function setup() {
    // definisci la palette
    let palette = [
        color(255,0,0), color(255,255,0),  
        color(0,255,0), color(0,255,255),  
        color(0,0,255), color(255,0,255)   
    ];
    // disegna barre colorate
    noStroke();
    for (let x = 0;  x < width;  x++) {
        let indice = map( x, 0,width, 0,palette.length );
        fill( palette[ int(indice) ] );
        rect( x,0, 5,100 );
    }
}

color(255,0,0)

È una funzione di p5.js che compatta le informazioni cromatiche passate come parametri e le rende utilizzabili direttamente nelle istruzioni di impostazione del colore, ad esempio:

  let bianco = color(255);
  fill( bianco );

let indice = map( x, 0,width, 0,palette.length );

Permette di ottenere la sequenza di tutti gli indici della palette in rapporto alla larghezza del canvas.

fill( palette[ int(indice) ] );

Gli indici degli array devono essere sempre numeri interi.

Aggiungere altri colori alla palette facendo attenzione a non dimenticare le virgole fra un color() e l'altro.

Approfondimenti: