Sfumature in HSL e OKLCH

    function setup() {
    createCanvas( 670, 130 );
    noStroke();

    colorMode( HSL );
    let bluHSL = color( 221, 36, 44 );
    let gialloHSL = color( 52, 69, 76 );
    colorMode( OKLCH );
    let bluOKLCH = color( 50, 35, 264 );
    let gialloOKLCH = color( 90, 35, 100 );

    for (let x=0;  x<width;  x++) {
        let t = x / width;
        fill( lerpColor( bluHSL, gialloHSL, t ) );
        rect( x, 0, 1, 60 );
        fill( lerpColor( bluOKLCH, gialloOKLCH, t ) );
        rect( x, 70, 1, 60 );
    }
}

Lo stesso blu e lo stesso giallo nelle due file, definiti con i valori di ciascun modello.

lerpColor() restituisce il colore intermedio indicato da t, che va da 0 a 1 lungo la larghezza del canvas. In p5.js 2 l’interpolazione avviene nel modello in cui i due colori sono stati definiti.

Interpolati in RGB, i due colori, quasi complementari, passerebbero per il grigio. In HSL e in OKLCH il tono gira invece nel cerchio cromatico: in HSL l’azzurro e il verde diventano subito molto più chiari del blu di partenza, in OKLCH luminosità e crominanza cambiano in modo regolare.

Provare ad aumentare la crominanza dei due colori OKLCH (35) fino a 60: i colori intermedi diventano troppo vivaci per lo schermo, e la sfumatura presenta dei salti.

 

In p5.js 1 lerpColor() interpola invece nel modello attivo al momento della chiamata, e il modello OKLCH non esiste.

Approfondimenti: