Zaujímavé pokyny pre programovanie programovania pre návrhára-ovládanie farieb: 10 krokov

2024 Autor: John Day | [email protected]. Naposledy zmenené: 2024-01-30 11:56

V predchádzajúcich kapitolách sme si povedali viac o tom, ako použiť kód na tvarovanie, a nie o znalostné body o farbe. V tejto kapitole sa pokúsime hlbšie preskúmať tento aspekt znalostí.

Krok 1: Základné znalosti o farbe

Farba v istom aspekte prekonala ľudskú intuíciu. Rôzne krásne farby, ktoré vidíme voľným okom, sa v skutočnosti skladajú z rovnakých zložiek. Iba pomocou troch svetlých farieb červenej, zelenej a modrej dokážeme vytvoriť všetky farby, ktoré môžu ľudské oči vidieť pomocou zmesi.

Na základe tohto princípu sú vytvorené mobilné obrazovky a počítačové obrazovky, ktoré ste v súčasnosti videli. Červená, zelená a modrá sa nazývajú tri pôvodné farby svetla. Pomerom týchto troch prvkov môžeme zaistiť určitú farbu. Tento spôsob popisu sa nazýva aj režim RGB. Medzi nimi červená je R, zelená je G a modrá je B.

Okrem režimu RGB existuje ešte jeden režim, ktorý sa nazýva režim CMYK. Obvykle sa kombinuje s tlačou. Pri tlači existujú aj tri pôvodné farby. Je však odlišný od troch pôvodných farieb svetla. Samostatne sú červená, žltá a modrá. Medzi nimi C je azúrová, M je purpurová a Y je žltá. Teoreticky, iba pomocou CMY, môžeme zmiešať väčšinu farieb. Ale kvôli výrobnej technike surovín sotva dosiahneme 100%nasýtenie CMY. Ak zmiešame tieto tri farby, nemôžeme získať dostatočne tmavú čiernu farbu. Ako doplnok k tlači je teda K, ktorý je pre čierny atrament na tlač, navyše.

Pokiaľ ide o RGB a CMYK, musíte len vedieť, že v prírode je najzreteľnejší rozdiel. RGB je plus farebný režim, ktorý zvyšuje jas zmiešaním viacerých farieb. Zatiaľ čo CMYK je mínus farebný režim, ktorý zvyšuje tmavosť zmiešaním viacerých farieb. Na obrázku nižšie môžeme vizuálne vidieť podobnosti a rozdiely týchto dvoch režimov. Na ľavom obrázku si môžeme predstaviť byť tmavý dom so zapnutými tromi rôznymi farbami bateriek. Na obrázku vpravo ho môžeme považovať za akvarelový papier po prekrytí tromi pigmentmi červenej, zelenej a modrej.

Ak chcete hlbšie poznať jeho relatívne vzťahy medzi rôznymi farebnými režimami, môžete otvoriť Photoshop a vybrať nástroj na výber farieb. Potom môžete intuitívne vidieť hodnoty farieb tej istej farby v rôznych farebných režimoch.

V poslednom by sme vám chceli predstaviť ďalší bežný farebný režim, HSB. HSB nemá koncept „pôvodnej farby“. Je klasifikovaná podľa pocitov ľudských očí k farbám. H znamená odtieň, S znamená sýtosť a B je jas.

Odtieň predstavuje farebnú tendenciu. Každá farba má určitý druh farebnej tendencie, iba ak nie je plešatá, biela alebo sivá. Na označenie odtieňa sa používa najbohatšia oblasť prechodu farieb v nástroji na výber farieb. Jeho hodnota v PS sa pohybuje od 0 do 360.

Sýtosť znamená čistotu farby. Vyššia čistota prináša živšie farby. Jeho hodnota v PS sa pohybuje od 0 do 100.

Jas znamená stupeň svetlosti farby v rozmedzí od 0 do 100.

V porovnaní s režimom RGB sú tri rozmery HSB oveľa viac v súlade s citom ľudských očí pre farby. Stačí sa pozrieť iba na hodnoty HSB, spravidla si dokážete predstaviť, o akú farbu sa jedná.

Pokiaľ ide o rovnakú farbu, hodnota farby v režime RGB je (255, 153, 71), zatiaľ čo v HSB je (27, 72, 100).

Je ťažké posúdiť, ako to bude vyzerať po zmiešaní troch pôvodných farieb, ak sa pozrieme iba na RGB. Ale HSB je iný. Musíte sa iba zoznámiť s odtieňmi farieb, ako je červená 0, oranžová 30 a žltá 60, potom budete vedieť, že to bude pomerne nasýtená oranžová farba s vysokým jasom a trochu blízko k červenej, keď H je 27.

Ďalej budeme zodpovedať tri rozmery týchto dvoch režimov do x, y, x v priestore a nakreslíme farebnú kubiku na porovnanie.

RGB a HSB sú len rôzne metódy na opis farieb. Adresu môžeme brať ako metaforu. Predpokladajme, že ak chcete iným povedať o pozícii cisárskeho paláca, môžete povedať, že je na č. 4 Jingshan Front Street, Dongcheng Area, Peking. Alebo môžete povedať, že je to 15 sekúnd, 55 minút, 39 stupňov na severnej šírke a 26 sekúnd, 23 minút, 116 stupňov na východnej dĺžke. Metóda popisu HSB je podobná predchádzajúcej. Ak ste oboznámení s relatívnou oblasťou, môžete spravidla poznať polohu adresy. RGB síce môže byť presnejší, ale je veľmi abstraktný.

Režim HSB existoval s cieľom pomôcť nám pohodlnejšie popísať farby. Aby sme na obrazovke zobrazili určitý druh farieb, musíme ich nakoniec previesť do režimu RGB.

Vo vyššie uvedenom uvádzame tri farebné režimy: RGB, HSB, CMYK. V programe sa musíte zamerať iba na dva režimy: RGB a HSB. Majú svoje vlastné výhody a svoje vlastné aplikácie súčasne. Ak ste s ním oboznámení, uspokojí všetky vaše konštrukčné požiadavky.

Krok 2: Typ údajov na ukladanie farieb

Na zobrazenie farieb v programe väčšinou používame režim RGB. Môžeme však zobrazovať všetky farby iba ovládaním troch vlastností? V počítači je to takto.

Už sme sa o tom zmienili v časti Spracovanie, okrem R, G, B môžeme pre farby označiť alfa (priehľadnosť). Alfa však nepatrí do zložky farby. Jeho existencia je v pohodlnej zmesi s farbami vzadu. Preto, aby počítače presne opísali určitý druh farby, musíme ovládať iba tri kľúčové premenné.

V nasledujúcom texte začneme predstavovať druh dátového typu Color, ktorý sa používa hlavne na ukladanie farieb. Je to podobné ako v minulosti uvedené typy údajov, ako sú boolena, int, float.

Tu mi dovoľte najskôr celkom vysvetliť skutočné použitie farieb. Predstavte si to: predpokladajme, že čo môžeme urobiť, ak môžeme na ukladanie určitých údajov použiť iba predtým zvládnuté metódy?

Príklad kódu (9-1):

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

neplatné nastavenie () {

veľkosť (400, 400);

r = 255;

g = 0;

b = 0;

}

void draw () {

pozadie (0);

rectMode (CENTRUM);

výplň (r, g, b);

priamy (šírka/2, výška/2, 100, 100);

}

[/cceN_cpp]

Pokiaľ ide o farby, ktoré majú tendenciu farieb, musíme vytvoriť tri premenné na ukladanie údajov do troch farebných kanálov červenej, zelenej a modrej. Neskôr, ak chceme vyvolať túto sadu farebných údajov, musíme ich zapísať do výplne alebo ťahu.

Ale zistíte, že je príliš problematické to urobiť, pretože údaje sú navzájom prepojené. Ak máte nápad zabaliť ich pri použití, bude to pohodlnejšie. Preto sa vytvára farba.

Príklad kódu (9-2):

[cceN_cpp theme = "dawn"] farba myColor;

neplatné nastavenie () {

veľkosť (400, 400);

myColor = farba (255, 0, 0);

}

void draw () {

pozadie (0);

rectMode (CENTRUM);

fill (myColor);

priamy (šírka/2, výška/2, 100, 100);

} [/cceN_cpp]

Rovnako ako pri údajových typoch, ako je int, musíme na začiatku používať premenné „color myColor“.

V nastavení používame „myColor = color (255, 0, 0)“na priradenie hodnoty premennej myColor. Aj keď farba funkcie (a, b, c) správne predstavuje, že táto sada údajov vytvorila typ farby na import premennej myColor. Ak napíšete „myColor = (255, 0, 0)“, program sa pokazí.

V poslednom používame fill () na realizáciu operácie farebného polstrovania. Funkcia fill () a zdvih () sa môžu prekrývať. Podľa množstva a typu parametrov bude mať rôzne efekty. Importuje sa iba jedna celočíselná premenná, ktorá ju reprezentuje, je to farba iba v odtieňoch sivej. Pri importe premennej farby to znamená, že rozsah farieb bude väčší. Môžete tiež importovať farebnú a celočíselnú premennú, zmeniť funkciu fill () vo vyššie uvedenom parametri na výplň (myColor, 150), potom môžete ovládať alfa druhým parametrom.

Krok 3: Spôsob prekrývania výplne

ťah, pozadie majú rovnakú metódu prekrývania s výplňou.

Prečítajte si hodnotu farby kanála

Okrem priradení môžete nezávisle získať aj hodnotu RGB v premennej farby

Príklad kódu (9-3):

[cceN_cpp theme = "dawn"] farba myColor;

neplatné nastavenie () {

myColor = farba (255, 125, 0);

println (červená (myColor));

println (zelený (myColor));

println (modrá (myColor));

}

[/cceN_cpp]

Výsledok v konzole: 255, 125, 0.

Funkcia red (), green (), blue () sa relatívne vráti späť na hodnotu červeného, zeleného a modrého kanála v myColor.

Hexadecimálne priradenie

Okrem použitia desatinných čísel na zobrazenie RGB môžeme použiť aj hexadecimálne. Desatinné číslo znamená zvýšenie 1, keď splní 10. Zatiaľ čo hexadecimálne znamená zvýšenie 1, keď splní 16. Jeho relatívny vzťah k desatinnému miestu je: „0 až 9“zodpovedá „0 až 9 “,„ A až F “zodpovedajú„ 10 až 15 “.

Nasledujúci obrázok ukazuje ilustráciu metódy prevodu.

Samozrejme, ak dostaneme sadu hexadecimálnych hodnôt, ako je ff7800, nemusíme ju prevádzať ručne. Program priamo priradí hodnoty farebným premenným. Je to veľmi výhodné.

Môžeme vidieť, že mnoho online farebných kariet používa hexadecimálnu metódu zobrazovania farieb.

Rovnako ako dizajnový dribling komunity, k umeleckým dielam budú pripojené farebné palety. Ak vidíte obľúbené sfarbenie, môžete ho použiť v programe.

Príklad kódu (9-4):

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

neplatné nastavenie () {

veľkosť (400, 400);

rectMode (CENTRUM);

noStroke ();

backColor = #395b71;

farbaA = #c4d7fb;

farbaB = #f4a7b4;

colorC = #f9e5f0;

}

void draw () {

pozadie (backColor);

výplň (farba A);

rektálne (200, 200, 90, 300);

výplň (farbaB);

rektálne (100, 200, 90, 300);

výplň (colorC);

rektálne (300, 200, 90, 300);

} [/cceN_cpp]

Teraz je farba oveľa pohodlnejšia s lepším efektom ako náhodné zadávanie hodnôt.

Pred hodnotu hexadecimálnej farby pridajte „#“, potom môžete premennej farbe priradiť hodnotu priamo.

Krok 4: Režim HSB

Okrem režimu RGB budeme ďalej hovoriť o režime HSB. Nasledujúci text ukazuje spôsob priradenia hodnoty režimu HSB.

Príklad kódu (9-5):

[cceN_cpp theme = "dawn"] neplatné nastavenie () {

veľkosť (400, 400);

colorMode (HSB);

}

void draw () {

pozadie (0);

rectMode (CENTRUM);

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

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

výplň (col);

priamy (i * 20 + 10, výška/2, 10, 300);

}

} [/cceN_cpp]

V procese spracovania musíme na prepnutie režimu HSB pridať iba vetu colorMode (HSB). Funkcia colorMode () slúži na posun farebného režimu. Ak do zátvorky napíšeme „HSB“, potom sa nastaví do režimu HSB; kým napíšeme „RGB“, posunie sa to do režimu RGB.

Čo stojí za to venovať pozornosť je, že keď píšeme colorMode (HSB), predvolená maximálna hodnota HSB je 255. To sa úplne líši od maximálnej hodnoty vo Photoshope. Vo Photoshope je maximálna hodnota H 360, maximálna hodnota S a B je 100. Musíme teda urobiť konverziu.

Ak je hodnota HSB vo Photoshope (55, 100, 100), pri prevode na spracovanie by mala byť táto hodnota (55 /360 × 255, 255, 255), t.j. (40, 255, 255).

colorMode () je funkcia, ktorú je možné prekrývať. V nasledujúcom texte vám ho podrobne predstavíme.

Krok 5: Metóda prekrývania ColorMode

Ak teda nechcete prevádzať hodnotu HSB vo Photoshope ručne, môžete napísať „colorMode ()“do „colorMode (HSB, 360, 100, 100)“.

Prípad aplikácie v režime HSB 1

Pretože režim RGB nie je celkom vhodný na ovládanie zmien odtieňa, v tejto chvíli, ak chcete flexibilnejšie ovládať farby, môžete zvážiť režim HSB.

Príklad kódu (9-6):

[cceN_cpp theme = "dawn"] neplatné nastavenie () {

veľkosť (800, 800);

pozadie (0);

colorMode (HSB);

}

void draw () {

zdvihová hmotnosť (2);

zdvih (int (milis ()/1000,0 * 10)%255, 255, 255);

float newX, newY;

novýX = myšX + (šum (milis ()/1000,0 + 1,2) - 0,5) * 800;

novýY = myšY + (hluk (milis ()/1000,0) - 0,5) * 800;

riadok (mouseX, mouseY, newX, newY);

} [/cceN_cpp]

Keď riadime H (odtiene) v mŕtvici, použili sme milis (). Získa čas prevádzky od začiatku do súčasnosti. Rovnako ako v čase vpred, hodnota H (odtieň) sa teda automaticky zvýši a potom sa zmení farba.

Jednotka milis () je ms. Keď teda program beží 1 sekundu, návratová hodnota bude 1 000. To povedie k príliš veľkej hodnote. Musíme to teda rozdeliť 1000,0.

Pretože dúfame, že farby budú predstavovať periodický obeh, musíme teda vykonať modulo operáciu, keď konečne napíšeme prvý parameter ťahom. To môže zaistiť, že začne znova od 0, keď H (odtieň) prekročí 255.

Funkcia strokeWeight () môže ovládať hrúbku čiar. Príslušná jednotka pre parametre v zátvorke je pixel.

Krok 6: Prípad aplikácie režimu 2

Príklad kódu (9-7):

[cceN_cpp theme = "dawn"] int num; // množstvo aktuálne nakreslených čiar

float posX_A, posY_A; // Súradnica bodu A

float posX_B, posY_B; // Súradnica bodu B

plavákový uholA, rýchlosťA; // Uhol bodu A, rýchlosť

plavákový uholB, rýchlosťB; // Uhol bodu B, rýchlosť

polomer plávaniaX_A, polomerY_A; // Polomer oválu tvorený bodom A na osi X (Y).

polomer plávaniaX_B, polomer Y_B; // polomer oválu tvorený bodom B na osi X (Y).

neplatné nastavenie () {

veľkosť (800, 800);

colorMode (HSB);

pozadie (0);

rýchlosť A = 0,0009;

rýchlosť B = 0,003;

polomerX_A = 300;

polomer Y_A = 200;

polomerX_B = 200;

polomer Y_B = 300;

}

void draw () {

preložiť (šírka/2, výška/2);

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

uhol A += rýchlosť A;

uhol B += rýchlosť B;

posX_A = cos (uholA) * polomerX_A;

posY_A = sin (uholA) * polomerY_A;

posX_B = cos (uholB) * polomerX_B;

posY_B = sin (uholB) * polomerY_B;

mŕtvica (int (počet/500,0) % 255, 255, 255, 10);

riadok (posX_A, posY_A, posX_B, posY_B);

num ++;

}

} [/cceN_cpp]

Prevádzkový efekt:

Výstupný obrázok:

Vzor, ktorý ste videli, je vytváraný pohybovou čiarou konštantným prekrývaním. Stopy dvoch koncových bodov čiary sú dva kruhy oddelene.

Prostredníctvom režimu HSB sme kontrolovali zmeny odtieňa. S nárastom riadkov sa odtieň vyrovná. Keď sa prekrývajú masívne polopriehľadné čiary, vytvorí to veľmi sýty farebný prechod.

Do kreslenia funkcií sme vložili a for loop s cieľom použiť for loop na riadenie množstva riadku. Je to ekvivalent toho, že sme kontrolovali rýchlosť kreslenia. Zvýšením hodnoty podmienky posúdenia v slučke for sa zvýši kresba seepd.

Nasleduje schematický obrázok. Pohybovú stopu kruhov môžete vidieť jasnejšie.

Upravte rôznu rýchlosť a polomer, pričom sa budú líšiť aj vytvorené vzory. Skúste zmeniť premenné ako uhol, rýchlosť, polomer X, polomer Y a uvidíte, čo sa stane.

Krok 7: Režim miešania vrstiev

Rôzne farebné režimy, o ktorých sme hovorili v predchádzajúcom texte, sa všetky používajú na komponenty farebnej grafiky. Okrem použitia tejto metódy na ovládanie farieb môže Processing používať režimy miešania rôznych vrstiev, ako napríklad Photoshop.

Otvorte okno vrstvy v PS, kliknutím vyberte režim prelínania vrstiev, potom sa nám zobrazia tieto možnosti.

Toto sú existujúce režimy vrstiev v PS. Zjednodušene povedané, režim prelínania možno považovať za druh režimu výpočtu farieb. Rozhodne, ktorá farba sa vytvorí ako posledná, keď „farba A“plus „farba B“. Tu „farba A“znamená farbu za aktuálnou vrstvou (nazýva sa tiež základná farba). „Farba B“znamená farbu aktuálnej vrstvy (nazýva sa tiež zmiešaná farba). Program vypočíta, aby získal farbu C podľa hodnoty RGB a alfa farby A a B. Zobrazí sa na obrazovke ako výsledná farba.

Režim rôznych vrstiev znamená rôzne metódy výpočtu. V ďalšej polovici tejto série článkov si to podrobne vysvetlíme. Teraz musíme iba poznať jeho použitie.

Pozrime sa na príklad použitia režimu pridania v programe.

Príklad kódu (9-8):

[cceN_cpp theme = "dawn"] PImage obrázok1, obrázok2;

neplatné nastavenie () {

veľkosť (800, 400);

image1 = loadImage ("1.jpg");

image2 = loadImage ("2.jpg");

}

void draw () {

pozadie (0);

blendMode (ADD);

obrázok (obrázok1, 0, 0, 400, 400);

obrázok (image2, mouseX, mouseY, 400, 400);

}

[/cceN_cpp]

Výsledok:

Funkcia blendMode () sa používa na nastavenie režimu prelínania grafiky. Vyplňujeme ADD za znamená, že sme nastavili režim pridávania.

V programe neexistuje koncept vrstvy. Pretože však existuje kresba sekvencie grafických komponentov, pri miešaní obrázkov je obrázok 1 považovaný za základnú farbu a obrázok 2 za zmiešanú farbu.

Režim ADD patrí do triedy „Brighten Class“. Po použití získate rozjasnený efekt.

Nasleduje režim miešania, ktorý je možné použiť pri spracovaní.

Krok 8: Režim miešania

Môžeme skúsiť zmeniť iný režim miešania, aby sme videli efekt.

Keď príklad (9-8) prijal režim prekrývania (pozadie by malo byť nastavené na biele):

Po použití režimu Substract (pozadie by malo byť nastavené na biele):

Krok 9: Aplikačný prípad režimu miešania vrstiev

Režim prelínania nie je možné použiť iba na obrázky, ale je vhodný aj pre všetky grafické komponenty na plátne. Nasleduje zobrazenie použitia o režime pridávania. Môže byť použitý na analógiu rôznych svetelných efektov.

Príklad kódu (9-9):

[cceN_cpp theme = "dawn"] neplatné nastavenie () {

veľkosť (400, 400);

}

void draw () {

pozadie (0);

blendMode (ADD);

int num = int (3000 * myšX/400,0);

pre (int i = 0; i <počet; i ++) {

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

výplň (0, 50, 0);

} else {

výplň (50);

}

elipsa (náhodná (50, šírka - 50), náhodná (50, výška - 50), 20, 20);

}

}

[/cceN_cpp]

Tu sme prostredníctvom náhodnej funkcie zmiešali zelenú farbu a bielu farbu, ktoré už niesli alfa, do častíc. Pomocou myši môžeme ovládať množstvo kruhu a sledovať efekt prekrývania.

ADD a SCREEN sú dosť podobné. Aj keď je rozjasnenie rovnaké, existujú jemné rozdiely. Môžete ho nahradiť SCREEN a porovnať. Po prekrývaní bude čistota a jas ADD vyššia. Je vhodný na analógiu svetelného efektu.

Pokiaľ ide o farbu, tu sme v tejto kapitole skončili. Na tento „jazyk“ste už zvládli dostatok jazykov. Teraz sa poponáhľajte používať kód, aby ste si mohli užiť svet tvarov a farieb!

Krok 10: Zdroj

Tento článok pochádza z:

V prípade akýchkoľvek otázok sa môžete obrátiť na ： [email protected].