Ghiduri interesante de programare a procesării pentru Designer - Controlul culorilor: 10 pași

2024 Autor: John Day | [email protected]. Modificat ultima dată: 2024-01-30 11:41

În capitolele anterioare, am vorbit mai multe despre modul de utilizare a codului pentru a face modelare în loc de puncte de cunoaștere despre culoare. În acest capitol, vom explora mai profund acest aspect al cunoașterii.

Pasul 1: cunoștințe de bază despre culoare

Culoarea, într-un anumit aspect, a depășit intuiția umană. Diferite culori frumoase pe care le-am văzut cu ochii noștri sunt de fapt alcătuite din aceleași componente. Doar cu cele trei culori deschise de roșu, verde și albastru, putem crea toate culorile care pot fi văzute de ochii umani prin amestec.

Ecranele mobile și computerele pe care le-ați văzut în prezent sunt create pe baza acestui principiu. Roșu, verde și albastru sunt numite cele trei culori originale ale luminii. Prin raportul celor trei elemente, putem asigura o anumită culoare. Această metodă de descriere se mai numește și modul RGB. Printre acestea, roșu este R, verde este G și albastru este B.

Cu excepția modului RGB, există un alt mod numit modul CMYK. De obicei este combinat cu tipărirea. La imprimare, există și trei culori originale. Cu toate acestea, este diferit de cele trei culori originale ale luminii. Sunt roșu, galben și albastru separat. Printre acestea, C este pentru cian, M este pentru magenta, iar Y este pentru galben. Teoretic, doar prin CMY, putem amesteca majoritatea culorilor. Dar, datorită tehnicii de producție a materiei prime, cu greu putem face ca saturația CMY să atingă 100%. Dacă amestecăm aceste trei culori, nu putem obține o culoare neagră suficient de închisă. Deci, există un K suplimentar, care este pentru cerneala de imprimare neagră, ca supliment al imprimării.

În ceea ce privește RGB și CMYK, trebuie doar să știți că există o diferență foarte evidentă în natură. RGB este plus modul de culoare, ceea ce crește luminozitatea prin amestecarea mai multor culori. În timp ce CMYK este minus modul de culoare, ceea ce crește întunericul prin amestecarea mai multor culori. În imaginea de mai jos, putem vedea vizual asemănările și diferențele celor două moduri. Imaginea din stânga, ne putem imagina că este o casă întunecată cu trei culori diferite de lanterne aprinse. Imaginea din dreapta o putem considera ca o hârtie de acuarelă după ce s-au suprapus cu trei pigmenți de roșu, verde și albastru.

Dacă doriți să cunoașteți mai profund relațiile sale relative între diferitele moduri de culoare, vă puteți deschide Photoshop-ul și puteți alege selectorul de culori. Apoi, puteți vedea valorile de culoare ale aceleiași culori sub diferite moduri de culoare intuitiv.

În ultimul moment, am dori să introducem un alt mod de culoare comun pentru dvs., HSB. HSB nu are conceptul de „Culoare originală”. Este clasificat în funcție de sentimentele ochilor umani pentru culori. H înseamnă nuanță, S pentru saturație și B este pentru luminozitate.

Nuanța reprezintă tendința de culoare. Fiecare culoare are un anumit tip de tendință de culoare numai dacă nu este albă, albă sau gri. Cea mai bogată zonă de tranziție a culorilor din selectorul de culori este utilizată pentru a indica nuanța. Valoarea sa în PS variază de la 0 la 360.

Saturația înseamnă puritatea culorii. O puritate mai mare aduce o culoare mai vie. Valoarea sa în PS variază de la 0 la 100.

Luminozitatea înseamnă gradul de lumină al culorii, variind de la 0 la 100.

În comparație cu modul RGB, cele trei dimensiuni ale HSB sunt mult mai conforme cu sentimentul ochilor umani pentru culori. Uitați-vă doar la valorile HSB, în general vă puteți imagina ce fel de culoare este.

În ceea ce privește aceeași culoare, valoarea culorii în modul RGB este (255, 153, 71), în timp ce în HSB este (27, 72, 100).

Este dificil să judecăm cum va arăta după ce amestecăm cele trei culori originale împreună dacă ne uităm doar la RGB. Dar HSB este diferit. Trebuie doar să vă familiarizați cu nuanțele culorilor, cum ar fi roșu 0, portocaliu 30 și galben 60, atunci veți ști că va fi o culoare portocalie relativ saturată, cu luminozitate ridicată și puțin apropiată de roșu atunci când H este 27.

Apoi, vom corespunde cele trei dimensiuni ale celor două moduri în x, y, x în spațiu și vom desena o culoare cubică pentru a face comparație.

RGB și HSB sunt doar metode diferite pentru a descrie culorile. Putem lua adresa ca o metaforă. Să presupunem că, dacă doriți să spuneți altor persoane poziția palatului imperial, puteți spune că se află la nr. 4 din Jingshan Front Street, zona Dongcheng, Beijing. Sau puteți spune că este la 15 secunde, 55 minute, 39 grade la latitudine nordică și 26 secunde, 23 minute, 116 grade la longitudinea estică. Metoda de descriere a HSB este similară cu prima. Dacă sunteți familiarizat cu zona relativă, puteți cunoaște, în general, poziția adresei. Deși RGB poate fi mai precis, dar este foarte abstract.

Modul HSB a existat cu scopul de a ne ajuta să descriem culoarea mai convenabil. Pentru a afișa un anumit tip de culoare pe ecran, trebuie să o convertim mai întâi în modul RGB.

În cele de mai sus, introducem trei moduri de culoare: RGB, HSB, CMYK. În program, trebuie să vă concentrați doar pe două moduri: RGB și HSB. Ei au propriile avantaje și propriile aplicații în același timp. Dacă sunteți familiarizat cu acesta, acesta vă va satisface cele mai multe cerințe de proiectare.

Pasul 2: Tip de date pentru stocarea culorilor

Pentru a afișa culorile în program, în cea mai mare parte folosim modul RGB în versiunea anterioară. Cu toate acestea, numai controlând cele trei proprietăți, putem afișa culori? În computer, este așa.

Am menționat anterior că în Procesare, cu excepția R, G, B, putem desemna un alfa (transparență) pentru culori. Dar alfa nu aparține componentei de culoare. Existența sa este de a amesteca convenabil cu culorile din spate. Prin urmare, pentru ca computerele să descrie cu exactitate un anumit tip de culoare, trebuie să controlăm doar cele trei variabile cheie.

În cele ce urmează, începem să introducem un fel de tip de date Color, care este utilizat în principal pentru stocarea culorilor. Este similar cu tipurile de date menționate anterior, cum ar fi boolena, int, float.

Aici, permiteți-mi să explic mai întâi utilizarea efectivă a culorii. Imaginați-vă acest lucru: să presupunem că dacă putem folosi doar metodele stăpânite anterior pentru a stoca anumite date, ce vom face?

Exemplu de cod (9-1):

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

configurare nulă () {

dimensiune (400, 400);

r = 255;

g = 0;

b = 0;

}

draw nul () {

fundal (0);

rectMode (CENTER);

umplere (r, g, b);

rect (lățime / 2, înălțime / 2, 100, 100);

}

[/cceN_cpp]

În ceea ce privește culorile care au tendința culorilor, trebuie să creăm trei variabile pentru a stoca date în trei canale de culoare roșu, respectiv verde și albastru. Mai târziu, dacă dorim să invocăm acest set de date de culoare, trebuie să îl scriem în umplere sau în linie.

Dar veți găsi că este prea dificil să faceți acest lucru, deoarece datele sunt interconectate. Dacă aveți idee să le împachetați în uz, va fi mai convenabil. Prin urmare, se creează culoarea.

Exemplu de cod (9-2):

[cceN_cpp theme = "dawn"] color myColor;

configurare nulă () {

dimensiune (400, 400);

myColor = culoare (255, 0, 0);

}

draw nul () {

fundal (0);

rectMode (CENTER);

umplere (myColor);

rect (lățime / 2, înălțime / 2, 100, 100);

} [/cceN_cpp]

La fel cu tipurile de date precum int, trebuie să folosim „color myColor“la început pentru a crea variabile.

În configurare, folosim „myColor = color (255, 0, 0)” pentru a atribui valoarea variabilei myColor. În timp ce funcția culoare (a, b, c) reprezintă pe bună dreptate că acest set de date a format un tip de culoare astfel încât să importe variabila myColor. Dacă scrieți „myColor = (255, 0, 0)”, atunci programul nu va merge bine.

În ultimul, folosim fill () pentru a realiza operația de umplere a culorilor. Funcția de umplere () și cursa () permit ambele să se suprapună. În funcție de cantitate și tipul de parametri, acesta va avea efecte diferite. Importarea unei singure variabile întregi, care o reprezintă este o culoare numai în tonuri de gri. În timp ce importați o culoare variabilă, înseamnă că gama de culori va fi mai mare. De asemenea, puteți importa o variabilă de culoare și o variabilă întreagă, puteți modifica funcția fill () din cele de mai sus în fill (myColor, 150), apoi puteți controla alfa cu al doilea parametru.

Pasul 3: Metoda de umplere suprapusă

accident vascular cerebral, fundalul au aceeași metodă de suprapunere cu umplere.

Citiți valoarea culorii canalului

În plus față de atribuiri, puteți obține, de asemenea, în mod independent, valoarea RGB în variabila de culoare

Exemplu de cod (9-3):

[cceN_cpp theme = "dawn"] color myColor;

configurare nulă () {

myColor = culoare (255, 125, 0);

println (roșu (myColor));

println (verde (myColor));

println (albastru (myColor));

}

[/cceN_cpp]

Rezultat în consolă: 255, 125, 0.

Funcția roșu (), verde (), albastru () va reveni relativ la valoarea canalului roșu, verde și albastru din myColor.

Atribuire hexazecimală

Cu excepția utilizării numerelor zecimale pentru a afișa RGB, putem folosi și hexazecimal. Zecimală înseamnă creșterea 1 când se întâlnește 10. În timp ce hexazecimală înseamnă creșterea 1 când se întâlnește 16. Relația sa relativă cu zecimalul este: „0 la 9” corespund cu „0 la 9”,„ A la F”corespund„ 10 la 15”.

Imaginea de mai jos este ilustrarea metodei de conversie.

Desigur, dacă obținem un set de valori hexazecimale precum ff7800, nu trebuie să îl convertim manual. Programul va atribui valori variabilelor de culoare direct. Este foarte convenabil.

Putem vedea multe cărți color online, toate adoptând metoda hexazecimală pentru a afișa culoarea.

Ca și driblingul comunității de design, lucrărilor de artă li se vor atașa palete de culori. Dacă vedeți o culoare preferată, o puteți aplica la program.

Exemplu de cod (9-4):

[cceN_cpp theme = "dawn"] color backColor, colorA, colorB, colorC;

configurare nulă () {

dimensiune (400, 400);

rectMode (CENTER);

noStroke ();

backColor = # 395b71;

colorA = # c4d7fb;

culoareB = # f4a7b4;

colorC = # f9e5f0;

}

draw nul () {

fundal (backColor);

umplere (culoareA);

rect (200, 200, 90, 300);

umplere (culoareB);

rect (100, 200, 90, 300);

umplere (colorC);

rect (300, 200, 90, 300);

} [/cceN_cpp]

Acum, culoarea este mult mai confortabilă, cu un efect mai bun decât introducerea valorilor la întâmplare.

Adăugați „#” înainte de valoarea hexadecimală a culorii, apoi puteți atribui direct valoarea culorii variabile.

Pasul 4: Mod HSB

Pe lângă modul RGB, în continuare vom vorbi despre modul HSB. Următorul arată metoda de atribuire a valorii modului HSB.

Exemplu de cod (9-5):

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

dimensiune (400, 400);

colorMode (HSB);

}

draw nul () {

fundal (0);

rectMode (CENTER);

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

color col = color (i / 20,0 * 255, 255, 255);

umplere (col);

rect (i * 20 + 10, înălțime / 2, 10, 300);

}

} [/cceN_cpp]

În Procesare, pentru a comuta modul HSB, trebuie doar să adăugăm o propoziție colorMode (HSB). Utilizarea funcției colorMode () este schimbarea modului de culoare. Dacă scriem „HSB” în paranteză, atunci acesta va fi setat la modul HSB; în timp ce scriem „RGB”, acesta va fi mutat în modul RGB.

Ceea ce merită să acordăm atenție este atunci când scriem colorMode (HSB), valoarea maximă implicită a HSB este 255. Acest lucru este destul de diferit de valoarea maximă din Photoshop. În Photoshop, valoarea maximă a lui H este 360, valoarea maximă a lui S și B sunt 100. Deci, trebuie să facem conversia.

Dacă valoarea HSB din Photoshop este (55, 100, 100), atunci când este convertită la Procesare, această valoare ar trebui să fie (55/360 × 255, 255, 255), adică (40, 255, 255).

colorMode () este o funcție care poate fi suprapusă. În cele ce urmează, vă vom prezenta în detaliu.

Pasul 5: Metoda de suprapunere a ColorMode

Prin urmare, dacă nu doriți să convertiți manual valoarea HSB în Photoshop, puteți scrie „colorMode ()” în „colorMode (HSB, 360, 100, 100)”.

Aplicație în modul HSB Caz 1

Deoarece modul RGB nu este destul de convenabil pentru a controla schimbările de nuanță, în acest moment, dacă doriți să controlați culorile mai flexibil, puteți lua în considerare modul HSB.

Exemplu de cod (9-6):

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

dimensiune (800, 800);

fundal (0);

colorMode (HSB);

}

draw nul () {

greutate accident vascular cerebral (2);

accident vascular cerebral (int (milis () / 1000,0 * 10)% 255, 255, 255);

float newX, newY;

newX = mouseX + (noise (milis () / 1000,0 + 1,2) - 0,5) * 800;

newY = mouseY + (noise (milis () / 1000.0) - 0.5) * 800;

linie (mouseX, mouseY, newX, newY);

} [/cceN_cpp]

Când controlăm H (nuanțe) în accident vascular cerebral, am folosit milis (). Acesta va obține timpul de funcționare de la început până în prezent. Astfel, ca și în cazul timpului care avansează, valoarea lui H (nuanță) va crește automat, apoi se schimbă culoarea.

Unitatea de milis () este ms. Deci, atunci când programul rulează 1 secundă, valoarea returnată va fi 1000. Aceasta va duce la o valoare prea mare. Deci, trebuie să îl împărțim la 1000.0.

Pentru că sperăm că culorile vor prezenta o circulație periodică, așa că trebuie să facem operația modulo atunci când scriem în sfârșit primul parametru în linie. Acest lucru vă poate asigura că va începe din nou de la 0 când H (nuanță) a depășit 255.

Funcția strokeWeight () poate controla grosimea liniilor. Unitatea corespunzătoare pentru parametrii din paranteză este pixelul.

Pasul 6: Modul de aplicare caz 2

Exemplu de cod (9-7):

[cceN_cpp theme = "dawn"] int num; // cantitatea de linii trasate în prezent

plutitor posX_A, posY_A; // Coordonata punctului A

plutitor posX_B, posY_B; // Coordonata punctului B

float angleA, speedA; // Unghiul punctului A, viteza

unghi de plutire B, viteza B; // Unghiul punctului B, viteza

float radiusX_A, radiusY_A; // Raza ovalului format de punctul A în axa X (Y).

float radiusX_B, radiusY_B; // raza ovalului format de punctul B în axa X (Y).

configurare nulă () {

dimensiune (800, 800);

colorMode (HSB);

fundal (0);

viteza A = 0,0009;

viteza B = 0,003;

raza X_A = 300;

raza Y_A = 200;

raza X_B = 200;

raza Y_B = 300;

}

draw nul () {

traducere (lățime / 2, înălțime / 2);

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

unghiulA + = vitezaA;

unghiul B + = viteza B;

posX_A = cos (angleA) * radiusX_A;

posY_A = sin (angleA) * radiusY_A;

posX_B = cos (angleB) * radiusX_B;

posY_B = sin (unghiulB) * raza Y_B;

accident vascular cerebral (int (num / 500,0)% 255, 255, 255, 10);

linie (posX_A, posY_A, posX_B, posY_B);

num ++;

}

} [/cceN_cpp]

Efect de operare:

Imagine de ieșire:

Modelul pe care l-ați văzut este produs de o linie de mișcare prin suprapunere constantă. Urmele celor două puncte finale ale liniei sunt două cercuri separate.

Prin modul HSB, am controlat schimbările de nuanță. Odată cu creșterea liniilor, nuanța se va compensa. Atunci când liniile masive semitransparente se suprapun, se va crea un gradient de culoare foarte bogat.

Am încorporat o buclă for în extragerea funcțională cu scopul de a folosi bucla pentru a controla cantitatea de linie. Este echivalent cu faptul că am controlat viteza de desen. Creșterea valorii condiției de judecată în bucla for, va crește filtrarea desenului.

Mai jos este figura schematică. Puteți vedea mai clar urmele mișcării cercurilor.

Reglați viteza și raza diferite, și modelele formate vor fi diferite. Încercați să modificați variabile precum unghiul, viteza, raza X, raza Y și vedeți ce se va întâmpla.

Pasul 7: Modul de amestecare a straturilor

Diferitele moduri de culoare despre care am vorbit anterior sunt toate utilizate pentru a colora componentele grafice. Cu excepția utilizării acestei metode pentru a controla culoarea, Procesarea poate utiliza moduri de amestecare a diferitelor straturi, cum ar fi Photoshop.

Deschideți fereastra stratului în PS, faceți clic pentru a alege modul de amestecare a straturilor, apoi putem vedea aceste opțiuni.

Acestea sunt moduri de strat existente în PS. Pentru a o spune simplu, modul de amestecare poate fi privit ca un fel de mod de calcul al culorii. Acesta va decide ce culoare va fi creată în ultima dată când „culoarea A” plus „culoarea B”. Aici „culoarea A” înseamnă culoarea din spatele stratului curent (numită și culoare de bază). „Culoare B” înseamnă culoarea stratului curent (numită și culoare mixtă). Programul va calcula pentru a obține culoarea C în funcție de valoarea RGB și alfa a culorilor A și B. Va fi afișat pe ecran ca rezultat al culorii.

Modul strat diferit reprezintă diferite metode de calcul. În următoarea jumătate a acestei serii de articole, vom explica mai detaliat. Acum trebuie doar să știm mai întâi utilizarea acestuia.

Să vedem un exemplu de utilizare a modului Adăugare în program.

Exemplu de cod (9-8):

[cceN_cpp theme = "dawn"] PImage image1, image2;

configurare nulă () {

dimensiune (800, 400);

image1 = loadImage ("1.jpg");

image2 = loadImage ("2.jpg");

}

draw nul () {

fundal (0);

blendMode (ADD);

imagine (imagine1, 0, 0, 400, 400);

imagine (imagine2, mouseX, mouseY, 400, 400);

}

[/cceN_cpp]

Rezultat:

Funcția blendMode () este utilizată pentru a seta modul de amestecare al graficelor. Completăm ADD în spatele mijloacelor pe care le-am setat Add Mode.

În program, nu există un concept de strat. Dar, deoarece există secvența de desenare a componentelor grafice, astfel, atunci când amestecați imagini, imaginea 1 este considerată culoare de bază și imaginea 2 ca culoare mixtă.

Modul ADD aparține „Brighten Class”. După ce îl utilizați, veți obține un efect luminat.

Mai jos este un mod de amestecare care poate fi utilizat în Procesare.

Pasul 8: Procesarea modului de amestecare

Putem încerca să schimbăm diferite moduri de amestecare pentru a vedea efectul.

Când exemplul (9-8) a adoptat modul de suprapunere (fundalul ar trebui să fie setat la alb):

După ce utilizați Modul de scădere (fundalul trebuie setat la alb):

Pasul 9: Cazul aplicației pentru modul de amestecare a stratului

Modul de amestecare nu poate fi folosit doar pentru imagini, ci și potrivit pentru toate componentele grafice din pânză. Mai jos a fost afișată o utilizare despre modul Adăugare. Poate fi folosit pentru a analiza diferite efecte de iluminare.

Exemplu de cod (9-9):

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

dimensiune (400, 400);

}

draw nul () {

fundal (0);

blendMode (ADD);

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

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

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

umplere (0, 50, 0);

} altceva {

umplutură (50);

}

elipsă (aleatorie (50, lățime - 50), aleatorie (50, înălțime - 50), 20, 20);

}

}

[/cceN_cpp]

Aici, prin funcția aleatorie, am amestecat culoarea verde și culoarea albă, care au transportat deja alfa, în particule. Putem folosi mouse-ul pentru a controla cantitatea de cerc și pentru a urmări efectul suprapus.

ADD și SCREEN sunt destul de similare. Deși este același lucru pentru a lumina, există diferențe subtile. Puteți să-l înlocuiți cu SCREEN și să faceți comparație. După suprapunere, puritatea și luminozitatea ADD vor fi mai mari. Este potrivit pentru analogul efectului de iluminare.

În ceea ce privește culoarea, aici am ajuns la sfârșitul acestui capitol. Pentru această „limbă”, ați stăpânit deja destule vacabulare. Acum, grăbește-te să folosești codul pentru a te bucura de lumea formelor și culorilor!

Pasul 10: Sursă

Acest articol provine de la:

Dacă aveți întrebări, puteți contacta ： [email protected].