Vai al contenuto

📣 sulla piattaforma e-learning di Codice Inutile sono disponibili i miei corsi: Introduzione alla programmazione e 🆕 Introduzione all'Arte Generativa

Creare delle palette di colori che stanno bene insieme in modo casuale

📬 Per rimanere aggiornato sui prossimi articoli e su altri contenuti di creative coding, puoi iscriverti a questa newsletter. Per farlo è sufficiente inserire il tuo indirizzo e-mail nel campo qui sotto.

Puoi leggere l'archivio qui. Powered by TinyLetter

Un paio di giorni fa su Twitter ho seguito un piccolo thread partito da Vegard Myklebust che spiegava come creare delle palette di colori che funzionano bene insieme in modo del tutto casuale.

Il sistema è davvero semplice e, dopo aver fatto qualche esperimento, posso dire che funziona ottimamente. Ho pensato che potesse valere la pena di realizzare un piccolo programma in Processing per generare palette di colori al bisogno.

Il thread originale su Twitter

Regole per creare una palette

Queste sono le regole da seguire per creare la palette di colori:

  1. Non lavorare in uno spazio colore RGB (red, green and blue), meno intuitivo per le persone, ma in HSB (hue, saturation and brightness).
  2. La chiave di tutto sta nel valore di hue, ovvero la scelta del colore. Se consideriamo i valori possibili di hue su una circonferenza i suoi valori andranno da 0 a 360.
    Scegliamone un valore in modo del tutto casuale.
  3. Scegliere in modo del tutto casuale anche i valori di saturation e brightness.
  4. Ora abbiamo ottenuto il nostro primo colore, quello posizionato al centro della palette.
  5. Scegliamo un altro valore numerico in modo del tutto casuale. Il sistema funziona al meglio se questo nuovo valore è compreso tra 0 e 180. Sommiamo e sottraiamo questo valore al valore di hue scelto precedentemente.
  6. In questo modo abbiamo ottenuto i due colori da posizionare accanto a quello centrale.
  7. Ripetiamo l’operazione al punto 5 sommando e sottraendo nuovamente il valore scelto in quel punto a entrambi i colori ottenuti precedentemente.
  8. Per ottenere i risultati migliori, assegnare in modo casuale saturation e brightness a tutti i colori.

Il programma in Processing

/*
 * Create a palette of 5 random colours with a techniques explained
 * here https://twitter.com/usefulslug/status/1265604318016811011
 *
 * Sketch made by Federico Pepe
 * http://www.federicopepe.com
 * 27.05.2020
 *
*/

color palette[] = new color[5];

void setup() {
  size(540, 540);
  
  colorMode(HSB, 360, 100, 100);
  
  noStroke();
  
  createPalette();
  drawPalette();
}

void draw() {
}

void mousePressed() {
  background(0);
  createPalette();
  drawPalette();
}

void keyPressed() {
  if(key == 's') {
    saveFrame("######-palette.png");
  }
}

void createPalette() {
  int hue = round(random(360));
  int r1  = round(random(180));
  palette[0] = color(hue - (r1*2), round(random(100)), round(random(100)));
  palette[1] = color(hue - r1, round(random(100)), round(random(100)));
  palette[2] = color(hue, round(random(100)), round(random(100)));
  palette[3] = color(hue + r1, round(random(100)), round(random(100)));
  palette[4] = color(hue + (r1*2), round(random(100)), round(random(100)));
  
  println("#" + hex(palette[0], 6), 
    "#" + hex(palette[1], 6), 
    "#" + hex(palette[2], 6), 
    "#" + hex(palette[3], 6), 
    "#" + hex(palette[4], 6));
  
}

void drawPalette() {
  fill(palette[0]);
  rect(0, 0, width/5, height);
  fill(palette[1]);
  rect(width/5, 0, width/5, height);
  fill(palette[2]);
  rect(width/5*2, 0, width/5, height);
  fill(palette[3]);
  rect(width/5*3, 0, width/5, height);
  fill(palette[4]);
  rect(width/5*4, 0, width/5, height);
}

Il programma è molto semplice: ho creato due funzioni personalizzate createPalette() e drawPalette() per gestire al meglio la creazione e la rappresentazione a schermo delle palette.

I colori vengono salvati in un array nominato palette per comodità.

Ad ogni click del mouse viene generata una nuova palette mentre, premendo il tasto s sulla tastiera, viene salvata un’immagine nella cartella del programma.

In console è possibile vedere i valori esadecimali dei colori ottenuti richiamando la funzione hex() sui dati di tipo color all’interno dell’array.

Ecco qualche esempio:

Articolo precedente

Spleeter: Isolare la parte vocale in un brano

Articolo successivo

Le strutture dei brani vincitori di Sanremo dal 1995 al 2020

Unisciti alla discussione

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.