Įdomios apdorojimo programavimo gairės dizaineriui-spalvų valdymas: 10 žingsnių

2024 Autorius: John Day | [email protected]. Paskutinį kartą keistas: 2024-01-30 10:44

Ankstesniuose skyriuose mes daugiau kalbėjome apie tai, kaip naudoti kodą formavimui, o ne žinių apie spalvas. Šiame skyriuje mes išsamiau išnagrinėsime šį žinių aspektą.

1 žingsnis: Pagrindinės žinios apie spalvą

Spalva tam tikru aspektu pranoko žmogaus intuiciją. Įvairias gražias spalvas, kurias matėme plika akimi, iš tikrųjų sudarė tie patys komponentai. Tik su trimis šviesiomis raudonos, žalios ir mėlynos spalvos spalvomis mes galime sukurti visas spalvas, kurias mišinys gali matyti žmogaus akimis.

Šiuo principu kuriami šiuo metu matomi mobiliųjų telefonų ir kompiuterių ekranai. Raudona, žalia ir mėlyna spalvos vadinamos trimis originaliomis šviesos spalvomis. Per trijų elementų santykį galime užtikrinti tam tikrą spalvą. Šis aprašymo metodas dar vadinamas RGB režimu. Tarp jų raudona yra R, žalia - G, o mėlyna - B.

Išskyrus RGB režimą, yra dar vienas režimas, vadinamas CMYK režimu. Paprastai jis derinamas su spausdinimu. Spausdinant taip pat yra trys originalios spalvos. Tačiau jis skiriasi nuo trijų originalių šviesos spalvų. Jie yra raudonos, geltonos ir mėlynos spalvos atskirai. Tarp jų C yra žalsvai mėlyna, M - rausvai raudona, o Y - geltona. Teoriškai, tik CMY, galime sumaišyti daugumą spalvų. Tačiau dėl žaliavų gamybos technikos vargu ar galime pasiekti, kad CMY sodrumas pasiektų 100%. Jei sumaišysime šias tris spalvas, negalėsime gauti pakankamai tamsios spalvos. Taigi yra papildomas K, skirtas juodam spausdinimo rašalui, kaip spausdinimo priedas.

Kalbant apie RGB ir CMYK, jūs turite tik žinoti, kad yra akivaizdžiausias gamtos skirtumas. RGB yra plius spalvų režimas, kuris padidina ryškumą maišant daugiau spalvų. Nors CMYK yra minuso spalvų režimas, kuris padidina tamsą maišant daugiau spalvų. Žemiau esančioje nuotraukoje galime vizualiai pamatyti abiejų režimų panašumus ir skirtumus. Kairėje nuotraukoje galime įsivaizduoti, kad tai tamsus namas, kuriame įjungtos trijų skirtingų spalvų žibintuvėliai. Paveikslėlis dešinėje, jį galime laikyti akvarelės popieriumi, persidengiančiu su trimis raudonos, žalios ir mėlynos spalvos pigmentais.

Jei norite giliau sužinoti santykinį ryšį tarp skirtingų spalvų režimų, galite atidaryti „Photoshop“ir pasirinkti spalvų parinkiklį. Tuomet intuityviai galite matyti tos pačios spalvos spalvų vertes skirtinguose spalvų režimuose.

Galiausiai norime pristatyti jums dar vieną įprastą spalvų režimą - HSB. HSB neturi „originalios spalvos“sąvokos. Jis klasifikuojamas pagal žmogaus akių jausmus dėl spalvų. H reiškia atspalvį, S - sodrumą, o B - ryškumą.

Atspalvis atspindi spalvų tendenciją. Kiekviena spalva turi tam tikrą spalvų tendenciją tik tuo atveju, jei ji nėra balta, balta ar pilka. Gausiausia spalvų perėjimo sritis spalvų rinkiklyje naudojama atspalviui nurodyti. Jo vertė PS svyruoja nuo 0 iki 360.

Sodrumas reiškia spalvos grynumą. Didesnis grynumas suteikia ryškesnių spalvų. Jo vertė PS svyruoja nuo 0 iki 100.

Ryškumas reiškia spalvų šviesumo laipsnį, svyruojantį nuo 0 iki 100.

Palyginti su RGB režimu, trys HSB matmenys daug labiau atitinka spalvų jausmą žmogaus akyse. Pažvelkite tik į HSB vertes, paprastai galite įsivaizduoti, kokia tai spalva.

Tos pačios spalvos spalvos vertė RGB režimu yra (255, 153, 71), o HSB - 27 (72, 100).

Sunku spręsti, kaip jis atrodys sumaišius tris originalias spalvas, jei pažvelgsime tik į RGB. Tačiau HSB yra kitoks. Jums tereikia susipažinti su tokių spalvų atspalviais, kaip raudona yra 0, oranžinė - 30, o geltona - 60, tada žinosite, kad tai bus palyginti prisotinta oranžinė spalva, pasižyminti dideliu ryškumu ir šiek tiek artima raudonai, kai H yra 27.

Toliau mes atitiksime tris abiejų režimų matmenis į x, y, x erdvėje ir palyginsime kubą, kad galėtume palyginti.

RGB ir HSB yra tik skirtingi spalvų apibūdinimo metodai. Adresą galime laikyti metafora. Tarkime, jei norite kitiems žmonėms pasakyti apie Imperatoriškųjų rūmų padėtį, galite pasakyti, kad jie yra Jingshan Front Street 4, Dongcheng Area, Pekinas. Arba galite pasakyti, kad yra 15 sekundžių, 55 minučių, 39 laipsnių šiaurės platumos ir 26 sekundžių, 23 minučių, 116 laipsnių Rytų ilgumos. HSB aprašymo metodas yra panašus į pirmąjį. Jei esate susipažinęs su santykiniu plotu, paprastai galite žinoti adreso vietą. Nors RGB gali būti tikslesnis, tačiau jis yra labai abstraktus.

HSB režimas buvo sukurtas siekiant padėti mums patogiau apibūdinti spalvą. Norėdami ekrane parodyti tam tikros spalvos spalvą, pirmiausia turime ją paversti RGB režimu.

Anksčiau pristatome tris spalvų režimus: RGB, HSB, CMYK. Programoje turite sutelkti dėmesį tik į du režimus: RGB ir HSB. Jie turi savo privalumų ir savo taikymo tuo pačiu metu. Jei esate su juo susipažinęs, jis atitiks labiausiai jūsų projektavimo reikalavimus.

2 veiksmas: duomenų tipas spalvoms saugoti

Norėdami parodyti spalvas programoje, dažniausiai mes naudojame RGB režimą anksčiau. Tačiau, tik valdydami tris savybes, galime parodyti bet kokias spalvas? Kompiuteryje tai yra taip.

Anksčiau mes minėjome, kad apdorojant, išskyrus R, G, B, spalvoms galime skirti alfa (skaidrumą). Tačiau alfa nepriklauso spalvos komponentui. Jo egzistavimas yra patogus maišymas su spalvomis. Taigi, norint, kad kompiuteriai tiksliai apibūdintų tam tikrą spalvų tipą, turime valdyti tik tris pagrindinius kintamuosius.

Toliau mes pradedame pristatyti tam tikrą duomenų tipą „Color“, kuris daugiausia naudojamas spalvoms saugoti. Tai panašu į anksčiau nurodytus duomenų tipus, tokius kaip boolena, int, float.

Čia leiskite man toliau paaiškinti faktinį spalvų naudojimą. Įsivaizduokite tai: tarkime, ką daryti, jei galime naudoti tik anksčiau įvaldytus metodus tam tikriems duomenims saugoti?

Kodo pavyzdys (9-1):

[cceN_cpp tema = "aušra"] int r, g, b;

void setup () {

dydis (400, 400);

r = 255;

g = 0;

b = 0;

}

void draw () {

fonas (0);

rectMode (CENTRAS);

užpildyti (r, g, b);

tiesus (plotis/2, aukštis/2, 100, 100);

}

[/cceN_cpp]

Kalbant apie spalvas, turinčias tendenciją spalvoms, turime sukurti tris kintamuosius, kad duomenys būtų saugomi trijuose atitinkamai raudonos, žalios ir mėlynos spalvų kanaluose. Vėliau, jei norime iškviesti šį spalvų duomenų rinkinį, turime jį įrašyti į užpildymą arba brūkšnelį.

Tačiau pastebėsite, kad tai padaryti yra per daug varginanti, nes duomenys yra tarpusavyje susiję. Jei turite idėją juos supakuoti, tai bus patogiau. Todėl sukuriama spalva.

Kodo pavyzdys (9-2):

[cceN_cpp theme = "aušra"] spalva myColor;

void setup () {

dydis (400, 400);

myColor = spalva (255, 0, 0);

}

void draw () {

fonas (0);

rectMode (CENTRAS);

užpildyti (myColor);

tiesus (plotis/2, aukštis/2, 100, 100);

} [/cceN_cpp]

Kaip ir su duomenų tipais, tokiais kaip int, pradžioje turime naudoti „color myColor“, kad sukurtume kintamuosius.

Sąrankoje mes naudojame „myColor = color (255, 0, 0)“, kad priskirtume reikšmę kintamajam myColor. Nors funkcijos spalva (a, b, c) teisingai rodo, kad šis duomenų rinkinys suformavo spalvos tipą, kad būtų galima importuoti kintamąjį myColor. Jei parašysite „myColor = (255, 0, 0)“, programa suklysta.

Paskutiniame mes naudojame užpildymą (), kad suprastume spalvų užpildymo veikimą. Funkcijos užpildymas () ir smūgis () leidžia sutapti. Atsižvelgiant į parametrų kiekį ir tipą, jis turės skirtingą poveikį. Importuojamas tik vienas sveiko skaičiaus kintamasis, kuris nurodo, kad tai tik pilkų atspalvių spalva. Importuojant kintamą spalvą, tai reiškia, kad spalvų gama bus didesnė. Taip pat galite importuoti spalvinį kintamąjį ir sveiką skaičių kintamąjį, pakeisti funkciją fill (), nurodytą aukščiau, į „fill“(„myColor“, 150), tada galite valdyti alfa naudodami antrąjį parametrą.

3 žingsnis: persidengiantis užpildymo metodas

smūgis, fonas turi tą patį persidengimo metodą su užpildymu.

Perskaitykite kanalo spalvos vertę

Be užduočių, taip pat galite savarankiškai gauti RGB reikšmę spalvų kintamajame

Kodo pavyzdys (9-3):

[cceN_cpp theme = "aušra"] spalva myColor;

void setup () {

myColor = spalva (255, 125, 0);

println (raudona („myColor“));

println (žalia („myColor“));

println (mėlyna („myColor“));

}

[/cceN_cpp]

Rezultatas konsolėje: 255, 125, 0.

Funkcija raudona (), žalia (), mėlyna () santykinai grįš į raudoną, žalią ir mėlyną kanalo vertę „myColor“.

Šešioliktainis priskyrimas

Išskyrus tai, kad RGB rodomi dešimtainiai skaičiai, mes taip pat galime naudoti šešioliktainį skaičių. Dešimtainis reiškia padidėjimą 1, kai jis atitinka 10. O šešioliktainis reiškia padidinti 1, kai jis atitinka 16. Jo santykinis santykis su dešimtainiu yra: „nuo 0 iki 9“atitinka „0“iki 9 “,„ nuo A iki F “atitinka„ nuo 10 iki 15 “.

Žemiau esančiame paveikslėlyje yra konvertavimo metodo iliustracija.

Žinoma, jei gauname šešioliktainių verčių rinkinį, pvz., Ff7800, mums nereikia jo konvertuoti rankiniu būdu. Programa tiesiogiai priskirs spalvų kintamiesiems reikšmes. Tai labai patogu.

Matome, kad daugelis spalvų kortelių internete taiko šešioliktainį spalvų rodymo metodą.

Kaip ir dizaino bendruomenės driblas, meno kūriniai bus pritvirtinti spalvų paletėmis. Jei matote mėgstamą spalvą, galite ją pritaikyti programoje.

Kodo pavyzdys (9-4):

[cceN_cpp theme = "aušra"] color backColor, colorA, colorB, colorC;

void setup () {

dydis (400, 400);

rectMode (CENTRAS);

noStroke ();

backColor = #395b71;

spalvaA = #c4d7fb;

spalvaB = #f4a7b4;

spalvaC = #f9e5f0;

}

void draw () {

fonas (backColor);

užpildyti (spalva A);

tiesus (200, 200, 90, 300);

užpildyti (spalvaB);

tiesus (100, 200, 90, 300);

užpildymas (spalvaC);

tiesus (300, 200, 90, 300);

} [/cceN_cpp]

Dabar spalva yra daug patogesnė ir turi geresnį efektą nei atsitiktine tvarka įvestos vertės.

Prieš šešioliktainę spalvų vertę pridėkite „#“, tada galite tiesiogiai priskirti reikšmę kintamai spalvai.

4 žingsnis: HSB režimas

Be RGB režimo, toliau kalbėsime apie HSB režimą. Toliau parodytas HSB režimo reikšmių priskyrimo metodas.

Kodo pavyzdys (9-5):

[cceN_cpp theme = "dawn"] negaliojanti sąranka () {

dydis (400, 400);

colorMode (HSB);

}

void draw () {

fonas (0);

rectMode (CENTRAS);

už (int i = 0; i <20; i ++) {

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

užpildyti (col);

tiesus (i * 20 + 10, aukštis/2, 10, 300);

}

} [/cceN_cpp]

Apdorodami, norėdami perjungti HSB režimą, turime pridėti tik „colorMode“(HSB) sakinį. Funkcija colorMode () naudojama pakeisti spalvų režimą. Jei skliausteliuose įrašysime „HSB“, jis bus nustatytas į HSB režimą; kol rašysime „RGB“, jis bus perkeltas į RGB režimą.

Verta atkreipti dėmesį, kai rašome colorMode (HSB), numatytoji maksimali HSB vertė yra 255. Tai visiškai skiriasi nuo didžiausios „Photoshop“vertės. „Photoshop“programoje maksimali H vertė yra 360, maksimali S ir B vertė yra 100. Taigi turime atlikti konvertavimą.

Jei „Photoshop“HSB reikšmė yra (55, 100, 100), konvertuojant į apdorojimą, ši vertė turėtų būti (55/360 × 255, 255, 255), t. Y. (40, 255, 255).

colorMode () yra funkcija, kurią galima sutapti. Toliau mes jums tai išsamiai pristatysime.

5 žingsnis: „ColorMode“sutapimo metodas

Todėl, jei nenorite konvertuoti HSB vertės „Photoshop“rankiniu būdu, galite rašyti „colorMode ()“į „colorMode (HSB, 360, 100, 100)“.

HSB režimo taikymo atvejis 1

Kadangi RGB režimas nėra labai patogus valdyti atspalvių pokyčius, šiuo metu, jei norite lanksčiau valdyti spalvas, galite apsvarstyti HSB režimą.

Kodo pavyzdys (9-6):

[cceN_cpp theme = "dawn"] negaliojanti sąranka () {

dydis (800, 800);

fonas (0);

colorMode (HSB);

}

void draw () {

smūgisSvoris (2);

smūgis (int (milis ()/1000,0 * 10)%255, 255, 255);

float newX, newY;

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

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

eilutė (mouseX, mouseY, newX, newY);

} [/cceN_cpp]

Kai insulto metu valdome H (atspalvius), mes panaudojome milis (). Jis gaus operacijos laiką nuo pradžios iki dabarties. Taigi, kaip ir laikui bėgant, H (atspalvis) vertė automatiškai padidės, tada pasikeis spalva.

Millis () vienetas yra ms. Taigi, kai programa veikia 1 sekundę, grąžinimo vertė bus 1000. Dėl to bus per didelė vertė. Taigi mes turime jį padalyti iš 1000,0.

Kadangi tikimės, kad spalvos pateiks periodinę cirkuliaciją, todėl mes turime atlikti modulio operaciją, kai pagaliau užrašome pirmąjį parametrą. Tai gali užtikrinti, kad jis vėl prasidės nuo 0, kai H (atspalvis) viršys 255.

Funkcijos eiga Svoris () gali valdyti linijų storį. Atitinkamas skliausteliuose esančių parametrų vienetas yra pikselis.

6 veiksmas: režimo taikymo atvejis 2

Kodo pavyzdys (9-7):

[cceN_cpp theme = "aušra"] int num; // šiuo metu nubrėžtų linijų skaičius

plūdė posX_A, posY_A; // Taško A koordinatė

plūdė posX_B, posY_B; // Taško B koordinatė

plūdės kampasA, greitisA; // Taško A kampas, greitis

plūdės kampasB, greitisB; // Taško B kampas, greitis

plūdės spindulysX_A, spindulysY_A; // Ovalo spindulys, suformuotas taško A X (Y) ašyje.

plūdės spindulysX_B, spindulysY_B; // jis ovalo spindulys, suformuotas taško B X (Y) ašyje.

void setup () {

dydis (800, 800);

colorMode (HSB);

fonas (0);

greitisA = 0,0009;

greitisB = 0,003;

spindulysX_A = 300;

spindulysY_A = 200;

spindulysX_B = 200;

spindulysY_B = 300;

}

void draw () {

versti (plotis/2, aukštis/2);

už (int i = 0; i <50; i ++) {

kampasA += greitisA;

kampasB += greitisB;

posX_A = cos (kampasA) * spindulysX_A;

posY_A = sin (kampasA) * spindulysY_A;

posX_B = cos (kampasB) * spindulysX_B;

posY_B = sin (kampasB) * spindulysY_B;

smūgis (int (skaičius/500,0) % 255, 255, 255, 10);

linija (posX_A, posY_A, posX_B, posY_B);

numeris ++;

}

} [/cceN_cpp]

Operacijos efektas:

Išvesties paveikslėlis:

Modelį, kurį matėte, sukuria judesio linija, nuolat persidengianti. Dviejų galinių linijos taškų pėdsakai yra du apskritimai atskirai.

Naudodami HSB režimą, mes valdėme atspalvių pokyčius. Padidėjus linijoms, atspalvis išnyks. Kai masyvios pusiau skaidrios linijos sutampa, tai sukuria labai sodrų spalvų gradientą.

Mes įterpėme ciklą į funkcijų brėžinį, kurio tikslas yra naudoti ciklą, kad būtų galima kontroliuoti linijos kiekį. Tai prilygsta tam, kad mes valdome piešimo greitį. Padidinus vertinimo sąlygos reikšmę cikle, padidės piešinys.

Žemiau yra schema. Aiškiau matote apskritimų judėjimo pėdsakus.

Sureguliuokite skirtingą greitį ir spindulį, taip pat bus skirtingi modeliai. Pabandykite pakeisti tokius kintamuosius kaip kampas, greitis, spindulysX, spindulysY ir pažiūrėkite, kas atsitiks.

7 žingsnis: sluoksnių maišymo režimas

Įvairūs spalvų režimai, apie kuriuos kalbėjome anksčiau, yra naudojami spalvoti grafikos komponentus. Išskyrus šio metodo naudojimą spalvai valdyti, apdorojant galima naudoti įvairių sluoksnių maišymo režimus, pvz., „Photoshop“.

Atidarykite sluoksnio langą PS, spustelėkite, kad pasirinktumėte sluoksnių maišymo režimą, tada galime pamatyti šias parinktis.

Tai egzistuoja PS sluoksnių režimai. Paprasčiau tariant, maišymo režimas gali būti laikomas spalvų skaičiavimo režimu. Ji nuspręs, kuri spalva bus sukurta paskutinėje, kai „spalva A“ir „spalva B“. Čia „spalva A“reiškia spalvą, esančią už dabartinio sluoksnio (dar vadinamą pagrindine spalva). „B spalva“reiškia dabartinio sluoksnio spalvą (dar vadinamą mišria spalva). Programa apskaičiuos, kad gautų C spalvą pagal A ir B spalvų RGB reikšmę ir alfa. Ji bus rodoma ekrane kaip spalvos spalva.

Skirtingas sluoksnio režimas reiškia skirtingus skaičiavimo metodus. Kitoje šios straipsnių serijos dalyje mes išsamiai ją paaiškinsime. Dabar turime tik žinoti jo naudojimą.

Pažvelkime į pridėjimo režimo naudojimo programoje pavyzdį.

Kodo pavyzdys (9-8):

[cceN_cpp theme = "aušra"] PImage image1, image2;

void setup () {

dydis (800, 400);

image1 = loadImage ("1.jpg");

image2 = loadImage ("2.jpg");

}

void draw () {

fonas (0);

blendMode (ADD);

vaizdas (vaizdas 1, 0, 0, 400, 400);

vaizdas (image2, mouseX, mouseY, 400, 400);

}

[/cceN_cpp]

Rezultatas:

Funkcija blendMode () naudojama grafikos maišymo režimui nustatyti. Užpildome ADD už tai, kad nustatėme Pridėjimo režimą.

Programoje nėra sluoksnio sąvokos. Tačiau kadangi grafinių komponentų piešimo seka yra tokia, maišant paveikslėlius, 1 vaizdas laikomas pagrindine spalva, o 2 vaizdas - mišria spalva.

ADD režimas priklauso „Brighten Class“. Panaudoję gausite ryškesnį efektą.

Žemiau pateikiamas maišymo režimas, kurį galima naudoti apdorojant.

8 veiksmas: maišymo režimo apdorojimas

Norėdami pamatyti efektą, galime pabandyti pakeisti skirtingą maišymo režimą.

Kai pavyzdys (9–8) pritaikė sutapimo režimą (fonas turi būti nustatytas į baltą):

Panaudojus Substract Mode (fonas turi būti nustatytas į baltą):

9 veiksmas: sluoksnių maišymo režimo taikymo atvejis

Maišymo režimas gali būti ne tik naudojamas nuotraukoms, bet ir tinka visiems drobės grafiniams komponentams. Žemiau buvo parodyta, kaip naudoti pridėjimo režimą. Jis gali būti naudojamas įvairiems apšvietimo efektams analogizuoti.

Kodo pavyzdys (9-9):

[cceN_cpp theme = "dawn"] negaliojanti sąranka () {

dydis (400, 400);

}

void draw () {

fonas (0);

blendMode (ADD);

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

už (int i = 0; i <num; i ++) {

jei (atsitiktinis (1) <0,5) {

užpildyti (0, 50, 0);

}Kitas{

užpildyti (50);

}

elipsė (atsitiktinė (50, plotis - 50), atsitiktinė (50, aukštis - 50), 20, 20);

}

}

[/cceN_cpp]

Čia per atsitiktinę funkciją į daleles sumaišėme žalią ir baltą spalvas, kurios jau turėjo alfa. Mes galime naudoti pelę, norėdami valdyti apskritimo kiekį ir stebėti sutampančią efektą.

ADD ir SCREEN yra gana panašūs. Nors šviesinti yra tas pats, yra subtilių skirtumų. Galite pakeisti jį į EKRANĄ ir palyginti. Po persidengimo ADD grynumas ir ryškumas bus didesnis. Jis tinka apšvietimo efektui analogizuoti.

Kalbant apie spalvas, čia mes baigėme šį skyrių. Dėl šios „kalbos“jau įvaldėte pakankamai laisvų vietų. Dabar paskubėkite naudoti kodą, kad galėtumėte mėgautis formos ir spalvų pasauliu!

10 žingsnis: šaltinis

Šis straipsnis yra iš:

Jei turite klausimų, galite kreiptis ： [email protected].