Contrasto simultaneo

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

function draw() {
    fill( 230, 100, 25 );  // sfondo freddo e scuro
    rect( 0, 0, 335, 300 );
    fill( 50, 100, 65 );   // sfondo caldo e chiaro
    rect( 335, 0, 335, 300 );

    fill( 0, 0, 50 );      // lo stesso grigio nei due quadrati
    square( 138, 120, 60 );
    square( 473, 120, 60 );
    if (mouseIsPressed) {
        rect( 168, 142, 335, 16 );  // striscia che unisce i quadrati
    }
}
  

  fill( 0, 0, 50 );
square( 138, 120, 60 );
square( 473, 120, 60 );

I due quadrati hanno lo stesso grigio, ma sullo sfondo blu scuro sembra più chiaro e più caldo, su quello giallo più scuro e più freddo.

  if (mouseIsPressed) {
    rect( 168, 142, 335, 16 );
}

Tenendo premuto il tasto del mouse compare una striscia dello stesso grigio che unisce i due quadrati, e la differenza si riduce.

Fenomeno per cui un colore cambia aspetto secondo i colori che lo circondano: tende a staccarsi dallo sfondo in luminosità e a spostarsi verso il complementare dello sfondo. Josef Albers lo ha studiato con i suoi studenti e lo ha documentato in Interaction of Color (1963), con esercizi in cui un colore sembra due colori diversi, o due colori diversi sembrano uguali.

Provare a dare ai quadrati un tono e una saturazione bassa, ad esempio con fill( 30, 10, 50 ): anche un colore appena caldo cambia aspetto sui due sfondi.

Provare a scambiare i colori dei due sfondi, oppure a usare due sfondi con la stessa luminosità e toni diversi.