Creazione e uso di palette con gradienti

// height=100 lines=auto
function setup() {
    colorMode( HSL, 360,100,100 );
    // crea la palette di 20 gradazioni
    let palette = [];
    for (let n = 0;  n < 20;  n++) {
        palette[n] = color( 30, 100, n*5 );
    }
    // disegna barre colorate
    noStroke();
    for (let x = 0;  x < width;  x += 5) {
        let indice = map( x, 0,width, 0,palette.length );
        fill( palette[ int(indice) ] );
        rect( x,0, 5,100 );
    }
}

colorMode( HSL, 360,100,100 );

Uso della modalità cromatica HSL per rendere più semplice la variazione di luminosità di un determinato colore.

palette[n] = color( 30, 100, n*5 );

Colore sempre arancione (30), al massimo della saturazione (100) e con un valore di luminosità variabile da 0 (0*5) a 95 (19*5).

Intervenire sui parametri della funzione color() usando la variabile n per ottenere un gradiente con luminosità media fissa e variazione della saturazione: .

I valori massimi indicati nell'istruzione colorMode() sono già quelli di default per questa modalità. Si potrebbe quindi scrivere semplicemente colorMode(HSL) ma si è preferito ricordare quali sono i valori massimi di tono, saturazione e luminosità.