Huvitavad töötlemisprogrammeerimise juhised disainerile-värvikontroll: 10 sammu

2024 Autor: John Day | [email protected]. Viimati modifitseeritud: 2024-01-30 08:46

Varasemates peatükkides oleme rääkinud rohkem sellest, kuidas kasutada koodi kujundamisel värvide teadmiste asemel. Selles peatükis uurime seda teadmiste aspekti sügavamalt.

Samm: põhiteadmised värvi kohta

Värv on teatud aspektides ületanud inimese intuitsiooni. Erinevad ilusad värvid, mida palja silmaga nägime, koosnesid tegelikult samadest komponentidest. Ainult kolme heleda värvi - punase, rohelise ja sinise - abil saame luua kõik värvid, mida inimsilmad läbi segu näevad.

Mobiiliekraanid ja arvutiekraanid, mida praegu näete, on loodud selle põhimõtte alusel. Punast, rohelist ja sinist nimetatakse kolmeks originaalseks valguse värviks. Kolme elemendi suhte kaudu saame kindla värvi tagada. Seda kirjeldusmeetodit nimetatakse ka RGB -režiimiks. Nende hulgas on punane R, roheline on G ja sinine on B.

Välja arvatud RGB -režiim, on veel üks režiim, mida nimetatakse CMYK -režiimiks. Tavaliselt kombineeritakse seda trükkimisega. Trükkimisel on ka kolm originaalvärvi. Kuid see erineb kolme originaalse valguse värvist. Need on eraldi punased, kollased ja sinised. Nende hulgas on C tsüaan, M on magenta ja Y on kollane. Teoreetiliselt saame ainult CMY abil enamiku värve välja segada. Kuid tooraine tootmistehnoloogia tõttu ei suuda me CMY küllastust 100%saavutada. Kui me segame neid kolme värvi, ei saa me piisavalt tumedat värvi. Seega on trükkimise lisana täiendav K, mis on mõeldud musta trükivärvi jaoks.

RGB ja CMYK osas peate teadma, et looduses on kõige ilmsem erinevus. RGB on pluss värvirežiim, mis suurendab heledust, segades rohkem värve. Kuigi CMYK on miinusvärvirežiim, mis suurendab pimedust, segades rohkem värve. Alloleval pildil näeme visuaalselt kahe režiimi sarnasusi ja erinevusi. Vasakul pildil võime kujutleda pimedat maja, kus on sisse lülitatud kolme erinevat värvi taskulampi. Pilt paremal, võime seda pidada akvarellpaberiks pärast kolme punase, rohelise ja sinise pigmendi kattumist.

Kui soovite sügavamalt teada selle suhtelisi suhteid erinevate värvirežiimide vahel, saate oma Photoshopi avada ja valida värvivalija. Siis näete intuitiivselt sama värvi värviväärtusi erinevates värvirežiimides.

Viimasena soovime tutvustada teile veel üht levinud värvirežiimi - HSB. HSB -l puudub mõiste „originaalvärv”. See on klassifitseeritud vastavalt inimese silmade tundele värvide suhtes. H tähistab tooni, S küllastust ja B heledust.

Toon tähistab värvi tendentsi. Igal värvil on teatud tüüpi kalduvus ainult siis, kui see pole valge, hall või hall. Tooni tähistamiseks kasutatakse värvivalija kõige rikkalikumat värvi üleminekuala. Selle väärtus PS -is on vahemikus 0 kuni 360.

Küllastus tähendab värvi puhtust. Suurem puhtus toob esile erksamad värvid. Selle väärtus PS -s on vahemikus 0 kuni 100.

Heledus tähendab värvi heledust, vahemikus 0 kuni 100.

Võrreldes RGB -režiimiga on HSB kolm mõõdet palju paremini kooskõlas inimese silmade tundega värvide osas. Vaadake ainult HSB väärtusi, võite üldiselt ette kujutada, mis värvi see on.

Sama värvi puhul on värviväärtus RGB -režiimis (255, 153, 71), HSB -s aga (27, 72, 100).

Kui me vaatame ainult RGB -d, on raske otsustada, milline see välja näeb pärast kolme originaalvärvi segamist. Kuid HSB on erinev. Peate tutvuma ainult selliste värvitoonidega nagu punane on 0, oranž on 30 ja kollane on 60, siis teate, et see on suhteliselt küllastunud oranž, suure heledusega ja pisut punasele lähedane, kui H on 27.

Järgmisena vastame kahe režiimi kolmele mõõtmele ruumis x, y, x ja võrdluse tegemiseks joonistame värvikuupi.

RGB ja HSB on lihtsalt erinevad meetodid värvide kirjeldamiseks. Võime võtta aadressi metafoorina. Oletame, et kui soovite teistele inimestele rääkida keiserliku palee asukohast, võite öelda, et see asub Pekingis Dongchengi piirkonnas Jingshani tänava nr 4 juures. Või võite öelda, et see on 15 sekundi, 55 minuti, 39 kraadi põhjalaiuskraadil ja 26 sekundi, 23 minuti, 116 kraadi idapikkusel. HSB kirjeldusmeetod on sarnane esimesele. Kui olete suhtelise piirkonnaga tuttav, saate üldjuhul teada aadressi asukoha. Kuigi RGB võib olla täpsem, kuid see on väga abstraktne.

HSB -režiimi eesmärk oli aidata meil värvi mugavamalt kirjeldada. Teatud tüüpi värvi kuvamiseks ekraanil peame lõpuks selle kõigepealt RGB -režiimi teisendama.

Eespool kirjeldame kolme värvirežiimi: RGB, HSB, CMYK. Programmis peate keskenduma ainult kahele režiimile: RGB ja HSB. Neil on oma eelised ja rakendused samal ajal. Kui olete sellega tuttav, vastab see teie kõige projekteerimisnõuetele.

2. toiming: andmetüüp värvide salvestamiseks

Värvide näitamiseks programmis kasutame enamasti RGB -režiimi. Kuid ainult kolme omadust kontrollides saame kuvada mis tahes värve? Arvutis on see nii.

Oleme varem maininud, et töötlemisel, välja arvatud R, G, B, saame värvidele määrata alfa (läbipaistvuse). Kuid alfa ei kuulu värvikomponenti. Selle olemasolu on mugav segamine taga olevate värvidega. Seega, et arvutid saaksid teatud tüüpi värve täpselt kirjeldada, peame kontrollima ainult kolme peamist muutujat.

Järgnevalt hakkame tutvustama omamoodi andmetüüpi Värv, mida kasutatakse peamiselt värvide salvestamiseks. See on sarnane varem viidatud andmetüüpidega, nagu boolena, int, float.

Siinkohal lubage mul kõigepealt selgitada värvide tegelikku kasutamist. Kujutage ette: oletame, et kui me saame teatud andmete salvestamiseks kasutada ainult eelnevalt omandatud meetodeid, siis mida me peaksime tegema?

Koodinäide (9-1):

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

tühine seadistus () {

suurus (400, 400);

r = 255;

g = 0;

b = 0;

}

tühine viik () {

taust (0);

rectMode (KESK);

täitke (r, g, b);

sirge (laius/2, kõrgus/2, 100, 100);

}

[/cceN_cpp]

Mis puudutab värve, millel on värvitendents, siis peame looma kolm muutujat andmete salvestamiseks vastavalt kolmes punases, rohelises ja sinises värvikanalis. Hiljem, kui tahame seda värviandmete kogumit esile kutsuda, peame selle täitma või lööma.

Kuid leiate, et seda on liiga tülikas teha, kuna andmed on omavahel seotud. Kui teil on mõte need kasutusse pakkida, on see mugavam. Seetõttu luuakse värv.

Koodinäide (9-2):

[cceN_cpp theme = "dawn"] värvi myColor;

tühine seadistus () {

suurus (400, 400);

myColor = värv (255, 0, 0);

}

tühine viik () {

taust (0);

rectMode (KESK);

täida (myColor);

sirge (laius/2, kõrgus/2, 100, 100);

} [/cceN_cpp]

Sama tüüpi andmetüüpidega nagu int, peame muutujate loomiseks kasutama alguses värvi “myColor”.

Seadistamisel kasutame muutujale myColor väärtuse määramiseks väärtust „myColor = color (255, 0, 0)”. Kuigi funktsiooni värv (a, b, c) näitab õigesti, et see andmekogum on moodustanud värvitüübi muutuja myColor importimiseks. Kui kirjutate “myColor = (255, 0, 0)”, läheb programm valesti.

Viimasena kasutame värvi täitmise toimingu teostamiseks täitmist (). Funktsiooni täitmine () ja käik () võimaldavad mõlemad kattuda. Sõltuvalt parameetrite kogusest ja tüübist on sellel erinev mõju. Ainult ühe täisarvulise muutuja importimine, mis tähistab seda, on ainult halltoonides värv. Muutuva värvi importimisel tähendab see, et värvivalik on suurem. Samuti saate importida värvimuutuja ja täisarvulise muutuja, muuta ülaltoodud funktsiooni fill () täitmiseks (myColor, 150), seejärel saate teise parameetriga alfa juhtida.

3. samm: kattuv täitmismeetod

insult, taustal on sama kattuv meetod täitmisega.

Lugege kanali värvi väärtust

Lisaks ülesannetele saate RGB väärtuse iseseisvalt hankida ka värvimuutujast

Koodinäide (9-3):

[cceN_cpp theme = "dawn"] värvi myColor;

tühine seadistus () {

myColor = värv (255, 125, 0);

println (punane (myColor));

println (roheline (myColor));

println (sinine (myColor));

}

[/cceN_cpp]

Tulemus konsoolis: 255, 125, 0.

Funktsioon punane (), roheline (), sinine () naaseb suhteliselt tagasi punase, rohelise ja sinise kanali väärtusele myColoris.

Kuueteistkümnendülesanne

Välja arvatud kümnendarvude kasutamine RGB näitamiseks, võime kasutada ka kuueteistkümnendikku. Kümnendik tähendab arvu 1 suurendamist, kui see on 10. Kui kuueteistkümnendarv tähendab, et see suurendab arvu 1, kui see vastab 16. Selle suhteline suhe kümnendkohaga on: „0 kuni 9“vastab väärtusele „0“kuni 9”,“A kuni F”vastavad“10 kuni 15”.

Alloleval pildil on teisendusmeetodi illustratsioon.

Muidugi, kui saame kuueteistkümnendarvude komplekti, näiteks ff7800, ei pea me seda käsitsi teisendama. Programm määrab värvimuutujatele väärtused otse. See on väga mugav.

Näeme, et paljud võrgukaardid on värvide kuvamiseks kasutusel kuueteistkümnendsüsteemis.

Sarnaselt disainikogukonna dribblele kinnitatakse kunstiteostele värvipalett. Kui näete lemmikvärvi, saate selle programmi rakendada.

Koodinäide (9-4):

[cceN_cpp theme = "dawn"] värv tagasiVärv, värvA, värvB, värvC;

tühine seadistus () {

suurus (400, 400);

rectMode (KESK);

noStroke ();

backColor = #395b71;

värvA = #c4d7fb;

värvB = #f4a7b4;

värvC = #f9e5f0;

}

tühine viik () {

taust (backColor);

täitma (värvA);

otse (200, 200, 90, 300);

täitma (värvB);

otse (100, 200, 90, 300);

täitma (värvC);

otse (300, 200, 90, 300);

} [/cceN_cpp]

Nüüd on värv palju mugavam ja parema efektiga kui väärtuste juhuslik sisestamine.

Lisage enne kuueteistkümnendvärvi väärtust „#”, seejärel saate väärtuse määrata muutuvale värvile otse.

4. samm: HSB -režiim

RGB -režiimi kõrval räägime järgnevalt HSB -režiimist. Järgnevalt on näidatud HSB -režiimi väärtuste määramise meetod.

Koodinäide (9-5):

[cceN_cpp theme = "dawn"] tühine seadistus () {

suurus (400, 400);

värvirežiim (HSB);

}

tühine viik () {

taust (0);

rectMode (KESK);

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

värv col = värv (i/20,0 * 255, 255, 255);

täitma (col);

sirge (i * 20 + 10, kõrgus/2, 10, 300);

}

} [/cceN_cpp]

Töötlemisel peame HSB -režiimi vahetamiseks lisama ainult lause colorMode (HSB). Funktsiooni colorMode () kasutamine on värvirežiimi vahetamine. Kui kirjutame sulgusse “HSB”, siis seatakse see HSB -režiimi; kui me kirjutame “RGB”, viiakse see RGB -režiimi.

Tähelepanu tasub pöörata sellele, et kirjutades colorMode (HSB), on HSB vaikeväärtus 255. See erineb Photoshopi maksimaalsest väärtusest. Photoshopis on H maksimaalne väärtus 360, maksimaalne väärtus S ja B on 100. Seega peame tegema teisenduse.

Kui Photoshopis on HSB väärtus (55, 100, 100), peaks töötlemiseks teisendamisel see väärtus olema (55/360 × 255, 255, 255), st (40, 255, 255).

colorMode () on funktsioon, mida saab kattuda. Järgnevalt tutvustame seda teile üksikasjalikult.

5. samm: ColorMode'i kattuv meetod

Seega, kui te ei soovi Photoshopis HSB väärtust käsitsi teisendada, võite kirjutada “colorMode ()” väärtuseks “colorMode (HSB, 360, 100, 100)”.

HSB -režiimi rakendusjuhtum 1

Kuna RGB -režiim ei ole toonimuutuste juhtimiseks päris mugav, võite praegu, kui soovite värve paindlikumalt juhtida, kaaluda HSB -režiimi.

Koodinäide (9-6):

[cceN_cpp theme = "dawn"] tühine seadistus () {

suurus (800, 800);

taust (0);

värvirežiim (HSB);

}

tühine viik () {

löökKaal (2);

löök (int (millis ()/1000,0 * 10)%255, 255, 255);

float newX, newY;

newX = hiirX + (müra (millis ()/1000,0 + 1,2) - 0,5) * 800;

newY = hiirY + (müra (millis ()/1000,0) - 0,5) * 800;

rida (hiirX, hiirY, uusX, uusY);

} [/cceN_cpp]

Kui me kontrollime lööki H (toonid), oleme kasutanud millis (). See saab tööaega algusest kuni praeguseni. Seega, nagu ajaga edasi liikudes, suureneb H (toon) väärtus automaatselt, seejärel muutub värv.

Millis () ühik on ms. Seega, kui programm töötab 1 sekund, on tagastamisväärtus 1000. See toob kaasa liiga suure väärtuse. Seega peame selle jagama 1000,0 -ga.

Kuna loodame, et värvid esitavad perioodilist ringlust, siis peame esimese toimingu tegemisel tegema modulooperatsiooni. See võib veenduda, et see algab uuesti nullist, kui H (toon) on ületanud 255.

Funktsiooni käik Kaal () saab juhtida joonte paksust. Sulgudes olevate parameetrite vastav ühik on piksel.

6. toiming: režiimi rakendusjuhtum 2

Koodinäide (9-7):

[cceN_cpp theme = "koidik"] int num; // joonistatud joonte arv

ujuk posX_A, posY_A; // Punkti A koordinaat

ujuk posX_B, posY_B; // Punkti B koordinaat

ujukinurkA, kiirusA; // Punkti A nurk, kiirus

ujuknurkB, kiirusB; // Punkti B nurk, kiirus

ujuki raadiusX_A, raadiusY_A; // X (Y) telje punkti A poolt moodustatud ovaali raadius.

ujuki raadiusX_B, raadius Y_B; // ta ovaali raadius, mille moodustab punkt B X (Y) teljel.

tühine seadistus () {

suurus (800, 800);

värvirežiim (HSB);

taust (0);

kiirusA = 0,0009;

kiirusB = 0,003;

raadiusX_A = 300;

raadiusY_A = 200;

raadiusX_B = 200;

raadius Y_B = 300;

}

tühine viik () {

tõlkima (laius/2, kõrgus/2);

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

nurkA += kiirusA;

nurkB += kiirusB;

posX_A = cos (nurkA) * raadiusX_A;

posY_A = sin (nurkA) * raadiusY_A;

posX_B = cos (nurkB) * raadiusX_B;

posY_B = sin (nurkB) * raadiusY_B;

käik (int (arv/500,0) % 255, 255, 255, 10);

rida (posX_A, posY_A, posX_B, posY_B);

number ++;

}

} [/cceN_cpp]

Operatsiooni efekt:

Väljundpilt:

Nähtud mustri tekitab liikuv joon pideva kattumise kaudu. Joone kahe lõpp -punkti jäljed on kaks ringi eraldi.

HSB -režiimi kaudu oleme toonide muutusi kontrollinud. Joonte suurenemisega nihutatakse toon. Kui massiivsed poolläbipaistvad jooned kattuvad, loob see väga rikkaliku värvigradiendi.

Oleme integreerinud funktsiooni jaoks silmus funktsiooni jaoks, mille eesmärk on kasutada tsüklit rea koguse juhtimiseks. See on samaväärne sellega, et meil on kontrollitud tõmbekiirus. Suurendades otsustusseisundi väärtust silmusesse, suurendab see joonistamist.

Allpool on skemaatiline joonis. Ringide liikumisjälgi näete selgemalt.

Reguleerige erinevat kiirust ja raadiust, moodustuvad mustrid on samuti erinevad. Proovige muuta selliseid muutujaid nagu nurk, kiirus, raadius X, raadius Y ja vaadake, mis juhtub.

Samm: kihtide segamisrežiim

Erinevad värvirežiimid, millest me varem rääkisime, on harjunud graafika komponentide värvimiseks. Välja arvatud selle meetodi kasutamine värvide juhtimiseks, võib töötlemine kasutada erinevate kihtide segamisrežiime, näiteks Photoshop.

Avage PS -is kihtide aken, klõpsake kihtide segamisrežiimi valimiseks, siis näeme neid valikuid.

Need on PS -is olemas kihtrežiimid. Lihtsamalt öeldes võib segamisrežiimi pidada omamoodi värviarvutusrežiimiks. See otsustab, milline värv luuakse viimasena, kui „värv A” pluss „värv B”. Siin tähendab värv A praeguse kihi taga olevat värvi (seda nimetatakse ka baasvärviks). "Värv B" tähendab praeguse kihi värvi (seda nimetatakse ka segavärviks). Programm arvutab, et saada värv C vastavalt RGB väärtusele ja värvide A ja B alfatele. See kuvatakse ekraanil tulemuse värvina.

Erinevate kihtide režiim tähistab erinevaid arvutusmeetodeid. Selle artiklite sarja järgmises pooles selgitame seda üksikasjalikult. Nüüd peame ainult teadma selle kasutamist.

Vaatame programmi lisamisrežiimi kasutamise näidet.

Koodinäide (9-8):

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

tühine seadistus () {

suurus (800, 400);

image1 = loadImage ("1.jpg");

pilt2 = loadImage ("2.jpg");

}

tühine viik () {

taust (0);

blendMode (ADD);

pilt (pilt 1, 0, 0, 400, 400);

pilt (pilt2, hiirX, hiirY, 400, 400);

}

[/cceN_cpp]

Tulemus:

Funktsiooni blendMode () kasutatakse graafika segamisrežiimi määramiseks. Täidame ADD taga tähendab, et oleme lisamisrežiimi seadnud.

Programmis pole kihi kontseptsiooni. Kuid kuna graafiliste komponentide joonistusjärjestus on olemas, loetakse piltide segamisel pilti 1 põhivärviks ja pilti 2 segavärviks.

ADD -režiim kuulub heledamaks. Pärast selle kasutamist saate särava efekti.

Allpool on segamisrežiim, mida saab kasutada töötlemisel.

8. samm: segamisrežiimi töötlemine

Efekti nägemiseks võime proovida erinevaid segamisrežiime muuta.

Kui näide (9–8) on kasutusele võtnud kattuva režiimi (taust tuleks seada valgeks):

Pärast lahutamisrežiimi kasutamist (taust tuleks seada valgeks):

9. samm: kihtide segamisrežiimi rakendusjuhtum

Segamisrežiimi saab kasutada mitte ainult piltidega, vaid sobib ka kõikidele lõuendi graafilistele komponentidele. Allpool on näidatud lisamisrežiimi kasutamine. Seda saab kasutada erinevate valgusefektide analoogimiseks.

Koodinäide (9-9):

[cceN_cpp theme = "dawn"] tühine seadistus () {

suurus (400, 400);

}

tühine viik () {

taust (0);

blendMode (ADD);

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

jaoks (int i = 0; i <arv; i ++) {

kui (juhuslikult (1) <0,5) {

täitke (0, 50, 0);

} muud {

täitke (50);

}

ellips (juhuslik (50, laius - 50), juhuslik (50, kõrgus - 50), 20, 20);

}

}

[/cceN_cpp]

Siin oleme juhusliku funktsiooni kaudu osakeste sisse seganud rohelise ja valge värvi, mis on juba alfa kandnud. Ringi arvu kontrollimiseks ja kattuva efekti jälgimiseks saame kasutada hiirt.

ADD ja SCREEN on üsna sarnased. Kuigi heledamaks muutmine on sama, on siiski peeneid erinevusi. Saate selle asendada ekraaniga ja võrrelda. Pärast kattumist on ADD puhtus ja heledus kõrgemad. See sobib valgusefekti analoogimiseks.

Mis puutub värvi, siis siin oleme selle peatükiga jõudnud lõpule. Selle „keele” jaoks olete juba piisavalt vaba kohti omandanud. Kiirustage nüüd koodi ja värvide maailma nautimiseks!

10. samm: allikas

See artikkel on pärit:

Küsimuste korral võite võtta ühendust aadressil ： [email protected].