Mielenkiintoinen käsittelyohjelmointiopas suunnittelijalle-Värinhallinta: 10 vaihetta

2024 Kirjoittaja: John Day | [email protected]. Viimeksi muokattu: 2024-01-30 08:59

Aiemmissa luvuissa olemme puhuneet enemmän siitä, miten koodia käytetään muotoiluun värien tuntemisen sijasta. Tässä luvussa aiomme tutkia tätä tiedon osa -aluetta syvemmin.

Vaihe 1: Perustiedot väristä

Väri on tietyiltä osin ylittänyt ihmisen intuition. Erilaiset kauniit värit, joita näimme paljain silmin, koostuvat itse asiassa samoista osista. Vain kolmen vaalean värin, punaisen, vihreän ja sinisen, avulla voimme luoda kaikki värit, jotka ihmissilmät näkevät seoksen kautta.

Tällä hetkellä näkemäsi mobiilinäytöt ja tietokoneen näytöt luodaan tämän periaatteen perusteella. Punaista, vihreää ja sinistä kutsutaan valon kolmeen alkuperäiseen väriin. Kolmen elementin suhteen avulla voimme taata tietyn värin. Tätä kuvaustapaa kutsutaan myös RGB -tilaksi. Niistä punainen on R, vihreä on G ja sininen on B.

Lukuun ottamatta RGB -tilaa on toinen tila nimeltä CMYK -tila. Se yhdistetään yleensä tulostamiseen. Painatuksessa on myös kolme alkuperäistä väriä. Se on kuitenkin erilainen kuin kolme alkuperäistä valon väriä. Ne ovat erikseen punainen, keltainen ja sininen. Niistä C on syaani, M on magenta ja Y on keltainen. Teoreettisesti vain CMY: n avulla voimme sekoittaa useimmat värit. Mutta raaka -aineen tuotantotekniikan vuoksi emme voi tuskin saada CMY: n kylläisyyttä saavuttamaan 100%. Jos sekoitamme nämä kolme väriä, emme voi saada riittävän tummaa mustaa väriä. Joten on ylimääräinen K, joka on tarkoitettu mustalle painovärille, painamisen lisäyksenä.

Mitä tulee RGB: hen ja CMYK: iin, sinun tarvitsee vain tietää, että luonnossa on ilmeisin ero. RGB on plus -väritila, joka lisää kirkkautta sekoittamalla enemmän värejä. CMYK on miinus väritila, joka lisää pimeyttä sekoittamalla enemmän värejä. Alla olevassa kuvassa näemme visuaalisesti näiden kahden tilan samankaltaisuudet ja erot. Vasen kuva, voimme kuvitella olevan pimeä talo, jossa on kolme eri väriä taskulampuja päällä. Kuva oikealla, voimme pitää sitä vesiväripaperina, kun se on päällekkäin kolmen punaisen, vihreän ja sinisen pigmentin kanssa.

Jos haluat tietää sen suhteelliset suhteet eri väritilojen välillä syvemmin, voit avata Photoshopin ja valita värinvalitsimen. Sitten voit nähdä saman värin väriarvot eri väritiloissa intuitiivisesti.

Viimeisenä haluamme esitellä sinulle toisen yleisen väritilan, HSB. HSB: llä ei ole käsitettä "alkuperäinen väri". Se on luokiteltu ihmissilmien värien tunteiden mukaan. H tarkoittaa värisävyä, S kylläisyyttä ja B kirkkautta.

Sävy edustaa värin taipumusta. Jokaisella värillä on tietty väritaipumus vain, jos se ei ole vaalea, valkoinen tai harmaa. Värinvalitsimen rikkainta värinsiirtoaluetta käytetään osoittamaan värisävyä. Sen arvo PS: ssä on 0-360.

Kylläisyys tarkoittaa värin puhtautta. Suurempi puhtaus tuo elävämpiä värejä. Sen arvo PS: ssä on 0-100.

Kirkkaus tarkoittaa värin vaaleutta, joka vaihtelee välillä 0 - 100.

RGB -tilaan verrattuna HSB: n kolme ulottuvuutta vastaavat paljon paremmin ihmisten silmien värituntumaa. Katso vain HSB -arvoja, voit yleensä kuvitella, millainen väri se on.

Saman värin osalta väriarvo RGB -tilassa on (255, 153, 71), kun taas HSB: ssä on (27, 72, 100).

On vaikea arvioida, miltä se näyttää kolmen alkuperäisen värin sekoittamisen jälkeen, jos katsomme vain RGB: tä. Mutta HSB on erilainen. Sinun tarvitsee vain tutustua värien sävyihin, kuten punainen on 0, oranssi on 30 ja keltainen on 60, niin tiedät, että se on suhteellisen kylläinen oranssi väri, jolla on suuri kirkkaus ja hieman lähellä punaista, kun H on 27.

Seuraavaksi vastaamme kahden tilan kolmea ulottuvuutta x, y, x avaruuteen ja piirrämme kuutiovärin vertailun tekemiseksi.

RGB ja HSB ovat vain erilaisia menetelmiä kuvata värejä. Voimme ottaa osoitteen vertauskuvaksi. Oletetaan, että jos haluat kertoa muille ihmisille keisarillisen palatsin sijainnin, voit sanoa sen olevan osoitteessa Jingshan Front Street, Dongchengin alue, Peking, nro 4. Tai voit sanoa, että se on 15 sekuntia, 55 minuuttia, 39 astetta pohjoisella leveysasteella ja 26 sekuntia, 23 minuuttia, 116 astetta itäisellä pituusasteella. HSB: n kuvausmenetelmä on samanlainen kuin edellinen. Jos olet tunteva suhteellisen alueen, voit yleensä tietää osoitteen sijainnin. Vaikka RGB voi olla tarkempi, mutta se on hyvin abstrakti.

HSB -tilan tarkoituksena oli auttaa meitä kuvaamaan väriä helpommin. Tietynlaisen värin näyttämiseksi näytöllä meidän on ensin muutettava se RGB -tilaan.

Edellä esittelemme kolme väritilaa: RGB, HSB, CMYK. Ohjelmassa sinun on keskityttävä vain kahteen tilaan: RGB ja HSB. Niillä on omat etunsa ja omat sovelluksensa samanaikaisesti. Jos tunnet sen, se täyttää kaikkein suunnitteluvaatimuksesi.

Vaihe 2: Tietojen tyyppi värien tallentamiseen

Värien näyttämiseksi ohjelmassa käytämme enimmäkseen RGB -tilaa edellisessä. Voimmeko kuitenkin näyttää värejä vain hallitsemalla kolmea ominaisuutta? Tietokoneessa asia on näin.

Olemme aiemmin maininneet, että prosessoinnissa, lukuun ottamatta R: tä, G: tä, B: tä, voimme nimetä väreille alfa (läpinäkyvyys). Mutta alfa ei kuulu värin komponenttiin. Sen olemassaolo on kätevä sekoitus väreihin takana. Siksi, jotta tietokoneet voivat kuvata tietynlaista väriä tarkasti, meidän on hallittava vain kolmea tärkeintä muuttujaa.

Seuraavassa alamme esitellä eräänlaista tietotyyppiä Väri, jota käytetään pääasiassa värien tallentamiseen. Se on samanlainen kuin aiemmin mainitut tietotyypit, kuten boolena, int, float.

Tässä selitän ensin varsinaista värin käyttöä. Kuvittele tämä: jos voimme käyttää vain aiemmin hallittuja menetelmiä tietyn datan tallentamiseen, mitä meidän pitäisi tehdä?

Koodiesimerkki (9-1):

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

void setup () {

koko (400, 400);

r = 255;

g = 0;

b = 0;

}

void draw () {

tausta (0);

rectMode (KESKUS);

täytä (r, g, b);

suora (leveys/2, korkeus/2, 100, 100);

}

[/cceN_cpp]

Mitä tulee väreihin, joilla on väritaipumus, meidän on luotava kolme muuttujaa tietojen tallentamiseksi kolmeen värikanavaan: punainen, vihreä ja sininen. Jos haluamme myöhemmin käyttää tätä väritietojoukkoa, meidän on kirjoitettava se täyttöön tai viivaan.

Mutta huomaat, että se on liian hankalaa tehdä, koska tiedot ovat yhteydessä toisiinsa. Jos sinulla on idea pakata ne käyttöön, se on helpompaa. Siksi väri syntyy.

Koodiesimerkki (9-2):

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

void setup () {

koko (400, 400);

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

}

void draw () {

tausta (0);

rectMode (KESKUS);

täyttö (myColor);

suora (leveys/2, korkeus/2, 100, 100);

} [/cceN_cpp]

Kuten tietotyypeissä, kuten int, muuttujien luomiseksi on käytettävä alussa "color myColor".

Asennuksessa käytämme arvoa "myColor = color (255, 0, 0)" arvon määrittämiseksi muuttujalle myColor. Vaikka funktion väri (a, b, c) osoittaa oikein, että tämä tietojoukko on muodostanut värityypin muuttujan myColor tuomiseksi. Jos kirjoitat "myColor = (255, 0, 0)", ohjelma menee pieleen.

Viimeiseksi käytämme täyttöä () värien täyttötoiminnon toteuttamiseen. Toimintojen täyttö () ja isku () mahdollistavat päällekkäisyyden. Parametrien määrän ja tyypin mukaan sillä on erilaisia vaikutuksia. Tuodaan vain yksi kokonaislukumuuttuja, joka edustaa sitä, ja se on vain harmaasävyinen väri. Vaikka tuodaan vaihtelevaa väriä, se tarkoittaa, että värivalikoima on suurempi. Voit myös tuoda värimuuttujan ja kokonaislukumuuttujan, muuttaa yllä olevan funktion täytettä () filliksi (myColor, 150) ja sitten ohjata alfaa toisella parametrilla.

Vaihe 3: Päällekkäinen täyttömenetelmä

aivohalvaus, tausta on sama päällekkäinen menetelmä täytön kanssa.

Lue kanavan arvon väri

Tehtävien lisäksi voit myös itsenäisesti hakea RGB -arvon värimuuttujasta

Koodiesimerkki (9-3):

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

void setup () {

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

println (punainen (myColor));

println (vihreä (myColor));

println (sininen (myColor));

}

[/cceN_cpp]

Tulos konsolissa: 255, 125, 0.

Toiminto punainen (), vihreä (), sininen () palaa suhteellisesti takaisin punaisen, vihreän ja sinisen kanavan arvoon myColorissa.

Heksadesimaalitehtävä

Lukuun ottamatta desimaalilukujen käyttöä RGB: n näyttämiseen, voimme käyttää myös heksadesimaalia. Desimaali tarkoittaa 1: n lisäämistä, kun se täyttää 10. Kun heksadesimaali tarkoittaa 1: n lisäämistä, kun se täyttää 16. Sen suhteellinen suhde desimaaliin on: "0-9" vastaa "0" 9”,“A – F”vastaavat” 10–15”.

Alla oleva kuva on esimerkki muuntomenetelmästä.

Tietenkin, jos saamme joukon heksadesimaalisia arvoja, kuten ff7800, meidän ei tarvitse muuntaa sitä manuaalisesti. Ohjelma määrittää arvot suoraan värimuuttujille. Se on erittäin kätevä.

Voimme nähdä, että monet värikortit verkossa ovat kaikki hyväksyneet heksadesimaalimenetelmän värin näyttämiseksi.

Kuten suunnittelijayhteisön dribbble, taideteokset liitetään värivalikoimaan. Jos näet suosikkivärin, voit käyttää sitä ohjelmassa.

Koodiesimerkki (9-4):

[cceN_cpp theme = "dawn"] väri takaisinVäri, väriA, väriB, väriC;

void setup () {

koko (400, 400);

rectMode (KESKUS);

noStroke ();

backColor = #395b71;

väriA = #c4d7fb;

väriB = #f4a7b4;

väriC = #f9e5f0;

}

void draw () {

tausta (backColor);

täyttö (väriA);

suora (200, 200, 90, 300);

täyttö (väriB);

suora (100, 200, 90, 300);

täyttö (colorC);

suora (300, 200, 90, 300);

} [/cceN_cpp]

Nyt väri on paljon mukavampi ja parempi vaikutus kuin arvojen syöttäminen satunnaisesti.

Lisää "#" ennen heksadesimaalista väriarvoa, niin voit määrittää arvon muuttuvalle värille suoraan.

Vaihe 4: HSB -tila

RGB -tilan lisäksi puhumme seuraavaksi HSB -tilasta. Seuraavassa on esitetty HSB -tilan arvonmääritysmenetelmä.

Koodiesimerkki (9-5):

[cceN_cpp theme = "dawn"] mitätön asennus () {

koko (400, 400);

colorMode (HSB);

}

void draw () {

tausta (0);

rectMode (KESKUS);

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

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

täyttö (col);

suora (i * 20 + 10, korkeus/2, 10, 300);

}

} [/cceN_cpp]

Käsittelyssä HSB -tilan vaihtamiseksi meidän tarvitsee vain lisätä lause colorMode (HSB). Toiminnon colorMode () käyttö on väritilan vaihtaminen. Jos kirjoitamme hakasulkeeseen”HSB”, se asetetaan HSB -tilaan; kun kirjoitamme”RGB”, se siirtyy RGB -tilaan.

Kannattaa kiinnittää huomiota siihen, että kirjoittaessamme colorMode (HSB) -asetusta, HSB: n oletusarvo on 255. Tämä eroaa aivan Photoshopin enimmäisarvosta. Photoshopissa H: n maksimiarvo on 360, S: n ja B: n arvo on 100. Joten meidän on tehtävä muunnos.

Jos HSB -arvo Photoshopissa on (55, 100, 100), muunnettaessa käsittelyyn tämän arvon tulee olla (55/360 × 255, 255, 255) eli (40, 255, 255).

colorMode () on päällekkäinen toiminto. Seuraavassa esittelemme sen sinulle yksityiskohtaisesti.

Vaihe 5: Päällekkäinen ColorMode -menetelmä

Siksi, jos et halua muuntaa HSB -arvoa Photoshopissa manuaalisesti, voit kirjoittaa "colorMode ()" muotoon "colorMode (HSB, 360, 100, 100)".

HSB -tilan sovelluskotelo 1

Koska RGB -tila ei ole varsin kätevä sävyn muutosten hallitsemiseksi, voit tällä hetkellä harkita HSB -tilaa, jos haluat hallita värejä joustavammin.

Koodiesimerkki (9-6):

[cceN_cpp theme = "dawn"] mitätön asennus () {

koko (800, 800);

tausta (0);

colorMode (HSB);

}

void draw () {

iskuPaino (2);

isku (int (millis ()/1000,0 * 10)%255, 255, 255);

float newX, newY;

newX = hiiriX + (kohina (millis ()/1000,0 + 1,2) - 0,5) * 800;

newY = hiiriY + (kohina (millis ()/1000,0) - 0,5) * 800;

linja (hiiriX, hiiriY, uusiX, uusiY);

} [/cceN_cpp]

Kun hallitsemme H (sävyjä) aivohalvauksessa, olemme käyttäneet millis (). Se saa toiminta -ajan alusta nykyhetkeen. Näin ollen, kuten ajan myötä, H (sävy) -arvo kasvaa automaattisesti ja väri muuttuu.

Millisyksikkö () on ms. Joten kun ohjelma kestää 1 sekunnin, palautusarvo on 1000. Tämä johtaa liian suureen arvoon. Joten se on jaettava 1000: lla.

Koska toivomme, että värit esittävät jaksottaista kiertoa, meidän on tehtävä modulo -operaatio, kun viimein kirjoitamme ensimmäisen parametrin aivohalvaukseen. Tämä voi varmistaa, että se alkaa uudelleen nollasta, kun H (värisävy) on ylittänyt 255.

Toiminto isku Paino () voi ohjata viivojen paksuutta. Haarukoiden parametrien vastaava yksikkö on pikseli.

Vaihe 6: Tilan sovellustapa 2

Koodiesimerkki (9-7):

[cceN_cpp theme = "dawn"] int numero; // tällä hetkellä piirrettyjen viivojen määrä

float posX_A, posY_A; // Pisteen A koordinaatti

float posX_B, posY_B; // Pisteen B koordinaatti

kellukulmaA, nopeusA; // Pisteen A kulma, nopeus

kellukulmaB, nopeusB; // Pisteen B kulma, nopeus

kellukkeen sädeX_A, sädeY_A; // Ovaalin säde, joka muodostuu pisteestä A X (Y) -akselissa.

kellukkeen sädeX_B, sädeY_B; // hän on soikean säde, jonka muodostaa piste B X (Y) -akselissa.

void setup () {

koko (800, 800);

colorMode (HSB);

tausta (0);

nopeusA = 0,0009;

nopeusB = 0,003;

sädeX_A = 300;

sädeY_A = 200;

sädeX_B = 200;

sädeY_B = 300;

}

void draw () {

kääntää (leveys/2, korkeus/2);

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

kulmaA += nopeusA;

kulmaB += nopeusB;

posX_A = cos (kulmaA) * sädeX_A;

posY_A = sin (kulmaA) * sädeY_A;

posX_B = cos (kulmaB) * sädeX_B;

posY_B = sin (kulmaB) * sädeY_B;

isku (int (numero/500,0) % 255, 255, 255, 10);

viiva (posX_A, posY_A, posX_B, posY_B);

numero ++;

}

} [/cceN_cpp]

Käyttövaikutus:

Tulostuskuva:

Näkemäsi kuvion tuottaa liikeviiva jatkuvan päällekkäisyyden kautta. Viivan kahden päätepisteen jäljet ovat kaksi ympyrää erikseen.

HSB -tilan avulla olemme hallinneet värisävyn muutoksia. Linjojen kasvaessa sävy muuttuu. Kun massiiviset puoliksi läpinäkyvät viivat ovat päällekkäin, se luo erittäin rikkaan värigradientin.

Olemme upottaneet for for loop -funktion piirtoon, jonka tarkoituksena on käyttää silmukkaa rivin määrän säätämiseen. Se vastaa sitä, että meillä on hallittu vetonopeus. Kun tuomioehdon arvoa lisätään silmukassa, se lisää piirustuksen seepd.

Alla on kaavamainen kuva. Näet ympyröiden liikejäljet selvemmin.

Säädä eri nopeutta ja sädettä, myös muodostetut kuviot ovat erilaisia. Yritä muuttaa muuttujia, kuten kulma, nopeus, sädeX, sädeY ja katso mitä tapahtuu.

Vaihe 7: Kerrosekoitustila

Eri väritilat, joista puhuimme aiemmin, ovat kaikki tottuneet grafiikan komponenttien värittämiseen. Lukuun ottamatta tämän menetelmän käyttöä värin hallintaan, käsittely voi käyttää eri kerrosten sekoitustiloja, kuten Photoshopia.

Avaa kerrosikkuna PS: ssä, valitse tasojen sekoitustila napsauttamalla, niin voimme nähdä nämä vaihtoehdot.

Nämä ovat PS: n kerrostiloja. Yksinkertaisesti sanottuna sekoitustilaa voidaan pitää eräänlaisena värinlaskentamuotona. Se päättää, mikä väri luodaan viimeisenä, kun "väri A" ja "väri B". Tässä”väri A” tarkoittaa nykyisen kerroksen takana olevaa väriä (kutsutaan myös perusväreksi). "Väri B" tarkoittaa nykyisen kerroksen väriä (kutsutaan myös sekaväriksi). Ohjelma laskee värin C saamiseksi RGB -arvon ja värin A ja B alfan mukaan. Se näytetään näytöllä tulosvärinä.

Eri kerrostila tarkoittaa eri laskentamenetelmiä. Tämän artikkelisarjan seuraavassa puoliskossa selitämme sen yksityiskohtaisesti. Nyt meidän on vain ensin tiedettävä sen käyttö.

Katsotaanpa esimerkkiä lisätilan käyttämisestä ohjelmassa.

Koodiesimerkki (9-8):

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

void setup () {

koko (800, 400);

image1 = loadImage ("1.jpg");

image2 = loadImage ("2.jpg");

}

void draw () {

tausta (0);

blendMode (ADD);

kuva (kuva1, 0, 0, 400, 400);

kuva (kuva2, hiiriX, hiiriY, 400, 400);

}

[/cceN_cpp]

Tulos:

Toimintoa blendMode () käytetään grafiikan sekoitustilan asettamiseen. Täytämme ADD takana tarkoittaa, että olemme asettaneet Add Mode.

Ohjelmassa ei ole käsitettä kerroksesta. Mutta koska graafisilla komponenteilla on piirustusjärjestys, niin kuvia sekoitettaessa kuvaa 1 pidetään perusvärinä ja kuvaa 2 sekoitettuna.

ADD -tila kuuluu kirkkausluokkaan. Käytön jälkeen saat kirkkaamman vaikutuksen.

Alla on sekoitustila, jota voidaan käyttää käsittelyssä.

Vaihe 8: Sekoitustilan käsittely

Voimme yrittää muuttaa eri sekoitustilaa nähdäksesi vaikutuksen.

Kun esimerkki (9-8) on ottanut päällekkäisen tilan (tausta on asetettava valkoiseksi):

Substract -tilan käytön jälkeen (tausta on asetettava valkoiseksi):

Vaihe 9: Kerrosekoitustilan sovelluskotelo

Sekoitustilaa ei voi käyttää vain kuviin, vaan se sopii myös kaikille kankaan graafisille komponenteille. Alla on esitetty lisätilan käyttö. Sitä voidaan käyttää erilaisten valotehosteiden analogisoimiseen.

Koodiesimerkki (9-9):

[cceN_cpp theme = "dawn"] mitätön asennus () {

koko (400, 400);

}

void draw () {

tausta (0);

blendMode (ADD);

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

for (int i = 0; i <numero; i ++) {

jos (satunnainen (1) <0,5) {

täyttö (0, 50, 0);

}muu{

täyttö (50);

}

ellipsi (satunnainen (50, leveys - 50), satunnainen (50, korkeus - 50), 20, 20);

}

}

[/cceN_cpp]

Tässä olemme satunnaistoiminnon avulla sekoittaneet vihreän ja valkoisen värin, jotka ovat jo kuljettaneet alfaa, hiukkasiin. Voimme hallita ympyrän määrää hiirellä ja katsella päällekkäistä vaikutusta.

ADD ja SCREEN ovat melko samanlaisia. Vaikka kirkastaa samaa, on pieniä eroja. Voit korvata sen näytöllä ja tehdä vertailun. Päällekkäisyyden jälkeen ADD: n puhtaus ja kirkkaus ovat korkeammat. Se soveltuu valaistusvaikutelman analogiseksi.

Mitä tulee väriin, tässä olemme päättyneet tähän lukuun. Tätä”kieltä” varten olet jo hallinnut riittävästi tyhjiöitä. Kiirehdi nyt käyttämään koodia nauttiaksesi muodon ja värin maailmasta!

Vaihe 10: Lähde

Tämä artikkeli on osoitteesta:

Jos sinulla on kysyttävää, voit ottaa yhteyttä osoitteeseen ： [email protected].