Palette procedurali con il coseno

    function setup() {
    createCanvas( 670, 150 );
    strokeWeight( 2 );
    for (let x = 0;  x < width;  x++) {
        let t = x / width;
        stroke( onda( t, 1, 0 ), onda( t, 1, 0.33 ), onda( t, 1, 0.67 ) );
        line( x, 0, x, height );
    }
}

function onda( t, frequenza, fase ) {
    return cos( TWO_PI * (frequenza * t + fase) ) * 127.5 + 127.5;
}

La posizione orizzontale diventa un valore da 0 a 1, che fa da indice della palette.

Mentre t va da 0 a 1 il coseno compie un numero di cicli pari a frequenza, e fase, da 0 a 1, sposta il punto del ciclo da cui si parte. Moltiplicato per 127.5 e sommato a 127.5, il coseno passa da -1 e 1 a 0 e 255, i valori di un canale.

Rosso, verde e blu oscillano con la stessa frequenza, sfasati di un terzo di ciclo: i loro massimi si alternano, e la palette passa per tutti i toni.

Con fasi vicine, onda( t, 1, 0 ), onda( t, 1, 0.1 ), onda( t, 1, 0.2 ), la palette diventa più sobria, dal beige al blu.

Con frequenze diverse per i tre canali, ad esempio 1, 2 e 3, i massimi dei canali si incontrano e si separano più volte, come in un’interferenza.

Nella formula di Inigo Quilez anche il valore centrale e l’ampiezza cambiano da un canale all’altro: qui sono uguali, 127.5, perché ogni canale oscilli fra 0 e 255.

Con lo spessore predefinito, 1 pixel, ogni linea è centrata sul bordo fra due pixel e li copre a metà: sugli schermi a densità normale le gradazioni restano semitrasparenti. Con strokeWeight( 2 ) coprono la tela per intero.

Approfondimenti: