Interesantas apstrādes programmēšanas vadlīnijas dizainerim-krāsu kontrole: 10 soļi

2024 Autors: John Day | [email protected]. Pēdējoreiz modificēts: 2024-01-30 10:52

Iepriekšējās nodaļās mēs esam vairāk runājuši par to, kā izmantot kodu veidošanai, nevis zināšanu punktiem par krāsu. Šajā nodaļā mēs padziļināti izpētīsim šo zināšanu aspektu.

1. solis: pamatzināšanas par krāsu

Krāsa noteiktā aspektā ir pārspējusi cilvēka intuīciju. Dažādas skaistas krāsas, kuras mēs redzējām ar neapbruņotu aci, patiesībā sastāvēja no tām pašām sastāvdaļām. Tikai ar trim gaišām krāsām - sarkanu, zaļu un zilu - mēs varam izveidot visas krāsas, kuras var redzēt cilvēka acis, sajaucoties.

Mobilo ierīču ekrāni un datoru ekrāni, kurus pašlaik redzat, tiek veidoti, pamatojoties uz šo principu. Sarkanu, zaļu un zilu sauc par trim oriģinālām gaismas krāsām. Izmantojot trīs elementu attiecību, mēs varam nodrošināt noteiktu krāsu. Šo apraksta metodi sauc arī par RGB režīmu. Starp tiem sarkans ir R, zaļš ir G un zils ir B.

Izņemot RGB režīmu, ir vēl viens režīms, ko sauc par CMYK režīmu. To parasti apvieno ar drukāšanu. Drukāšanā ir arī trīs oriģinālas krāsas. Tomēr tas atšķiras no trim oriģinālajām gaismas krāsām. Tās ir sarkanas, dzeltenas un zilas atsevišķi. Starp tiem C ir ciāna krāsa, M ir fuksīna krāsa un Y ir dzeltens. Teorētiski tikai ar CMY palīdzību mēs varam sajaukt lielāko daļu krāsu. Bet izejvielu ražošanas tehnikas dēļ mēs diez vai varam panākt, ka CMY piesātinājums sasniedz 100%. Ja mēs sajaucam šīs trīs krāsas, mēs nevaram iegūt pietiekami tumšu krāsu. Tātad, kā papildinājums drukāšanai ir papildu K, kas paredzēts melnajai drukas tintei.

Runājot par RGB un CMYK, jums tikai jāzina, ka dabā ir visredzamākā atšķirība. RGB ir plus krāsu režīms, kas palielina spilgtumu, sajaucot vairāk krāsu. Kamēr CMYK ir mīnus krāsu režīms, kas palielina tumsu, sajaucot vairāk krāsu. Tālāk redzamajā attēlā mēs vizuāli varam redzēt abu režīmu līdzības un atšķirības. Kreisajā attēlā mēs varam iedomāties tumšu māju, kurā ir ieslēgtas trīs dažādu krāsu lukturīši. Attēlu labajā pusē mēs varam uzskatīt par akvareļa papīru pēc pārklāšanās ar trim sarkanā, zaļā un zilā krāsā esošajiem pigmentiem.

Ja vēlaties dziļāk uzzināt tā relatīvo saistību starp dažādiem krāsu režīmiem, varat atvērt savu Photoshop un izvēlēties krāsu atlasītāju. Tad jūs varat intuitīvi redzēt vienas krāsas krāsu vērtības dažādos krāsu režīmos.

Visbeidzot, mēs vēlētos ieviest jums vēl vienu parastu krāsu režīmu - HSB. HSB nav jēdziena “oriģinālā krāsa”. Tas ir klasificēts atbilstoši cilvēka acu sajūtām par krāsām. H apzīmē nokrāsu, S - piesātinājumu un B - spilgtumu.

Hue attēlo krāsu tendenci. Katrai krāsai ir noteikta krāsu tendence tikai tad, ja tā nav balta, balta vai pelēka. Krāsu atlasītāja visbagātākā krāsu pārejas zona tiek izmantota, lai norādītu nokrāsu. Tā vērtība PS svārstās no 0 līdz 360.

Piesātinājums nozīmē krāsas tīrību. Augstāka tīrība rada spilgtākas krāsas. Tās vērtība PS svārstās no 0 līdz 100.

Spilgtums nozīmē krāsas gaišuma pakāpi, kas svārstās no 0 līdz 100.

Salīdzinot ar RGB režīmu, trīs HSB izmēri daudz vairāk atbilst cilvēka acu sajūtām par krāsām. Paskatieties tikai uz HSB vērtībām, jūs parasti varat iedomāties, kāda veida krāsa tā ir.

Attiecībā uz to pašu krāsu krāsu vērtība RGB režīmā ir (255, 153, 71), bet HSB ir (27, 72, 100).

Ir grūti spriest, kā tas izskatīsies pēc trīs oriģinālo krāsu sajaukšanas, ja paskatīsimies tikai uz RGB. Bet HSB ir atšķirīgs. Jums tikai jāiepazīstas ar tādu krāsu nokrāsām kā sarkana ir 0, oranža ir 30 un dzeltena ir 60, tad jūs zināt, ka tā būs salīdzinoši piesātināta oranža krāsa ar augstu spilgtumu un nedaudz tuvu sarkanai, kad H ir 27.

Tālāk mēs atbildēsim uz abu režīmu trīs dimensijām telpā x, y, x un salīdzināšanai uzzīmēsim krāsu kubiku.

RGB un HSB ir tikai dažādas krāsu aprakstīšanas metodes. Mēs varam uztvert adresi kā metaforu. Pieņemsim, ka, ja vēlaties pastāstīt citiem cilvēkiem par imperatora pils stāvokli, varat teikt, ka tā atrodas Džingshanas frontes ielā 4, Dongčengas apgabalā, Pekinā. Vai arī jūs varat teikt, ka ir 15 sekundes, 55 minūtes, 39 grādi ziemeļu platumā un 26 sekundes, 23 minūtes, 116 grādi austrumu garumā. HSB apraksta metode ir līdzīga pirmajai. Ja esat iepazinies ar relatīvo apgabalu, parasti varat zināt adreses atrašanās vietu. Lai gan RGB var būt precīzāks, bet tas ir ļoti abstrakts.

HSB režīms pastāvēja ar mērķi palīdzēt mums ērtāk aprakstīt krāsu. Lai ekrānā parādītu noteikta veida krāsu, mums vispirms ir jāpārvērš RGB režīmā.

Iepriekš mēs iepazīstinām ar trim krāsu režīmiem: RGB, HSB, CMYK. Programmā jums ir jākoncentrējas tikai uz diviem režīmiem: RGB un HSB. Viņiem ir savas priekšrocības un savi pielietojumi vienlaikus. Ja esat ar to iepazinies, tas atbilst jūsu projektēšanas prasībām.

2. darbība. Datu tips krāsu saglabāšanai

Lai programmā parādītu krāsas, lielākoties mēs iepriekš izmantojam RGB režīmu. Tomēr, tikai kontrolējot trīs īpašības, vai mēs varam parādīt kādas krāsas? Datorā tas ir šādi.

Mēs jau iepriekš esam minējuši, ka apstrādē, izņemot R, G, B, mēs varam krāsām piešķirt alfa (caurspīdīgumu). Bet alfa nepieder pie krāsas komponenta. Tās esamība ir ērta sajaukšanās ar krāsām aiz muguras. Tādējādi, lai datori precīzi aprakstītu noteikta veida krāsu, mums ir jākontrolē tikai trīs galvenie mainīgie.

Turpmāk mēs sākam ieviest sava veida datu tipu Krāsa, ko galvenokārt izmanto krāsu glabāšanai. Tas ir līdzīgs iepriekš minētajiem datu tipiem, piemēram, boolena, int, float.

Šeit vispirms ļaujiet man izskaidrot faktisko krāsu izmantošanu. Iedomājieties šo: pieņemsim, ka, ja mēs varam izmantot tikai iepriekš apgūtās metodes noteiktu datu glabāšanai, ko mums darīt?

Koda piemērs (9-1):

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

void setup () {

izmērs (400, 400);

r = 255;

g = 0;

b = 0;

}

void draw () {

fons (0);

rectMode (CENTRS);

aizpildiet (r, g, b);

taisns (platums/2, augstums/2, 100, 100);

}

[/cceN_cpp]

Kas attiecas uz krāsām, kurām ir tendence uz krāsām, mums ir jāizveido trīs mainīgie, lai datus uzglabātu attiecīgi trīs krāsu kanālos - sarkanā, zaļā un zilā krāsā. Vēlāk, ja mēs vēlamies izsaukt šo krāsu datu kopu, mums tas ir jāraksta aizpildīšanai vai svītrai.

Bet jūs atradīsit, ka to darīt ir pārāk apgrūtinoši, jo dati ir savstarpēji saistīti. Ja jums ir ideja tos iesaiņot lietošanā, tas būs ērtāk. Tāpēc tiek radīta krāsa.

Koda piemērs (9-2):

[cceN_cpp theme = "dawn"] krāsa myColor;

void setup () {

izmērs (400, 400);

myColor = krāsa (255, 0, 0);

}

void draw () {

fons (0);

rectMode (CENTRS);

aizpildīt (myColor);

taisns (platums/2, augstums/2, 100, 100);

} [/cceN_cpp]

Tāpat kā ar datu tipiem, piemēram, int, mainīgo izveidošanai sākumā ir jāizmanto “color myColor”.

Iestatījumos mēs izmantojam “myColor = color (255, 0, 0)”, lai piešķirtu vērtību mainīgajam myColor. Lai gan funkcijas krāsa (a, b, c) pareizi norāda, ka šī datu kopa ir izveidojusi krāsu tipu, lai importētu mainīgo myColor. Ja rakstāt “myColor = (255, 0, 0)”, programma kļūdīsies.

Pēdējā gadījumā mēs izmantojam aizpildījumu (), lai realizētu krāsu polsterējuma darbību. Funkciju aizpildīšana () un gājiens () ļauj pārklāties. Atkarībā no parametru daudzuma un veida tam būs atšķirīga ietekme. Importējot tikai vienu veselu skaitļu mainīgo, kas to attēlo, tā ir tikai pelēktoņu krāsa. Importējot mainīgu krāsu, tas nozīmē, ka krāsu diapazons būs lielāks. Varat arī importēt krāsu mainīgo un veselu skaitļu mainīgo, mainīt funkciju fill () iepriekš norādītajā aizpildījumā (myColor, 150), pēc tam alfa var kontrolēt ar otro parametru.

3. darbība. Aizpildīšanas pārklāšanās metode

insults, fons ir tāda pati pārklāšanās metode ar aizpildījumu.

Izlasiet krāsu kanāla vērtību

Papildus uzdevumiem jūs varat patstāvīgi iegūt RGB vērtību krāsu mainīgajā

Koda piemērs (9-3):

[cceN_cpp theme = "dawn"] krāsa myColor;

void setup () {

myColor = krāsa (255, 125, 0);

println (sarkans (myColor));

println (zaļš (myColor));

println (zils (myColor));

}

[/cceN_cpp]

Rezultāts konsolē: 255, 125, 0.

Funkcija sarkana (), zaļa (), zila () relatīvi atgriezīsies sarkanā, zaļā un zilā kanāla vērtībā myColor.

Heksadecimālais uzdevums

Izņemot decimāldaļu izmantošanu, lai parādītu RGB, mēs varam izmantot arī heksadecimālo skaitli. Decimāls nozīmē palielināt 1, kad tas atbilst 10. Kamēr heksadecimālais skaitlis nozīmē palielināt 1, ja tas atbilst 16. Tā relatīvā saistība ar decimālo skaitli ir: “no 0 līdz 9” atbilst “0” līdz 9”,“A līdz F”atbilst“10 līdz 15”.

Tālāk redzamajā attēlā ir parādīta konvertēšanas metode.

Protams, ja mēs iegūstam heksadecimālu vērtību kopu, piemēram, ff7800, mums tas nav jāpārvērš manuāli. Programma piešķirs vērtības krāsu mainīgajiem tieši. Tas ir ļoti ērti.

Mēs varam redzēt, ka daudzas krāsu kartes tiešsaistē izmanto heksadecimālu metodi krāsu parādīšanai.

Tāpat kā dizaina kopienas dribls, mākslas darbiem tiks pievienotas krāsu paletes. Ja redzat iecienītāko krāsojumu, varat to lietot programmā.

Koda piemērs (9-4):

[cceN_cpp theme = "rītausma"] color backColor, colorA, colorB, colorC;

void setup () {

izmērs (400, 400);

rectMode (CENTRS);

noStroke ();

backColor = #395b71;

colorA = #c4d7fb;

krāsaB = #f4a7b4;

krāsaC = #f9e5f0;

}

void draw () {

fons (backColor);

aizpildīt (krāsa A);

taisns (200, 200, 90, 300);

aizpildīt (krāsaB);

taisns (100, 200, 90, 300);

aizpildīt (colorC);

taisns (300, 200, 90, 300);

} [/cceN_cpp]

Tagad krāsa ir daudz ērtāka ar labāku efektu nekā nejauša vērtību ievadīšana.

Pirms heksadecimālās krāsas vērtības pievienojiet “#”, tad mainīgajai krāsai varat piešķirt vērtību tieši.

4. solis: HSB režīms

Papildus RGB režīmam mēs runāsim par HSB režīmu. Tālāk ir parādīta HSB režīma vērtību piešķiršanas metode.

Koda piemērs (9-5):

[cceN_cpp theme = "dawn"] anulēts iestatījums () {

izmērs (400, 400);

krāsu režīms (HSB);

}

void draw () {

fons (0);

rectMode (CENTRS);

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

krāsa col = krāsa (i/20,0 * 255, 255, 255);

aizpildīt (kol.);

taisns (i * 20 + 10, augstums/2, 10, 300);

}

} [/cceN_cpp]

Apstrādes procesā, lai pārslēgtu HSB režīmu, mums ir jāpievieno tikai teikums colorMode (HSB). Funkcijas colorMode () izmantošana ir krāsu režīma maiņa. Ja iekavās ierakstām “HSB”, tad tas tiks iestatīts HSB režīmā; kamēr mēs rakstām “RGB”, tas tiks pārslēgts uz RGB režīmu.

Ir vērts pievērst uzmanību, ja mēs rakstām colorMode (HSB), noklusējuma maksimālā HSB vērtība ir 255. Tas ir pavisam citāds nekā Photoshop maksimālā vērtība. Programmā Photoshop maksimālā vērtība H ir 360, maksimālā vērtība S un B ir 100. Tātad mums ir jāveic konvertēšana.

Ja HSB vērtība Photoshop ir (55, 100, 100), pārvēršot to apstrādē, šai vērtībai jābūt (55/360 × 255, 255, 255), t.i. (40, 255, 255).

colorMode () ir funkcija, kuru var pārklāt. Tālāk mēs to detalizēti iepazīstināsim ar jums.

5. darbība: ColorMode pārklāšanās metode

Tāpēc, ja nevēlaties manuāli konvertēt HSB vērtību Photoshop, varat rakstīt “colorMode ()” uz “colorMode (HSB, 360, 100, 100)”.

HSB režīma lietošanas gadījums 1

Tā kā RGB režīms nav gluži ērts, lai kontrolētu nokrāsu izmaiņas, šobrīd, ja vēlaties elastīgāk kontrolēt krāsas, varat apsvērt HSB režīmu.

Koda piemērs (9-6):

[cceN_cpp theme = "dawn"] anulēts iestatījums () {

izmērs (800, 800);

fons (0);

krāsu režīms (HSB);

}

void draw () {

insultsSvars (2);

gājiens (int (milis ()/1000,0 * 10)%255, 255, 255);

float newX, newY;

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

newY = mouseY + (troksnis (milis ()/1000,0) - 0,5) * 800;

līnija (mouseX, mouseY, newX, newY);

} [/cceN_cpp]

Kad mēs insultu kontrolējam H (nokrāsas), mēs esam izmantojuši milis (). Tas iegūs darbības laiku no sākuma līdz mūsdienām. Tādējādi, tāpat kā laikam virzoties uz priekšu, H (nokrāsa) vērtība automātiski palielināsies, pēc tam mainīsies krāsa.

Milis () vienība ir ms. Tātad, kad programma darbojas 1 sekundi, atgriešanās vērtība būs 1000. Tas novedīs pie vērtības, kas ir pārāk liela. Tātad mums tas jāsadala ar 1000,0.

Tā kā mēs ceram, ka krāsas parādīs periodisku cirkulāciju, tāpēc mums ir jādara modulo darbība, kad beidzot rakstām pirmo parametru. Tas var pārliecināties, ka tas atkal sāksies no 0, kad H (nokrāsa) būs pārsniedzis 255.

Funkcijas gājiensSvars () var kontrolēt līniju biezumu. Kronšteina parametriem atbilstošā vienība ir pikseļi.

6. darbība: režīma lietojuma gadījums 2

Koda piemērs (9-7):

[cceN_cpp theme = "dawn"] int num; // pašlaik novilkto līniju skaits

pludiņš posX_A, posY_A; // A punkta koordinātas

pludiņš posX_B, posY_B; // B punkta koordinātas

pludiņa leņķisA, ātrumsA; // Punkta A leņķis, ātrums

pludiņa leņķisB, ātrumsB; // B punkta leņķis, ātrums

pludiņa rādiussX_A, rādiussY_A; // Ovāla rādiuss, ko veido punkts X (Y) asī.

pludiņa rādiussX_B, rādiussY_B; // viņš ir ovāla rādiuss, ko veido punkts B X (Y) asī.

void setup () {

izmērs (800, 800);

krāsu režīms (HSB);

fons (0);

ātrumsA = 0,0009;

ātrumsB = 0,003;

rādiussX_A = 300;

rādiussY_A = 200;

rādiussX_B = 200;

rādiuss Y_B = 300;

}

void draw () {

tulkot (platums/2, augstums/2);

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

leņķisA += ātrumsA;

leņķisB += ātrumsB;

posX_A = cos (leņķis A) * rādiussX_A;

posY_A = sin (leņķis A) * rādiussY_A;

posX_B = cos (leņķisB) * rādiussX_B;

posY_B = sin (leņķisB) * rādiussY_B;

gājiens (int (skaits/500,0) % 255, 255, 255, 10);

līnija (posX_A, posY_A, posX_B, posY_B);

numurs ++;

}

} [/cceN_cpp]

Darbības efekts:

Izejas attēls:

Redzēto modeli rada kustīga līnija, nepārtraukti pārklājoties. Līnijas divu beigu punktu pēdas ir divi apļi atsevišķi.

Izmantojot HSB režīmu, mēs esam kontrolējuši nokrāsu izmaiņas. Palielinoties līnijām, nokrāsa tiks izlīdzināta. Kad masīvas daļēji caurspīdīgas līnijas pārklājās, tas radīs ļoti bagātīgu krāsu gradientu.

Mēs esam iebūvējuši cilpu funkcijai, kuras mērķis ir izmantot cilpu, lai kontrolētu līnijas daudzumu. Tas ir līdzvērtīgi tam, ka mums ir kontrolēts vilkšanas ātrums. Palielinot sprieduma nosacījuma vērtību cilpai, tas palielinās zīmējumu.

Zemāk ir shematisks attēls. Jūs varat redzēt apļu kustības pēdas skaidrāk.

Pielāgojiet atšķirīgu ātrumu un rādiusu, arī izveidotie modeļi būs atšķirīgi. Mēģiniet mainīt tādus mainīgos lielumus kā leņķis, ātrums, rādiuss X, rādiuss Y un redzēt, kas notiks.

7. darbība: slāņu sajaukšanas režīms

Dažādie krāsu režīmi, par kuriem mēs runājām iepriekš, ir izmantoti grafikas komponentu krāsošanai. Izņemot šīs metodes izmantošanu krāsu kontrolei, apstrādei var izmantot dažādu slāņu sajaukšanas režīmus, piemēram, Photoshop.

Atveriet slāņa logu PS, noklikšķiniet, lai izvēlētos slāņu sajaukšanas režīmu, tad mēs varam redzēt šīs iespējas.

Tie ir PS slāņu režīmi. Vienkārši sakot, sajaukšanas režīmu var uzskatīt par sava veida krāsu aprēķināšanas režīmu. Tā izlems, kura krāsa tiks izveidota pēdējā, kad “krāsa A” plus “krāsa B”. Šeit “krāsa A” nozīmē krāsu aiz pašreizējā slāņa (saukta arī par pamatkrāsu). “Krāsa B” nozīmē pašreizējā slāņa krāsu (to sauc arī par jauktu krāsu). Programma aprēķinās, lai iegūtu C krāsu atbilstoši A un B krāsu RGB vērtībai un alfa. Tā tiks parādīta ekrānā kā krāsas krāsa.

Dažādu slāņu režīms nozīmē dažādas aprēķina metodes. Šīs rakstu sērijas nākamajā pusē mēs to detalizēti izskaidrosim. Tagad mums tikai jāzina tās izmantošana.

Apskatīsim piemēru, kā programmā izmantot režīmu Pievienot.

Koda piemērs (9-8):

[cceN_cpp theme = "rītausma"] PImage image1, image2;

void setup () {

izmērs (800, 400);

image1 = loadImage ("1.jpg");

image2 = loadImage ("2.jpg");

}

void draw () {

fons (0);

blendMode (ADD);

attēls (attēls1, 0, 0, 400, 400);

attēls (image2, mouseX, mouseY, 400, 400);

}

[/cceN_cpp]

Rezultāts:

Funkcija blendMode () tiek izmantota, lai iestatītu grafikas sajaukšanas režīmu. Mēs aizpildām PIEVIENOT aiz tā, ka esam iestatījuši pievienošanas režīmu.

Programmā nav slāņa jēdziena. Bet, tā kā ir grafisko komponentu zīmēšanas secība, tad, sajaucot attēlus, 1. attēls tiek uzskatīts par pamatkrāsu un 2. attēls - par jauktu krāsu.

ADD režīms pieder pie “Brighten Class”. Pēc lietošanas jūs iegūsit spilgtu efektu.

Zemāk ir sajaukšanas režīms, ko var izmantot apstrādē.

8. darbība: sajaukšanas režīma apstrāde

Mēs varam mēģināt mainīt dažādus sajaukšanas režīmus, lai redzētu efektu.

Kad piemērs (9-8) ir pieņēmis pārklāšanās režīmu (fonam jābūt iestatītam uz baltu):

Pēc atņemšanas režīma izmantošanas (fons jāiestata baltā krāsā):

9. darbība: slāņu sajaukšanas režīma lietojuma lieta

Sajaukšanas režīmu var izmantot ne tikai attēliem, bet arī visiem audekla grafiskajiem komponentiem. Zemāk ir parādīts lietojums par pievienošanas režīmu. To var izmantot dažādu apgaismojuma efektu analogēšanai.

Koda piemērs (9-9):

[cceN_cpp theme = "dawn"] anulēts iestatījums () {

izmērs (400, 400);

}

void draw () {

fons (0);

blendMode (ADD);

int num = int (3000 * peleX/400,0);

par (int i = 0; i <skaits; i ++) {

ja (nejauši (1) <0,5) {

aizpildīt (0, 50, 0);

} vēl {

aizpildīt (50);

}

elipse (nejauša (50, platums - 50), nejauša (50, augstums - 50), 20, 20);

}

}

[/cceN_cpp]

Šeit, izmantojot nejaušu funkciju, mēs daļiņās esam sajaukuši zaļo un balto krāsu, kas jau ir pārnesuši alfa. Mēs varam izmantot peli, lai kontrolētu apļa daudzumu un skatītos pārklāšanās efektu.

ADD un SCREEN ir diezgan līdzīgi. Lai gan spilgtums ir vienāds, ir nelielas atšķirības. Jūs varat to nomainīt uz SCREEN un salīdzināt. Pēc pārklāšanās ADD tīrība un spilgtums būs augstāks. Tas ir piemērots apgaismojuma efekta analogēšanai.

Kas attiecas uz krāsu, šeit mēs esam nonākuši šajā nodaļā. Šai “valodai” jūs jau esat apguvis pietiekami daudz brīvo vietu. Steidzieties izmantot kodu, lai izbaudītu formu un krāsu pasauli!

10. solis: avots

Šis raksts ir no:

Ja jums ir kādi jautājumi, varat sazināties ar ： [email protected].