Toni e luminosità: HSL e OKLCH

    function setup() {
    createCanvas( 670, 300 );
    noStroke();
}

function draw() {
    let lato = ceil( width / 6 );
    let tonoBase = map( mouseX, 0, width, 360, 0 );
    for (let i=0;  i<6;  i++) {
        let tono = (tonoBase + i*60) % 360;
        colorMode( HSL );
        fill( tono, 100, 50 );
        rect( i*lato, 0, lato, 145 );
        colorMode( OKLCH );
        fill( 65, 60, tono );
        rect( i*lato, 155, lato, 145 );
    }
    if (mouseIsPressed) {
        filter( GRAY );
    }
}
  

  let lato = ceil( width / 6 );

Larghezza dei rettangoli, arrotondata per eccesso con ceil() per evitare dimensioni non intere e l’apparizione di linee divisorie più chiare.

  let tonoBase = map( mouseX, 0, width, 360, 0 );

La posizione orizzontale del mouse sceglie il tono del primo rettangolo. Verso destra il tono diminuisce, quindi i colori scorrono nella stessa direzione del mouse.

  colorMode( HSL );
fill( tono, 100, 50 );

Nella fila in alto i colori HSL, tutti saturi e con la stessa luminosità.

  colorMode( OKLCH );
fill( 65, 60, tono );

Nella fila in basso i colori OKLCH, tutti con la stessa luminosità e la stessa crominanza.

  if (mouseIsPressed) {
    filter( GRAY );
}

Tenendo premuto il tasto del mouse i colori diventano grigi. In HSL i grigi vanno quasi dal bianco al nero, in OKLCH restano quasi uguali.

Provare ad aumentare la crominanza OKLCH (60) fino a 150. Oltre un certo valore, diverso per ogni tono, i colori non diventano più vivaci: lo schermo non può mostrarli, e p5.js li sostituisce con i più vicini, conservando luminosità e tono.