Zajímavé pokyny pro programování programování pro návrháře-ovládání barev: 10 kroků

2024 Autor: John Day | [email protected]. Naposledy změněno: 2024-01-30 08:19

V předchozích kapitolách jsme hovořili více o tom, jak používat kód k tvarování namísto znalostních bodů o barvě. V této kapitole prozkoumáme tento aspekt znalostí hlouběji.

Krok 1: Základní znalosti o barvě

Barva v jistém aspektu překonala lidskou intuici. Různé krásné barvy, které jsme viděli pouhým okem, se ve skutečnosti skládají ze stejných složek. Pouze pomocí tří světlých barev červené, zelené a modré můžeme vytvořit všechny barvy, které mohou lidské oči vidět směsí.

Na základě tohoto principu jsou vytvořeny mobilní obrazovky a počítačové obrazovky, které jste právě viděli. Červená, zelená a modrá se nazývají tři původní barvy světla. Poměrem těchto tří prvků můžeme zajistit určitou barvu. Tento způsob popisu se také nazývá režim RGB. Mezi nimi červená je R, zelená je G a modrá je B.

Kromě režimu RGB existuje ještě jeden režim, který se nazývá režim CMYK. Obvykle se kombinuje s tiskem. V tisku jsou také tři originální barvy. Liší se však od tří původních barev světla. Samostatně jsou červená, žlutá a modrá. Mezi nimi C je pro azurovou, M je pro purpurovou a Y je pro žlutou. Teoreticky, pouze pomocí CMY, můžeme míchat většinu barev. Ale vzhledem k výrobní technice suroviny jen stěží dosáhneme 100%nasycení CMY. Pokud tyto tři barvy smícháme, nemůžeme získat dostatečně tmavou černou barvu. Jako doplněk tisku tedy existuje extra K, což je pro černý tiskový inkoust.

Pokud jde o RGB a CMYK, musíte pouze vědět, že v přírodě je zjevný rozdíl. RGB je plus barevný režim, který zvyšuje jas smícháním více barev. Zatímco CMYK je minus barevný režim, který zvyšuje tmu smícháním více barev. Na obrázku níže můžeme vizuálně vidět podobnosti a rozdíly těchto dvou režimů. Na obrázku vlevo si můžeme představit temný dům se zapnutými třemi různými barvami baterek. Obrázek vpravo můžeme po překrytí třemi pigmenty červené, zelené a modré považovat za akvarelový papír.

Pokud chcete hlouběji poznat jeho relativní vztahy mezi různými barevnými režimy, můžete otevřít svůj photoshop a vybrat výběr barev. Pak můžete intuitivně vidět hodnoty barev stejné barvy v různých barevných režimech.

V posledním bychom pro vás rádi představili další společný barevný režim, HSB. HSB nemá koncept „původní barvy“. Je klasifikován podle pocitů lidských očí pro barvy. H znamená odstín, S pro sytost a B je pro jas.

Odstín představuje barevnou tendenci. Každá barva má určitý druh barevné tendence, pouze pokud není balck, bílá nebo šedá. K označení odstínu slouží nejbohatší oblast přechodu barev ve výběru barev. Jeho hodnota v PS se pohybuje od 0 do 360.

Sytost znamená čistotu barvy. Vyšší čistota přináší živější barvy. Jeho hodnota v PS se pohybuje od 0 do 100.

Jas znamená stupeň světlosti barvy v rozmezí od 0 do 100.

Ve srovnání s režimem RGB jsou tři rozměry HSB mnohem více v souladu s pocitem lidských očí pro barvy. Stačí se podívat pouze na hodnoty HSB, obecně si dokážete představit, o jakou barvu se jedná.

Pokud jde o stejnou barvu, hodnota barvy v režimu RGB je (255, 153, 71), zatímco v HSB je (27, 72, 100).

Je těžké posoudit, jak to bude vypadat po smíchání tří původních barev dohromady, pokud se podíváme pouze na RGB. Ale HSB je jiný. Musíte se pouze seznámit s odstíny barev, jako je červená 0, oranžová 30 a žlutá 60, pak budete vědět, že to bude poměrně sytá oranžová barva s vysokým jasem a trochu blízko červené, když H je 27.

Dále budeme odpovídat třem rozměrům obou režimů do x, y, x v prostoru a nakreslíme barevnou krychli, abychom provedli srovnání.

RGB a HSB jsou jen různé metody k popisu barev. Adresu můžeme brát jako metaforu. Předpokládejme, že pokud chcete ostatním sdělit polohu císařského paláce, můžete říci, že je na č. 4 Jingshan Front Street, Dongcheng Area, Peking. Nebo můžete říci, že je to 15 sekund, 55 minut, 39 stupňů severní šířky a 26 sekund, 23 minut, 116 stupňů východní délky. Metoda popisu HSB je podobná té první. Pokud jste obeznámeni s relativní oblastí, můžete obecně znát polohu adresy. RGB sice může být přesnější, ale je velmi abstraktní.

Režim HSB existoval s cílem pomoci nám pohodlněji popsat barvy. Abychom na obrazovce zobrazili určitý druh barvy, musíme ji nakonec převést do režimu RGB.

Ve výše uvedeném uvádíme tři barevné režimy: RGB, HSB, CMYK. V programu se musíte soustředit pouze na dva režimy: RGB a HSB. Mají své vlastní výhody a vlastní aplikace zároveň. Pokud jste s ním obeznámeni, uspokojí vaše nejnáročnější požadavky na projektování.

Krok 2: Datový typ pro ukládání barev

Pro zobrazení barev v programu většinou používáme režim RGB. Můžeme však zobrazit všechny barvy pouze ovládáním tří vlastností? V počítači je to takto.

Již jsme se o tom zmínili ve Zpracování, kromě R, G, B můžeme pro barvy určit alfa (průhlednost). Ale alfa nepatří do složky barvy. Jeho existencí je pohodlná směs s barvami vzadu. Proto, aby počítače přesně popisovaly určitý druh barev, musíme ovládat pouze tři klíčové proměnné.

V následujícím textu začneme představovat jakýsi datový typ Color, který se používá hlavně pro ukládání barev. Je podobný dříve uvedeným datovým typům jako boolena, int, float.

Zde mi dovolte nejprve vysvětlit skutečné použití barev. Představte si to: předpokládejme, že pokud můžeme k ukládání určitých dat použít pouze dříve zvládnuté metody, co budeme dělat?

Příklad kódu (9-1):

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

neplatné nastavení () {

velikost (400, 400);

r = 255;

g = 0;

b = 0;

}

void draw () {

pozadí (0);

rectMode (CENTRUM);

fill (r, g, b);

přímý (šířka/2, výška/2, 100, 100);

}

[/cceN_cpp]

Pokud jde o barvy, které mají tendenci barev, musíme vytvořit tři proměnné pro ukládání dat do tří barevných kanálů červené, zelené a modré. Pokud chceme později vyvolat tuto sadu barevných dat, musíme ji zapsat do výplně nebo tahu.

Ale zjistíte, že je příliš obtížné to udělat, protože data jsou vzájemně propojena. Pokud máte nápad zabalit je při používání, bude to pohodlnější. Proto se vytváří barva.

Příklad kódu (9-2):

[cceN_cpp theme = "dawn"] barva myColor;

neplatné nastavení () {

velikost (400, 400);

myColor = barva (255, 0, 0);

}

void draw () {

pozadí (0);

rectMode (CENTRUM);

fill (myColor);

přímý (šířka/2, výška/2, 100, 100);

} [/cceN_cpp]

Stejně jako u datových typů, jako je int, musíme k vytváření proměnných na začátku použít „color myColor“.

V nastavení používáme „myColor = color (255, 0, 0)“k přiřazení hodnoty proměnné myColor. Zatímco funkce color (a, b, c) správně představuje, že tato sada dat vytvořila barevný typ pro import proměnné myColor. Pokud napíšete „myColor = (255, 0, 0)“, program se pokazí.

V posledním použijeme fill () k realizaci operace barevného polstrování. Funkce fill () a stroke () se mohou překrývat. Podle množství a typu parametrů bude mít různé efekty. Import pouze jedné celočíselné proměnné, která ji reprezentuje, je barva pouze ve stupních šedi. Při importu proměnné barvy to znamená, že barevný rozsah bude větší. Můžete také importovat barevnou proměnnou a celočíselnou proměnnou, ve výše uvedeném změnit funkci fill () na fill (myColor, 150), pomocí druhého parametru pak můžete ovládat alfa.

Krok 3: Překrývající se způsob plnění

tah, pozadí mají stejnou překrývající se metodu s výplní.

Přečtěte si hodnotu barvy kanálu

Kromě přiřazení můžete také nezávisle získat hodnotu RGB v barevné proměnné

Příklad kódu (9-3):

[cceN_cpp theme = "dawn"] barva myColor;

neplatné nastavení () {

myColor = barva (255, 125, 0);

println (červená (myColor));

println (zelená (myColor));

println (modrá (myColor));

}

[/cceN_cpp]

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

Funkce red (), green (), blue () se relativně vrátí zpět na hodnotu červeného, zeleného a modrého kanálu v myColor.

Šestnáctkové přiřazení

Kromě použití desetinných čísel k zobrazení RGB můžeme použít také hexadecimální. Desetinný znamená zvýšení 1, když splňuje 10. Zatímco hexadecimální znamená zvýšení 1, když splňuje 16. Jeho relativní vztah k desítkové je: „0 až 9“odpovídá „0 až 9 “,„ A až F “odpovídá„ 10 až 15 “.

Na obrázku níže je znázorněna metoda převodu.

Pokud dostaneme sadu hexadecimálních hodnot, jako je ff7800, nemusíme ji samozřejmě převádět ručně. Program přiřadí hodnoty barevným proměnným přímo. Je to velmi výhodné.

Vidíme, že mnoho barevných karet online přijímá šestnáctkovou metodu zobrazení barev.

Stejně jako designová komunita driblovat budou k uměleckým dílům připojeny palety barev. Pokud vidíte oblíbené zbarvení, můžete jej použít v programu.

Příklad kódu (9-4):

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

neplatné nastavení () {

velikost (400, 400);

rectMode (CENTRUM);

noStroke ();

backColor = #395b71;

colorA = #c4d7fb;

colorB = #f4a7b4;

colorC = #f9e5f0;

}

void draw () {

pozadí (backColor);

výplň (barva A);

přímý (200, 200, 90, 300);

výplň (barvaB);

přímý (100, 200, 90, 300);

fill (colorC);

přímý (300, 200, 90, 300);

} [/cceN_cpp]

Nyní je barva mnohem pohodlnější s lepším efektem než náhodné zadávání hodnot.

Přidejte „#“před hodnotu hexadecimální barvy, poté můžete hodnotu proměnné barvy přiřadit přímo.

Krok 4: Režim HSB

Kromě režimu RGB budeme dále hovořit o režimu HSB. Následující příklad ukazuje způsob přiřazení hodnoty režimu HSB.

Příklad kódu (9-5):

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

velikost (400, 400);

colorMode (HSB);

}

void draw () {

pozadí (0);

rectMode (CENTRUM);

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

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

fill (col);

přímý (i * 20 + 10, výška/2, 10, 300);

}

} [/cceN_cpp]

Abychom ve Processingu mohli přepnout režim HSB, musíme pouze přidat větu colorMode (HSB). Funkce colorMode () slouží k posunu barevného režimu. Pokud do závorky napíšeme „HSB“, bude nastaveno na režim HSB; zatímco píšeme „RGB“, bude posunuto do režimu RGB.

Stojí za pozornost, když píšeme colorMode (HSB), výchozí hodnota HSB ve výchozím nastavení je 255. To je zcela odlišné od maximální hodnoty ve Photoshopu. Ve Photoshopu je maximální hodnota H 360, maximální hodnota S a B je 100. Musíme tedy provést převod.

Pokud je hodnota HSB ve Photoshopu (55, 100, 100), při převodu na Zpracování by tato hodnota měla být (55 /360 × 255, 255, 255), tj. (40, 255, 255).

colorMode () je funkce, kterou lze překrývat. V následujícím textu vám jej podrobně představíme.

Krok 5: Metoda překrývání ColorMode

Pokud tedy nechcete převádět hodnotu HSB ve Photoshopu ručně, můžete napsat „colorMode ()“do „colorMode (HSB, 360, 100, 100)“.

Případ aplikace HSB Mode 1

Protože režim RGB není docela vhodný pro ovládání změn odstínu, v tuto chvíli, pokud chcete ovládat barvy flexibilněji, můžete zvážit režim HSB.

Příklad kódu (9-6):

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

velikost (800, 800);

pozadí (0);

colorMode (HSB);

}

void draw () {

strokeWeight (2);

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

float newX, newY;

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

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

řádek (mouseX, mouseY, newX, newY);

} [/cceN_cpp]

Když řídíme H (odstíny) v tahu, použili jsme millis (). Získá provozní dobu od začátku do současnosti. Takže, stejně jako s časem, který se pohybuje vpřed, hodnota H (odstín) se automaticky zvýší, poté se změní barva.

Jednotka milis () je ms. Když tedy program poběží 1 sekundu, návratová hodnota bude 1 000. To povede k příliš velké hodnotě. Musíme to tedy vydělit 1000,0.

Protože doufáme, že barvy budou představovat periodický oběh, musíme tedy provést modulo operaci, když konečně napíšeme první parametr tahem. Tím se můžete ujistit, že začne znovu od 0, když H (odstín) překročí 255.

Funkce strokeWeight () může ovládat tloušťku čar. Odpovídající jednotka pro parametry v závorce je pixel.

Krok 6: Mode Application Case 2

Příklad kódu (9-7):

[cceN_cpp theme = "dawn"] int num; // množství aktuálně nakreslených čar

float posX_A, posY_A; // Souřadnice bodu A

float posX_B, posY_B; // Souřadnice bodu B

plovoucí úhel A, rychlost A; // Úhel bodu A, rychlost

plovoucí úhel B, rychlost B; // Úhel bodu B, rychlost

plovoucí poloměr X_A, poloměr Y_A; // Poloměr oválu tvořený bodem A na ose X (Y).

float radiusX_B, radiusY_B; // on poloměr oválu tvořený bodem B na ose X (Y).

neplatné nastavení () {

velikost (800, 800);

colorMode (HSB);

pozadí (0);

rychlost A = 0,0009;

rychlost B = 0,003;

poloměr X_A = 300;

poloměr Y_A = 200;

poloměr X_B = 200;

poloměr Y_B = 300;

}

void draw () {

překládat (šířka/2, výška/2);

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

úhel A += rychlost A;

úhel B += rychlost B;

posX_A = cos (úhelA) * poloměrX_A;

posY_A = sin (úhelA) * poloměrY_A;

posX_B = cos (úhelB) * poloměrX_B;

posY_B = sin (úhelB) * poloměrY_B;

zdvih (int (počet/500,0) % 255, 255, 255, 10);

řádek (posX_A, posY_A, posX_B, posY_B);

num ++;

}

} [/cceN_cpp]

Provozní efekt:

Výstupní obrázek:

Vzor, který jste viděli, je vytvářen pohybovou čarou prostřednictvím neustálého překrývání. Stopy dvou koncových bodů čáry jsou dva kruhy samostatně.

Prostřednictvím režimu HSB jsme kontrolovali změny odstínu. S nárůstem čar se odstín vyrovná. Když se masivní poloprůhledné čáry překrývají, vytvoří velmi bohatý barevný přechod.

Do funkce draw jsme vložili smyčku for s cílem použít pro smyčku k ovládání množství čáry. Je to ekvivalentní tomu, že jsme kontrolovali rychlost kreslení. Zvýšení hodnoty rozhodovací podmínky ve smyčce for zvýší kresbu seepd.

Níže je schematický obrázek. Stopy pohybu kruhů můžete vidět jasněji.

Upravte různou rychlost a poloměr, vytvořené vzory se také budou lišit. Zkuste změnit proměnné jako úhel, rychlost, poloměr X, poloměr Y a uvidíte, co se stane.

Krok 7: Režim prolnutí vrstev

Různé barevné režimy, o kterých jsme hovořili dříve, jsou všechny použity pro součásti barevné grafiky. Kromě použití této metody k ovládání barev může Processing používat různé režimy prolnutí vrstev, jako je Photoshop.

Otevřete okno vrstvy v PS, kliknutím vyberte režim prolnutí vrstev, poté vidíme tyto možnosti.

Jedná se o existující režimy vrstev v PS. Jednoduše řečeno, režim prolnutí lze považovat za jakýsi režim výpočtu barev. Rozhodne, která barva bude vytvořena jako poslední, když „barva A“plus „barva B“. Zde „barva A“znamená barvu za aktuální vrstvou (také nazývanou základní barva). „Barva B“znamená barvu aktuální vrstvy (také nazývanou smíšená barva). Program vypočítá, aby získal barvu C podle hodnoty RGB a alfa barvy A a B. Zobrazí se na obrazovce jako výsledná barva.

Režim různých vrstev znamená různé metody výpočtu. V další polovině této série článků si to podrobně vysvětlíme. Nyní musíme pouze znát jeho použití.

Podívejme se na příklad použití režimu Přidat v programu.

Příklad kódu (9-8):

[cceN_cpp theme = "dawn"] PImage obrázek1, obrázek2;

neplatné nastavení () {

velikost (800, 400);

image1 = loadImage ("1.jpg");

image2 = loadImage ("2.jpg");

}

void draw () {

pozadí (0);

blendMode (ADD);

obrázek (obrázek1, 0, 0, 400, 400);

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

}

[/cceN_cpp]

Výsledek:

Funkce blendMode () se používá k nastavení režimu prolnutí grafiky. Vyplňujeme ADD za prostředky, které jsme nastavili Přidat režim.

V programu neexistuje koncept vrstvy. Ale protože existuje kreslící sekvence grafických komponent, při míchání obrázků je obrázek 1 považován za základní barvu a obrázek 2 za smíšenou barvu.

Režim ADD patří do „Brighten Class“. Po jeho použití získáte rozjasněný efekt.

Níže je režim míchání, který lze použít ve zpracování.

Krok 8: Zpracování režimu míchání

Můžeme zkusit změnit jiný režim prolnutí, abychom viděli účinek.

Když příklad (9-8) přijal režim překrývání (pozadí by mělo být nastaveno na bílou):

Po použití režimu Substract (pozadí by mělo být nastaveno na bílou):

Krok 9: Pouzdro pro režim míchání vrstev

Režim prolnutí lze použít nejen pro obrázky, ale také pro všechny grafické komponenty na plátně. Níže je uvedeno použití o režimu přidání. Lze jej použít k analogii různých světelných efektů.

Příklad kódu (9-9):

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

velikost (400, 400);

}

void draw () {

pozadí (0);

blendMode (ADD);

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

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

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

vyplnit (0, 50, 0);

}jiný{

výplň (50);

}

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

}

}

[/cceN_cpp]

Zde jsme náhodnou funkcí smíchali zelenou barvu a bílou barvu, které již nesly alfa, do částic. Můžeme použít myš k ovládání množství kruhu a sledovat efekt překrývání.

ADD a SCREEN jsou dost podobné. Přestože je rozjasnění stejné, existují jemné rozdíly. Můžete jej nahradit SCREEN a provést srovnání. Po překrytí bude čistota a jas ADD vyšší. Je vhodný pro analogii světelného efektu.

Pokud jde o barvu, zde jsme v této kapitole dospěli ke konci. Pro tento „jazyk“jste již zvládli dostatek slovníků. Nyní si pospěšte, abyste si pomocí kódu užili svět tvarů a barev!

Krok 10: Zdroj

Tento článek pochází z:

Pokud máte nějaké dotazy, můžete kontaktovat ： [email protected].