Zanimljive upute za programiranje obrade za dizajnera-Kontrola boje: 10 koraka

2024 Autor: John Day | [email protected]. Zadnja izmjena: 2024-01-30 08:04

U prethodnim poglavljima govorili smo više o tome kako koristiti kôd za oblikovanje umjesto znanja o boji. U ovom poglavlju ćemo dublje istražiti ovaj aspekt znanja.

Korak 1: Osnovno znanje o boji

Boja je u određenom aspektu nadmašila ljudsku intuiciju. Različite lijepe boje koje vidimo golim okom zapravo se sastoje od istih komponenti. Samo s tri svijetle boje, crvenom, zelenom i plavom, možemo stvoriti sve boje koje se ljudskim očima mogu vidjeti kroz mješavinu.

Mobilni ekrani i ekrani računara koje trenutno vidite stvoreni su na osnovu ovog principa. Crvena, zelena i plava nazivaju se tri izvorne boje svjetlosti. Omjerom triju elemenata možemo osigurati određenu boju. Ova metoda opisa naziva se i RGB način rada. Među njima je crvena R, zelena G i plava B.

Osim RGB moda, postoji još jedan način koji se naziva CMYK način. Obično se kombinuje sa štampanjem. U štampi postoje i tri originalne boje. Međutim, razlikuje se od tri izvorne boje svjetlosti. Odvojeno su crvena, žuta i plava. Među njima, C je za cijan, M je za magenta, a Y za žutu. Teoretski, samo pomoću CMY -a možemo pomiješati većinu boja. Ali zbog proizvodne tehnike sirovina teško možemo postići da zasićenje CMY -a postigne 100%. Ako pomiješamo ove tri boje, ne možemo dobiti dovoljno tamnu crnu boju. Dakle, postoji dodatni K, koji je za crno štamparsko mastilo, kao dodatak štampanju.

Što se tiče RGB -a i CMYK -a, morate samo znati da postoji najočiglednija razlika u prirodi. RGB je plus način rada u boji, koji povećava svjetlinu miješanjem više boja. Dok je CMYK minus režim boja, koji povećava tamu miješanjem više boja. Na donjoj slici možemo vizualno vidjeti sličnosti i razlike dva načina. Na lijevoj slici možemo zamisliti da je to mračna kuća sa tri različite boje upaljenih svjetiljki. Na slici desno možemo je smatrati papirom za akvarel nakon preklapanja s tri pigmenta crvene, zelene i plave boje.

Ako želite dublje znati njegovu relativnu vezu između različitih načina boja, možete otvoriti svoj Photoshop i odabrati birač boja. Tada možete intuitivno vidjeti vrijednosti boje iste boje u različitim načinima boja.

Na kraju, želimo vam predstaviti još jedan uobičajeni način boja, HSB. HSB nema koncept “izvorne boje”. Klasifikuje se prema osećanjima ljudskih očiju prema bojama. H označava nijansu, S zasićenje, a B svjetlinu.

Nijansa predstavlja tendenciju boje. Svaka boja ima određenu tendenciju boje samo ako nije crna, bijela ili siva. Najbogatije područje prijelaza boje na biraču boja koristi se za označavanje nijanse. Njegova vrijednost u PS kreće se od 0 do 360.

Zasićenost znači čistoću boje. Veća čistoća donosi življe boje. Njegova vrijednost u PS kreće se od 0 do 100.

Svjetlina znači stupanj svjetline boje, u rasponu od 0 do 100.

U usporedbi s RGB načinom, tri dimenzije HSB -a mnogo su više u skladu s osjećajem ljudskih očiju za bojama. Samo pogledajte vrijednosti HSB -a, općenito možete zamisliti kakva je to boja.

Što se tiče iste boje, vrijednost boje u RGB načinu rada je (255, 153, 71), dok je u HSB -u (27, 72, 100).

Teško je procijeniti kako će to izgledati nakon miješanja tri izvorne boje zajedno ako pogledamo samo RGB. Ali HSB je drugačiji. Morate se samo upoznati s nijansama boja kao što je crvena 0, narančasta 30 i žuta 60, tada ćete znati da će to biti relativno zasićena narančasta boja s visokom svjetlinom i pomalo blizu crvene kada je H 27.

Zatim ćemo tri dimenzije dvaju načina prilagoditi u x, y, x u prostoru i nacrtati kubičnu boju radi usporedbe.

RGB i HSB samo su različite metode za opisivanje boja. Adresu možemo uzeti kao metaforu. Pretpostavimo da ako želite drugim ljudima reći položaj Imperijalne palače, možete reći da je to na broju 4 u ulici Jingshan Front Street, područje Dongcheng, Peking. Ili možete reći da je to na 15 sekundi, 55 minuta, 39 stepeni na sjevernoj širini i 26 sekundi, 23 minuta, 116 stepeni na istočnoj geografskoj dužini. Metoda opisa HSB -a slična je prethodnoj. Ako ste upoznati sa relativnim područjem, općenito možete znati položaj adrese. Iako je RGB možda precizniji, ali je vrlo apstraktan.

HSB način rada postojao je s ciljem da nam pomogne da pogodnije opišemo boje. Da bismo prikazali određenu vrstu boje na ekranu, konačno je moramo prvo pretvoriti u RGB način rada.

U gore navedenom uvodimo tri načina boje: RGB, HSB, CMYK. U programu se morate usredotočiti samo na dva načina rada: RGB i HSB. Oni imaju svoje prednosti i vlastite aplikacije u isto vrijeme. Ako ste upoznati s njim, zadovoljit će vaše zahtjeve za većim dizajnom.

Korak 2: Tip podataka za spremanje boja

Da bismo prikazali boje u programu, uglavnom smo ranije koristili RGB način rada. Međutim, samo kontrolom tri svojstva možemo prikazati bilo koju boju? U računaru je to ovako.

Prije smo to spomenuli u Obradi, osim za R, G, B, možemo označiti alfa (prozirnost) za boje. Ali alfa ne pripada komponenti boje. Njegovo postojanje je prikladna mješavina sa bojama iza. Stoga, da bi računari precizno opisali određenu vrstu boje, moramo kontrolirati samo ključne tri varijable.

U nastavku započinjemo s uvođenjem vrste podataka Color, koja se uglavnom koristi za spremanje boja. Slično je prethodno spomenutim tipovima podataka kao što su boolena, int, float.

Dopustite mi da najprije objasnim stvarnu upotrebu boje. Zamislite ovo: pretpostavimo da ako možemo koristiti samo prethodno savladane metode za pohranu određenih podataka, što ćemo učiniti?

Primjer koda (9-1):

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

void setup () {

veličina (400, 400);

r = 255;

g = 0;

b = 0;

}

void draw () {

pozadina (0);

rectMode (CENTAR);

ispuniti (r, g, b);

pravougaoni (širina/2, visina/2, 100, 100);

}

[/cceN_cpp]

Što se tiče boja koje imaju tendenciju boje, moramo stvoriti tri varijable za pohranu podataka u tri kanala u boji, crvenoj, zelenoj i plavoj. Kasnije, ako želimo pozvati ovaj skup podataka o boji, moramo ga zapisati u fill ili stroke.

Ali otkrit ćete da je to previše problematično jer su podaci međusobno povezani. Ako imate ideju da ih zapakirate u upotrebu, bit će vam prikladnije. Zbog toga se stvara boja.

Primjer koda (9-2):

[cceN_cpp theme = "dawn"] boja myColor;

void setup () {

veličina (400, 400);

myColor = boja (255, 0, 0);

}

void draw () {

pozadina (0);

rectMode (CENTAR);

fill (myColor);

pravougaoni (širina/2, visina/2, 100, 100);

} [/cceN_cpp]

Isto kao i tipovi podataka poput int, moramo koristiti „color myColor“na početku za kreiranje varijabli.

U postavljanju koristimo “myColor = color (255, 0, 0)” za dodjeljivanje vrijednosti varijabli myColor. Dok boja funkcije (a, b, c) s pravom predstavlja da je ovaj skup podataka formirao tip boje za uvoz varijable myColor. Ako napišete “myColor = (255, 0, 0)”, program će pogriješiti.

U posljednjem slučaju koristimo fill () za realizaciju operacije umetanja boja. Funkcije fill () i stroke () omogućuju preklapanje. Ovisno o količini i vrsti parametara, to će imati različite učinke. Uvoz samo jedne cjelobrojne varijable, koja predstavlja boju, samo je sa sivim tonovima. Dok uvozite promjenjivu boju, to znači da će raspon boja biti veći. Također možete uvesti varijablu boje i cjelobrojnu varijablu, promijeniti gornju funkciju fill () u fill (myColor, 150), zatim možete kontrolirati alfa s drugim parametrom.

Korak 3: Metoda popunjavanja koja se preklapa

potez, pozadina imaju istu metodu preklapanja sa ispunom.

Pročitajte vrijednost boje kanala

Osim dodjeljivanja, možete i samostalno dobiti RGB vrijednost u varijabli boja

Primjer koda (9-3):

[cceN_cpp theme = "dawn"] boja myColor;

void setup () {

myColor = boja (255, 125, 0);

println (crveno (myColor));

println (zelena (myColor));

println (plavo (myColor));

}

[/cceN_cpp]

Rezultat u konzoli: 255, 125, 0.

Funkcija red (), green (), blue () će se relativno vratiti na vrijednost crvenog, zelenog i plavog kanala u myColor -u.

Hexadecimal Assignment

Osim korištenja decimalnih brojeva za prikazivanje RGB -a, možemo koristiti i heksadecimalni. Decimalni znači povećanje 1 kada zadovolji 10. Dok heksadecimalno znači povećanje 1 kada zadovolji 16. Njegov relativni odnos s decimalnim je: "0 do 9" odgovara "0" do 9”,“A do F”odgovaraju“10 do 15”.

Na slici ispod je ilustracija metode konverzije.

Naravno, ako dobijemo skup heksadecimalnih vrijednosti poput ff7800, ne moramo ga ručno pretvoriti. Program će direktno dodijeliti vrijednosti varijablama boja. Vrlo je zgodan.

Možemo vidjeti da mnoge kartice u boji na internetu prihvaćaju heksadecimalnu metodu za prikaz boje.

Poput driblinga zajednice dizajnera, umjetnička djela bit će priložena paleti boja. Ako vidite omiljenu boju, možete je primijeniti na program.

Primjer koda (9-4):

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

void setup () {

veličina (400, 400);

rectMode (CENTAR);

noStroke ();

backColor = #395b71;

bojaA = #c4d7fb;

colorB = #f4a7b4;

colorC = #f9e5f0;

}

void draw () {

background (backColor);

ispuna (colorA);

rect (200, 200, 90, 300);

ispuna (colorB);

rect (100, 200, 90, 300);

ispuna (colorC);

rect (300, 200, 90, 300);

} [/cceN_cpp]

Sada je boja mnogo ugodnija s boljim efektom od nasumičnog unosa vrijednosti.

Dodajte "#" ispred vrijednosti heksadecimalne boje, tada možete direktno dodijeliti vrijednost varijabilnoj boji.

Korak 4: HSB način rada

Osim RGB načina rada, dalje ćemo govoriti o HSB načinu rada. U nastavku je prikazan način dodjeljivanja vrijednosti u HSB načinu rada.

Primjer koda (9-5):

[cceN_cpp theme = "dawn"] void setup () {

veličina (400, 400);

colorMode (HSB);

}

void draw () {

pozadina (0);

rectMode (CENTAR);

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

boja col = boja (i/20.0 * 255, 255, 255);

fill (col);

rect (i * 20 + 10, height/2, 10, 300);

}

} [/cceN_cpp]

U procesu obrade, da bismo promijenili HSB način rada, moramo samo dodati rečenicu colorMode (HSB). Upotreba funkcije colorMode () je za promjenu načina rada u boji. Ako u zagradu upišemo “HSB”, bit će postavljen na HSB način; dok pišemo “RGB”, on će biti prebačen u RGB način rada.

Ono na što vrijedi obratiti pažnju je kada pišemo colorMode (HSB), zadana maksimalna vrijednost HSB -a je 255. To se prilično razlikuje od maksimalne vrijednosti u Photoshopu. U Photoshopu, maksimalna vrijednost H je 360, maksimalna vrijednost S i B je 100. Zato moramo izvršiti konverziju.

Ako je vrijednost HSB -a u Photoshopu (55, 100, 100), kada se pretvori u Obrada, ta vrijednost treba biti (55 /360 × 255, 255, 255), tj. (40, 255, 255).

colorMode () je funkcija koja se može preklapati. U nastavku ćemo vam ga detaljno predstaviti.

Korak 5: Metoda preklapanja ColorMode

Stoga, ako ne želite ručno pretvoriti HSB vrijednost u Photoshopu, možete napisati “colorMode ()” u “colorMode (HSB, 360, 100, 100)”.

Slučaj primjene HSB načina rada 1

Budući da RGB način rada nije prikladan za kontrolu promjena nijanse, u ovom trenutku, ako želite fleksibilnije kontrolirati boje, razmislite o HSB načinu rada.

Primjer koda (9-6):

[cceN_cpp theme = "dawn"] void setup () {

veličina (800, 800);

pozadina (0);

colorMode (HSB);

}

void draw () {

strokeWeight (2);

hod (int (millis ()/1000.0 * 10)%255, 255, 255);

float newX, newY;

newX = mouseX + (šum (milisi ()/1000,0 + 1,2) - 0,5) * 800;

newY = mouseY + (šum (millis ()/1000.0) - 0.5) * 800;

linija (mouseX, mouseY, newX, newY);

} [/cceN_cpp]

Kada kontroliramo H (nijanse) u potezu, koristili smo millis (). On će dobijati vrijeme rada od početka do danas. Tako će se, kako se vrijeme pomiče prema naprijed, vrijednost H (nijansa) automatski povećavati, a zatim će se i boja promijeniti.

Jedinica milis () je ms. Dakle, kada program radi 1 sekundu, povratna vrijednost će biti 1000. To će dovesti do prevelike vrijednosti. Zato ga moramo podijeliti sa 1000.0.

Zato što se nadamo da će boje predstavljati periodičnu cirkulaciju, pa moramo raditi po modulu kada konačno upišemo prvi parametar u potezu. Ovo može osigurati da će ponovo početi od 0 kada H (nijansa) pređe 255.

Funkcija strokeWeight () može kontrolirati debljinu linija. Odgovarajuća jedinica za parametre unutar zagrade je piksel.

Korak 6: Slučaj primjene načina rada 2

Primjer koda (9-7):

[cceN_cpp theme = "dawn"] int broj; // količina trenutno iscrtanih linija

plovak posX_A, posY_A; // Koordinata tačke A

plovak posX_B, posY_B; // Koordinata tačke B

kut plutanjaA, brzinaA; // Kut točke A, brzina

kut plovakaB, brzinaB; // Kut točke B, brzina

radijus plovkaX_A, radiusY_A; // Polumjer ovala formiran točkom A na X (Y) osi.

poluprečnik radiusX_B, radiusY_B; // polumjer ovalnog oblika formiran točkom B na X (Y) osi.

void setup () {

veličina (800, 800);

colorMode (HSB);

pozadina (0);

brzinaA = 0,0009;

brzinaB = 0,003;

radiusX_A = 300;

radijusY_A = 200;

radiusX_B = 200;

radijusY_B = 300;

}

void draw () {

prevesti (širina/2, visina/2);

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

ugao A += brzina A;

ugaoB += brzinaB;

posX_A = cos (kutA) * radijusX_A;

posY_A = sin (ugao A) * radijusY_A;

posX_B = cos (ugaoB) * radijusX_B;

posY_B = sin (ugaoB) * radijusY_B;

hod (int (broj/500,0) % 255, 255, 255, 10);

linija (posX_A, posY_A, posX_B, posY_B);

broj ++;

}

} [/cceN_cpp]

Efekat operacije:

Izlazna slika:

Uzorak koji ste vidjeli proizvodi pokretna linija kroz stalno preklapanje. Tragovi dviju krajnjih tačaka linije su dva kruga odvojeno.

Kroz HSB način kontrolirali smo promjene nijanse. Sa povećanjem linija, nijansa će se pomaknuti. Kada se masivne poluprozirne linije preklapaju, stvorit će se vrlo bogat gradijent boje.

For petlju smo ugradili u iscrtavanje funkcije s ciljem korištenja for petlje za kontrolu količine reda. To je ekvivalentno kontroliranoj brzini crtanja. Povećanjem vrijednosti uvjeta procjene u for petlji, to će povećati crtanje seepd.

Ispod je shematska slika. Jasnije možete vidjeti tragove kretanja krugova.

Podesite različitu brzinu i radijus, i obrasci će biti različiti. Pokušajte promijeniti varijable kao što su kut, brzina, radiusX, radiusY i vidjeti što će se dogoditi.

Korak 7: Način miješanja slojeva

Različiti načini boja o kojima smo ranije govorili koriste se za bojenje grafičkih komponenti. Osim za korištenje ove metode za kontrolu boje, Processing može koristiti različite načine miješanja slojeva poput Photoshopa.

Otvorite prozor sloja u PS -u, kliknite da odaberete način miješanja slojeva, tada možemo vidjeti ove opcije.

To su postojeći slojevi u PS -u. Jednostavno rečeno, način miješanja može se smatrati nekom vrstom izračuna boje. Odlučit će koja će boja biti kreirana posljednja kada “boja A” plus “boja B”. Ovdje "boja A" znači boju iza trenutnog sloja (naziva se i osnovna boja). "Boja B" znači boju trenutnog sloja (naziva se i mješovita boja). Program će izračunati da dobije boju C prema RGB vrijednosti i alfa boji A i B. To će biti prikazano na ekranu kao rezultat boje.

Režim različitog sloja označava različite metode proračuna. U sljedećoj polovici ove serije članaka ćemo to detaljno objasniti. Sada samo moramo prvo znati njegovu upotrebu.

Pogledajmo primjer korištenja načina dodavanja u programu.

Primjer koda (9-8):

[cceN_cpp theme = "dawn"] PImage slika1, slika2;

void setup () {

veličina (800, 400);

image1 = loadImage ("1.jpg");

image2 = loadImage ("2.jpg");

}

void draw () {

pozadina (0);

blendMode (ADD);

slika (slika1, 0, 0, 400, 400);

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

}

[/cceN_cpp]

Rezultat:

Funkcija blendMode () koristi se za postavljanje načina miješanja grafike. Popunjavamo ADD iza znači da smo postavili način dodavanja.

U programu nema koncepta sloja. No, budući da postoji niz crtanja grafičkih komponenti, pa se pri miješanju slika slika 1 smatra osnovnom bojom, a slika 2 mješovitom bojom.

ADD način rada pripada “Brighten Class”. Nakon upotrebe postići ćete svjetliji učinak.

Ispod je način miješanja koji se može koristiti u obradi.

Korak 8: Obrada načina miješanja

Možemo pokušati promijeniti drugačiji način miješanja kako bismo vidjeli učinak.

Kada primjer (9-8) usvoji preklapajući način (pozadinu treba postaviti na bijelu):

Nakon korištenja načina Sažetak (pozadina bi trebala biti bijela):

Korak 9: Primjena načina rada za miješanje slojeva

Način miješanja ne može se koristiti samo za slike, već je prikladan i za sve grafičke komponente na platnu. Ispod je prikazana upotreba načina dodavanja. Može se koristiti za analogne različite svjetlosne efekte.

Primjer koda (9-9):

[cceN_cpp theme = "dawn"] void setup () {

veličina (400, 400);

}

void draw () {

pozadina (0);

blendMode (ADD);

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

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

if (nasumično (1) <0,5) {

fill (0, 50, 0);

} else {

ispuniti (50);

}

elipsa (nasumično (50, širina - 50), nasumično (50, visina - 50), 20, 20);

}

}

[/cceN_cpp]

Ovdje smo, putem random funkcije, spojili zelenu boju i bijelu boju, koje su već nosile alfa, u čestice. Mišem možemo upravljati količinom kruga i gledati učinak preklapanja.

ADD i SCREEN su prilično slični. Iako je isto posvijetliti, postoje suptilne razlike. Možete ga zamijeniti na SCREEN i napraviti usporedbu. Nakon preklapanja, čistoća i svjetlina ADD -a bit će veća. Pogodan je za analogni svjetlosni efekt.

Što se tiče boja, ovdje smo došli do kraja u ovom poglavlju. Za ovaj „jezik“već ste savladali dovoljno slobodnih slova. Požurite s upotrebom koda da biste uživali u svijetu oblika i boja!

Korak 10: Izvor

Ovaj članak je sa:

Ako imate bilo kakvih pitanja, možete se obratiti na adresu [email protected].