Interessante guida alla programmazione dell'elaborazione per il designer - Controllo del colore: 10 passaggi

2024 Autore: John Day | [email protected]. Ultima modifica: 2024-01-30 10:00

Nei capitoli precedenti, abbiamo parlato di più su come utilizzare il codice per eseguire la modellazione invece dei punti di conoscenza sul colore. In questo capitolo, esploreremo più a fondo questo aspetto della conoscenza.

Passaggio 1: conoscenze di base sul colore

Il colore, per certi aspetti, ha superato l'intuizione umana. I vari bei colori che abbiamo visto a occhio nudo sono in realtà costituiti dagli stessi componenti. Solo con i tre colori chiari di rosso, verde e blu, possiamo creare tutti i colori che possono essere visti dagli occhi umani attraverso la miscela.

Gli schermi dei cellulari e dei computer che vedete attualmente sono creati sulla base di questo principio. Rosso, verde e blu sono chiamati i tre colori originali della luce. Attraverso il rapporto dei tre elementi, possiamo assicurare un certo colore. Questo metodo di descrizione è anche chiamato modalità RGB. Tra questi, il rosso è R, il verde è G e il blu è B.

Fatta eccezione per la modalità RGB, esiste un'altra modalità chiamata modalità CMYK. Di solito è combinato con la stampa. Nella stampa ci sono anche tre colori originali. Tuttavia, è diverso dai tre colori originali della luce. Sono rosso, giallo e blu separatamente. Tra questi, C sta per ciano, M sta per magenta e Y sta per giallo. In teoria, solo con CMY, possiamo mescolare la maggior parte dei colori. Ma a causa della tecnica di produzione della materia prima, difficilmente possiamo far raggiungere il 100% alla saturazione di CMY. Se mescoliamo questi tre colori, non possiamo ottenere un colore nero abbastanza scuro. Quindi c'è una K in più, che è per l'inchiostro da stampa nero, come supplemento della stampa.

Per quanto riguarda RGB e CMYK, devi solo sapere che c'è una differenza più ovvia in natura. RGB è la modalità più colore, che aumenta la luminosità mescolando più colori. Mentre CMYK è meno modalità colore, che aumenta l'oscurità mescolando più colori. Nell'immagine qui sotto, possiamo vedere visivamente le somiglianze e le differenze delle due modalità. L'immagine a sinistra, possiamo immaginare come una casa buia con tre diversi colori di torce accese. Nella foto a destra, possiamo considerarla come una carta da acquerello dopo averla sovrapposta con tre pigmenti di rosso, verde e blu.

Se vuoi conoscere più a fondo le sue relazioni relative tra le diverse modalità di colore, puoi aprire il tuo Photoshop e scegliere il selettore di colori. Quindi puoi vedere i valori del colore di uno stesso colore in diverse modalità di colore in modo intuitivo.

Nell'ultimo, vorremmo introdurre un'altra modalità colore comune per te, HSB. HSB non ha il concetto di "colore originale". È classificato in base ai sentimenti degli occhi umani per i colori. H sta per tonalità, S per saturazione e B per luminosità.

La tonalità rappresenta la tendenza del colore. Ogni colore ha un certo tipo di tendenza cromatica solo se non è nero, bianco o grigio. L'area di transizione del colore più ricca sul selettore colore viene utilizzata per indicare la tonalità. Il suo valore in PS varia da 0 a 360.

Saturazione significa purezza del colore. Una maggiore purezza porta un colore più vivido. Il suo valore in PS varia da 0 a 100.

Per luminosità si intende il grado di luminosità del colore, compreso tra 0 e 100.

Rispetto alla modalità RGB, le tre dimensioni di HSB sono molto più conformi alla sensazione dell'occhio umano per i colori. Basta guardare solo i valori HSB, generalmente puoi immaginare che tipo di colore sia.

Per quanto riguarda lo stesso colore, il valore del colore in modalità RGB è (255, 153, 71), mentre in HSB è (27, 72, 100).

È difficile giudicare come sarà dopo aver mescolato insieme i tre colori originali se guardiamo solo all'RGB. Ma HSB è diverso. Devi solo familiarizzare con le tonalità dei colori come il rosso è 0, l'arancione è 30 e il giallo è 60, quindi saprai che sarà un colore arancione relativamente saturo con alta luminosità e un po' vicino al rosso quando H è 27.

Successivamente, corrisponderemo le tre dimensioni delle due modalità in x, y, x nello spazio e disegneremo un colore cubico per fare il confronto.

RGB e HSB sono solo metodi diversi per descrivere i colori. Possiamo prendere l'indirizzo come una metafora. Supponiamo che se vuoi dire ad altre persone la posizione del palazzo imperiale, puoi dire che è al n. 4 di Jingshan Front Street, nell'area di Dongcheng, a Pechino. Oppure puoi dire che è a 15 secondi, 55 minuti, 39 gradi alla latitudine nord e 26 secondi, 23 minuti, 116 gradi alla longitudine est. Il metodo di descrizione di HSB è simile al primo. Se si conosce la relativa area, generalmente si può conoscere la posizione dell'indirizzo. Anche se RGB può essere più accurato, ma è molto astratto.

La modalità HSB esisteva con lo scopo di aiutarci a descrivere il colore in modo più conveniente. Per visualizzare un certo tipo di colore sullo schermo, dobbiamo prima convertirlo in modalità RGB.

In quanto sopra, introduciamo tre modalità colore: RGB, HSB, CMYK. Nel programma, devi solo concentrarti su due modalità: RGB e HSB. Hanno i loro vantaggi e le loro applicazioni allo stesso tempo. Se lo conosci, soddisferà le tue esigenze più progettuali.

Passaggio 2: tipo di dati per la memorizzazione dei colori

Per mostrare i colori nel programma, per lo più usiamo la modalità RGB in precedenza. Tuttavia, solo controllando le tre proprietà, possiamo visualizzare dei colori? Nel computer è così.

Abbiamo già detto che in Processing, ad eccezione di R, G, B, possiamo designare un alfa (trasparenza) per i colori. Ma l'alfa non appartiene alla componente del colore. La sua esistenza è una comoda miscela con i colori dietro. Quindi, affinché i computer descrivano accuratamente un certo tipo di colore, dobbiamo controllare solo le tre variabili chiave.

Di seguito, iniziamo a introdurre una sorta di tipo di dati Color, che viene utilizzato principalmente per memorizzare i colori. È simile ai tipi di dati indicati in precedenza come boolena, int, float.

Qui, vorrei continuare a spiegare prima l'uso effettivo del colore. Immagina questo: supponiamo che se potessimo utilizzare solo i metodi precedentemente padroneggiati per memorizzare un determinato dato, cosa dovremmo fare?

Esempio di codice (9-1):

[cceN_cpp theme="alba"] int r, g, b;

void setup(){

dimensione (400, 400);

r = 255;

g = 0;

b = 0;

}

disegno vuoto(){

sfondo(0);

rectMode(CENTRO);

riempimento(r, g, b);

rect(larghezza/2, altezza/2, 100, 100);

}

[/cceN_cpp]

Per quanto riguarda i colori con tendenza cromatica, dobbiamo creare tre variabili per memorizzare i dati in tre canali di colore rispettivamente di rosso, verde e blu. Successivamente, se vogliamo invocare questo set di dati di colore, dobbiamo scriverlo in riempimento o tratto.

Ma scoprirai che è troppo problematico farlo perché i dati sono interconnessi. Se hai idea di imballarli in uso, sarà più conveniente. Pertanto, viene creato il colore.

Esempio di codice (9-2):

[cceN_cpp theme="dawn"] color myColor;

void setup(){

dimensione (400, 400);

myColor = color(255, 0, 0);

}

disegno vuoto(){

sfondo(0);

rectMode(CENTRO);

fill(myColor);

rect(larghezza/2, altezza/2, 100, 100);

} [/cceN_cpp]

Lo stesso con i tipi di dati come int, dobbiamo usare "color myColor" all'inizio per creare variabili.

Nella configurazione, usiamo "myColor = color(255, 0, 0)" per assegnare un valore alla variabile myColor. Mentre la funzione color(a, b, c) rappresenta giustamente che questo insieme di dati ha formato un tipo di colore in modo da importare la variabile myColor. Se scrivi "myColor = (255, 0, 0)", il programma andrà male.

Nell'ultimo, usiamo fill() per realizzare l'operazione di color padding. Le funzioni fill() e stroke() sono entrambe abilitate a sovrapporsi. A seconda della quantità e del tipo di parametri, avrà effetti diversi. L'importazione di una sola variabile intera, che la rappresenta, è un colore con solo scala di grigi. Durante l'importazione di un colore variabile, significa che la gamma di colori sarà più ampia. Puoi anche importare una variabile di colore e una variabile intera, cambiare la funzione fill() in quanto sopra in fill(myColor, 150), quindi puoi controllare alpha con il secondo parametro.

Passaggio 3: metodo di riempimento sovrapposto

tratto, lo sfondo ha lo stesso metodo di sovrapposizione con il riempimento.

Leggi il valore del canale del colore

Oltre alle assegnazioni, puoi anche ottenere indipendentemente il valore RGB nella variabile colore

Esempio di codice (9-3):

[cceN_cpp theme="dawn"] color myColor;

void setup(){

myColor = color(255, 125, 0);

println(rosso(mioColore));

println(verde(mioColore));

println(blue(myColor));

}

[/cceN_cpp]

Risultato in console: 255, 125, 0.

La funzione red(), green(), blue() ritornerà relativamente al valore del canale rosso, verde e blu in myColor.

Assegnazione esadecimale

Fatta eccezione per l'utilizzo di numeri decimali per mostrare RGB, possiamo anche usare esadecimale. Decimale significa aumentare 1 quando incontra 10. Mentre esadecimale significa aumentare 1 quando incontra 16. La sua relazione relativa con decimale è: "da 0 a 9" corrispondono a "0 a 9”, “da A a F” corrispondono a “10 a 15”.

L'immagine sotto è l'illustrazione del metodo di conversione.

Ovviamente, se otteniamo un insieme di valori esadecimali come ff7800, non dobbiamo convertirlo manualmente. Il programma assegnerà i valori direttamente alle variabili di colore. È molto conveniente.

Possiamo vedere molte cartelle colori online che adottano il metodo esadecimale per visualizzare il colore.

Come il dribbble della comunità del design, alle opere d'arte verranno allegate tavolozze di colori. Se vedi una colorazione preferita, puoi applicarla al programma.

Esempio di codice (9-4):

[cceN_cpp theme="dawn"] color backColore, coloreA, coloreB, coloreC;

void setup(){

dimensione (400, 400);

rectMode(CENTRO);

noStroke();

backColor = #395b71;

coloreA = #c4d7fb;

coloreB = #f4a7b4;

colorC = #f9e5f0;

}

disegno vuoto(){

sfondo(backColor);

riempimento(coloreA);

rect(200, 200, 90, 300);

riempimento(coloreB);

rect(100, 200, 90, 300);

riempimento(coloreC);

rect(300, 200, 90, 300);

} [/cceN_cpp]

Ora, il colore è molto più confortevole con un effetto migliore rispetto all'immissione di valori casuali.

Aggiungi "#" prima del valore del colore esadecimale, quindi puoi assegnare il valore direttamente al colore variabile.

Passaggio 4: modalità HSB

Oltre alla modalità RGB, parleremo della modalità HSB. Quanto segue mostra il metodo di assegnazione del valore della modalità HSB.

Esempio di codice (9-5):

[cceN_cpp theme="alba"] void setup() {

dimensione (400, 400);

colorMode(HSB);

}

disegno vuoto() {

sfondo(0);

rectMode(CENTRO);

for (int i = 0; i < 20; i++) {

color col = color(i/20.0 * 255, 255, 255);

riempimento(col);

rect(i * 20 + 10, altezza/2, 10, 300);

}

} [/cceN_cpp]

In Processing, per cambiare la modalità HSB, dobbiamo solo aggiungere una frase di colorMode(HSB). L'uso della funzione colorMode() è quello di cambiare la modalità colore. Se scriviamo “HSB” tra parentesi, allora sarà impostato in modalità HSB; mentre scriviamo “RGB”, verrà spostato in modalità RGB.

Ciò che vale la pena prestare attenzione è che quando scriviamo colorMode(HSB), il valore massimo predefinito di HSB è 255. Questo è abbastanza diverso dal valore massimo in Photoshop. In Photoshop, il valore massimo di H è 360, il valore massimo di S e B è 100. Quindi dobbiamo fare la conversione.

Se il valore HSB in Photoshop è (55, 100, 100), quando viene convertito in Elaborazione, questo valore dovrebbe essere (55 / 360 × 255, 255, 255), ovvero (40, 255, 255).

colorMode() è una funzione che può essere sovrapposta. Di seguito ve lo presenteremo in dettaglio.

Passaggio 5: metodo di sovrapposizione di ColorMode

Pertanto, se non si desidera convertire manualmente il valore HSB in Photoshop, è possibile scrivere "colorMode()" in "colorMode(HSB, 360, 100, 100)".

Caso di applicazione della modalità HSB 1

Poiché la modalità RGB non è molto comoda per controllare i cambiamenti di tonalità, in questo momento, se vuoi controllare i colori in modo più flessibile, puoi prendere in considerazione la modalità HSB.

Esempio di codice (9-6):

[cceN_cpp theme="alba"] void setup() {

dimensione (800, 800);

sfondo(0);

colorMode(HSB);

}

disegno vuoto() {

corsaPeso(2);

stroke(int(millis()/1000.0 * 10)%255, 255, 255);

float newX, newY;

newX = mouseX + (rumore(millis()/1000.0 + 1.2) - 0.5) * 800;

nuovaY = mouseY + (rumore(millis()/1000.0) - 0,5) * 800;

line(mouseX, mouseY, newX, newY);

} [/cceN_cpp]

Quando controlliamo H(tonalità) nel tratto, abbiamo usato millis(). Otterrà il tempo di funzionamento dall'inizio al presente. Così, come con il passare del tempo, il valore di H(hue) aumenterà automaticamente, quindi il colore cambierà.

L'unità di millis() è ms. Quindi, quando il programma viene eseguito per 1 secondo, il valore restituito sarà 1000. Questo porterà a un valore troppo grande. Quindi dobbiamo dividerlo per 1000.0.

Perché speriamo che i colori presentino una circolazione periodica, quindi dobbiamo fare un'operazione modulo quando finalmente scriviamo il primo parametro nel tratto. Questo può assicurare che ricomincerà da 0 quando H(hue) ha superato 255.

La funzione strokeWeight() può controllare lo spessore delle linee. L'unità corrispondente per i parametri all'interno della parentesi è pixel.

Passaggio 6: modalità Caso di applicazione 2

Esempio di codice (9-7):

[cceN_cpp theme="alba"] int num; // quantità di linee attualmente tracciate

float posX_A, posY_A; // Coordinata del punto A

float posX_B, posY_B; // Coordinata del punto B

angolo di flottazioneA, velocitàA; // Angolo del punto A, velocità

angolo di flottazioneB, velocitàB; // Angolo del punto B, velocità

float raggioX_A, raggioY_A; // Il raggio dell'ovale formato dal punto A nell'asse X(Y).

float raggioX_B, raggioY_B; // il raggio dell'ovale formato dal punto B nell'asse X(Y).

void setup() {

dimensione (800, 800);

colorMode(HSB);

sfondo(0);

velocitàA = 0,0009;

velocitàB = 0,003;

raggioX_A = 300;

raggioY_A = 200;

raggioX_B = 200;

raggioY_B = 300;

}

disegno vuoto() {

translate(larghezza/2, altezza/2);

for (int i = 0; i < 50; i++) {

angoloA += velocitàA;

angoloB += velocitàB;

posX_A = cos(angoloA) * raggioX_A;

posY_A = sin(angoloA) * raggioY_A;

posX_B = cos(angoloB) * raggioX_B;

posY_B = sin(angoloB) * raggioY_B;

stroke(int(num/500.0) % 255, 255, 255, 10);

riga(posX_A, posY_A, posX_B, posY_B);

numero++;

}

} [/cceN_cpp]

Effetto operazione:

Immagine di uscita:

Il motivo che hai visto è prodotto da una linea in movimento attraverso una sovrapposizione costante. Le tracce dei due punti finali della linea sono due cerchi separati.

Attraverso la modalità HSB, abbiamo controllato i cambiamenti di tonalità. Con l'aumento delle linee, la tonalità si sfalserà. Quando enormi linee semitrasparenti si sovrappongono, creerà una sfumatura di colore molto ricca.

Abbiamo incorporato un ciclo for nella funzione draw con lo scopo di utilizzare il ciclo for per controllare la quantità di linea. È equivalente a che abbiamo controllato la velocità di disegno. Aumentando il valore della condizione di giudizio nel ciclo for, aumenterà il seepd del disegno.

Di seguito la figura schematica. Puoi vedere più chiaramente la traccia del movimento dei cerchi.

Regola velocità e raggio diversi, anche i modelli formati saranno diversi. Prova a cambiare variabili come angolo, velocità, raggioX, raggioY e vedi cosa succederà.

Passaggio 7: modalità di fusione dei livelli

Le varie modalità di colore di cui abbiamo parlato in precedenza sono tutte utilizzate per colorare i componenti della grafica. Tranne per utilizzare questo metodo per controllare il colore, Processing può utilizzare vari metodi di fusione dei livelli come Photoshop.

Apri la finestra dei livelli in PS, fai clic per scegliere la modalità di fusione dei livelli, quindi possiamo vedere queste opzioni.

Queste sono le modalità di livello esistenti in PS. Per dirla semplicemente, la modalità di fusione può essere considerata come una sorta di modalità di calcolo del colore. Deciderà quale colore verrà creato nell'ultimo quando “colore A” più “colore B”. Qui "colore A" indica il colore dietro il livello corrente (chiamato anche colore di base). “colore B” indica il colore del livello corrente (chiamato anche colore misto). Il programma calcolerà per ottenere il colore C in base al valore RGB e alfa del colore A e B. Verrà visualizzato sullo schermo come colore di risultato.

Modalità di livello diversa indica metodi di calcolo diversi. Nella prossima metà di questa serie di articoli, continueremo a spiegarlo in dettaglio. Ora dobbiamo solo conoscere prima il suo utilizzo.

Diamo un'occhiata a un esempio di utilizzo della modalità Aggiungi nel programma.

Esempio di codice (9-8):

[cceN_cpp tema="alba"] PImage image1, image2;

void setup(){

dimensione (800, 400);

image1 = loadImage("1.jpg");

image2 = loadImage("2.jpg");

}

disegno vuoto(){

sfondo(0);

blendMode(AGGIUNGI);

immagine(immagine1, 0, 0, 400, 400);

immagine(immagine2, mouseX, mouseY, 400, 400);

}

[/cceN_cpp]

Risultato:

La funzione blendMode() viene utilizzata per impostare la modalità di fusione della grafica. Compiliamo ADD dietro significa che abbiamo impostato la modalità Aggiungi.

Nel programma non esiste il concetto di strato. Ma poiché esiste una sequenza di disegno dei componenti grafici, quindi quando si fondono le immagini, l'immagine 1 viene considerata come colore di base e l'immagine 2 come colore misto.

La modalità AGGIUNGI appartiene alla “Classe Luminosa”. Dopo averlo utilizzato, otterrai un effetto luminoso.

Di seguito è riportata una modalità di fusione che può essere utilizzata in Elaborazione.

Passaggio 8: elaborazione della modalità di fusione

Possiamo provare a cambiare diverse modalità di fusione per vedere l'effetto.

Quando l'esempio (9-8) ha adottato la modalità di sovrapposizione (lo sfondo deve essere impostato su bianco):

Dopo aver utilizzato la modalità di sottrazione (lo sfondo dovrebbe essere impostato su bianco):

Passaggio 9: caso di applicazione della modalità di fusione dei livelli

La modalità di fusione non può essere utilizzata solo per le immagini, ma è anche adatta a tutti i componenti grafici nella tela. Di seguito è visualizzato un utilizzo della modalità Aggiungi. Può essere utilizzato per analogici vari effetti di luce.

Esempio di codice (9-9):

[cceN_cpp theme="alba"] void setup() {

dimensione (400, 400);

}

disegno vuoto() {

sfondo(0);

blendMode(AGGIUNGI);

int numero = int(3000 * mouseX/400.0);

for(int i = 0;i <num;i++){

if(casuale(1) < 0,5){

riempimento(0, 50, 0);

}altro{

riempire(50);

}

ellisse (casuale (50, larghezza - 50), casuale (50, altezza - 50), 20, 20);

}

}

[/cceN_cpp]

Qui, attraverso la funzione random, abbiamo mescolato il colore verde e il colore bianco, che hanno già portato alfa, nelle particelle. Possiamo usare il mouse per controllare la quantità di cerchio e guardare l'effetto di sovrapposizione.

ADD e SCREEN sono abbastanza simili. Sebbene sia lo stesso per schiarire, ci sono sottili differenze. Puoi sostituirlo con SCREEN e fare un confronto. Dopo essere stati sovrapposti, la purezza e la luminosità di ADD saranno maggiori. È adatto per l'analogia dell'effetto luminoso.

Per quanto riguarda il colore, qui siamo giunti alla fine di questo capitolo. Per questo "linguaggio", hai già imparato abbastanza vocabolari. Ora, sbrigati a usare il codice per goderti il mondo della forma e del colore!

Passaggio 10: fonte

Questo articolo è tratto da:

In caso di domande, è possibile contattare: [email protected].