Interesujące wskazówki dotyczące programowania przetwarzania dla projektanta - kontrola kolorów: 10 kroków

2024 Autor: John Day | [email protected]. Ostatnio zmodyfikowany: 2024-01-30 11:27

W poprzednich rozdziałach mówiliśmy więcej o tym, jak używać kodu do kształtowania zamiast punktów wiedzy o kolorze. W tym rozdziale zamierzamy głębiej zbadać ten aspekt wiedzy.

Krok 1: Podstawowa wiedza na temat koloru

Kolor pod pewnymi względami przekroczył ludzką intuicję. Różne piękne kolory, które widzieliśmy gołym okiem, w rzeczywistości składają się z tych samych składników. Tylko za pomocą trzech kolorów światła: czerwonego, zielonego i niebieskiego, możemy stworzyć wszystkie kolory, które mogą być postrzegane przez ludzkie oczy poprzez ich zmieszanie.

Na tej zasadzie powstają ekrany mobilne i ekrany komputerowe, które obecnie widzisz. Czerwony, zielony i niebieski to trzy oryginalne barwy światła. Dzięki proporcji trzech elementów możemy zapewnić określony kolor. Ta metoda opisu jest również nazywana trybem RGB. Wśród nich czerwony to R, zielony to G, a niebieski to B.

Poza trybem RGB istnieje inny tryb zwany trybem CMYK. Zwykle łączy się to z drukowaniem. W druku są też trzy oryginalne kolory. Różni się jednak od trzech oryginalnych barw światła. Są osobno czerwone, żółte i niebieskie. Wśród nich C oznacza cyjan, M to magenta, a Y to żółty. Teoretycznie tylko przez CMY możemy wymieszać większość kolorów. Ale ze względu na technikę produkcji surowca trudno jest sprawić, aby nasycenie CMY osiągnęło 100%. Jeśli zmieszamy te trzy kolory, nie uzyskamy wystarczająco ciemnego koloru czarnego. Jest więc dodatkowy K, który jest dla czarnej farby drukarskiej, jako uzupełnienie druku.

Jeśli chodzi o RGB i CMYK, musisz tylko wiedzieć, że istnieje najbardziej oczywista różnica w naturze. RGB to tryb plus kolor, który zwiększa jasność poprzez mieszanie większej liczby kolorów. Podczas gdy CMYK to tryb koloru minusowego, który zwiększa ciemność poprzez mieszanie większej liczby kolorów. Na poniższym obrazku możemy wizualnie zobaczyć podobieństwa i różnice obu trybów. Na lewym zdjęciu możemy sobie wyobrazić ciemny dom z włączonymi trzema różnymi kolorami latarek. Zdjęcie po prawej, po nałożeniu trzech pigmentów: czerwonego, zielonego i niebieskiego, możemy uznać go za papier akwarelowy.

Jeśli chcesz dokładniej poznać jego względne relacje między różnymi trybami kolorów, możesz otworzyć swój Photoshop i wybrać próbnik kolorów. Następnie możesz intuicyjnie zobaczyć wartości kolorów tego samego koloru w różnych trybach kolorów.

Na koniec chcielibyśmy wprowadzić dla Ciebie inny popularny tryb kolorów, HSB. HSB nie ma pojęcia „Oryginalny kolor”. Jest klasyfikowany według odczuć ludzkich oczu do kolorów. H oznacza odcień, S nasycenie, a B jasność.

Odcień reprezentuje tendencję kolorystyczną. Każdy kolor ma pewną tendencję kolorystyczną tylko wtedy, gdy nie jest czarny, biały lub szary. Najbogatszy obszar przejścia kolorów w próbniku kolorów służy do wskazywania odcienia. Jego wartość w PS waha się od 0 do 360.

Nasycenie oznacza czystość koloru. Wyższa czystość zapewnia żywsze kolory. Jego wartość w PS waha się od 0 do 100.

Jasność oznacza stopień jasności koloru w zakresie od 0 do 100.

W porównaniu z trybem RGB, trzy wymiary HSB są znacznie bardziej zgodne z odczuciem kolorów przez ludzkie oczy. Wystarczy spojrzeć tylko na wartości HSB, ogólnie można sobie wyobrazić, jaki to kolor.

Jeśli chodzi o ten sam kolor, wartość koloru w trybie RGB to (255, 153, 71), natomiast w HSB to (27, 72, 100).

Trudno ocenić, jak to będzie wyglądać po zmieszaniu ze sobą trzech oryginalnych kolorów, jeśli spojrzymy tylko na RGB. Ale HSB jest inny. Musisz tylko zapoznać się z odcieniami kolorów, takich jak czerwony to 0, pomarańczowy to 30 i żółty to 60, wtedy będziesz wiedział, że będzie to stosunkowo nasycony pomarańczowy kolor o wysokiej jasności i trochę zbliżony do czerwonego, gdy H jest 27.

Następnie powiążemy trzy wymiary dwóch trybów z x, y, x w przestrzeni i narysujemy sześcienny kolor, aby dokonać porównania.

RGB i HSB to tylko różne metody opisu kolorów. Adres możemy potraktować jako metaforę. Załóżmy, że jeśli chcesz poinformować innych ludzi o położeniu cesarskiego pałacu, możesz powiedzieć, że znajduje się on pod numerem 4 na Jingshan Front Street w dzielnicy Dongcheng w Pekinie. Możesz też powiedzieć, że jest to 15 sekund, 55 minut, 39 stopni na szerokości geograficznej północnej i 26 sekund, 23 minuty, 116 stopni na długości geograficznej wschodniej. Sposób opisu HSB jest podobny do pierwszego. Jeśli znasz względny obszar, możesz ogólnie znać pozycję adresu. Chociaż RGB może być dokładniejsze, ale jest bardzo abstrakcyjne.

Tryb HSB istniał, aby pomóc nam wygodniej opisywać kolor. Aby wyświetlić określony kolor na ekranie, w końcu musimy go najpierw przekonwertować na tryb RGB.

Powyżej wprowadzamy trzy tryby kolorów: RGB, HSB, CMYK. W programie musisz skupić się tylko na dwóch trybach: RGB i HSB. Mają jednocześnie swoje zalety i własne zastosowania. Jeśli jesteś z nim zaznajomiony, spełni on większość Twoich wymagań projektowych.

Krok 2: Typ danych do przechowywania kolorów

Aby pokazać kolory w programie, wcześniej używaliśmy głównie trybu RGB. Jednak tylko kontrolując te trzy właściwości, czy możemy wyświetlać dowolne kolory? W komputerze jest tak.

Wspomnieliśmy wcześniej, że w Przetwarzaniu, oprócz R, G, B, możemy wyznaczyć alfa (przezroczystość) dla kolorów. Ale alfa nie należy do składowej koloru. Jego istnienie polega na wygodnym mieszaniu z kolorami. Dlatego, aby komputery mogły dokładnie opisać pewien rodzaj koloru, musimy kontrolować tylko trzy kluczowe zmienne.

Poniżej zaczynamy wprowadzać rodzaj danych Kolor, który jest używany głównie do przechowywania kolorów. Jest podobny do poprzednio przywoływanych typów danych, takich jak boolena, int, float.

Pozwólcie, że najpierw wyjaśnię faktyczne użycie koloru. Wyobraź sobie to: załóżmy, że jeśli do przechowywania pewnych danych możemy użyć tylko wcześniej opanowanych metod, co zrobimy?

Przykład kodu (9-1):

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

pusta konfiguracja (){

rozmiar (400, 400);

r = 255;

g = 0;

b = 0;

}

nieważne rysowanie () {

tło(0);

RektMode(ŚRODEK);

wypełnienie(r,g,b);

prostokąt(szerokość/2, wysokość/2, 100, 100);

}

[/cceN_cpp]

Jeśli chodzi o kolory, które mają tendencję kolorystyczną, musimy stworzyć trzy zmienne do przechowywania danych w trzech kanałach kolorów odpowiednio czerwonego, zielonego i niebieskiego. Później, jeśli chcemy wywołać ten zestaw danych koloru, musimy zapisać go w wypełnieniu lub obrysie.

Ale przekonasz się, że jest to zbyt kłopotliwe, ponieważ dane są ze sobą połączone. Jeśli masz pomysł, aby je spakować do użytku, będzie to wygodniejsze. Dlatego powstaje kolor.

Przykład kodu (9-2):

[cceN_cpp theme="świt"] kolor mójKolor;

pusta konfiguracja (){

rozmiar (400, 400);

mójKolor = kolor(255, 0, 0);

}

nieważne rysowanie () {

tło(0);

RektMode(ŚRODEK);

wypełnij(mójKolor);

prostokąt(szerokość/2, wysokość/2, 100, 100);

} [/cceN_cpp]

To samo z typami danych, takimi jak int, musimy na początku użyć „color myColor” do tworzenia zmiennych.

W konfiguracji używamy „myColor = color(255, 0, 0)”, aby przypisać wartość zmiennej myColor. Podczas gdy funkcja color(a, b, c) słusznie reprezentuje, że ten zestaw danych utworzył typ koloru, aby zaimportować zmienną myColor. Jeśli napiszesz „myColor = (255, 0, 0)”, program się nie powiedzie.

W ostatnim używamy fill(), aby zrealizować operację dopełniania kolorów. Funkcje fill() i stroke() umożliwiają nakładanie się. W zależności od ilości i rodzaju parametrów będzie to miało różne skutki. Importowanie tylko jednej zmiennej całkowitej, która reprezentuje tylko kolor ze skalą szarości. Podczas importowania koloru zmiennego oznacza to, że zakres kolorów będzie większy. Możesz także zaimportować zmienną koloru i zmienną całkowitą, zmienić funkcję fill() w powyższym na fill(myColor, 150), a następnie możesz kontrolować alfa za pomocą drugiego parametru.

Krok 3: Nakładająca się metoda wypełnienia

obrys, tło mają tę samą metodę nakładania się, co wypełnienie.

Odczytaj wartość koloru kanału

Oprócz przypisań można również niezależnie uzyskać wartość RGB w zmiennej color

Przykład kodu (9-3):

[cceN_cpp theme="świt"] kolor mójKolor;

pusta konfiguracja (){

mójKolor = kolor(255, 125, 0);

println(czerwony(mójKolor));

println(zielony(mójKolor));

println(niebieski(mójKolor));

}

[/cceN_cpp]

Wynik w konsoli: 255, 125, 0.

Funkcja red(), green(), blue() względnie powróci do wartości kanałów czerwonego, zielonego i niebieskiego w myColor.

Przypisanie szesnastkowe

Oprócz używania liczb dziesiętnych do pokazania RGB, możemy również użyć szesnastkowego. Dziesiętny oznacza zwiększenie 1, gdy spotyka 10. Podczas szesnastkowy oznacza zwiększenie 1, gdy spotyka 16. Jego względna relacja z dziesiętną to: „0 do 9” odpowiada „0 do 9”, „A do F” odpowiadają „10 do 15”.

Zdjęcie poniżej jest ilustracją metody konwersji.

Oczywiście, jeśli otrzymamy zestaw wartości szesnastkowych, taki jak ff7800, nie musimy go ręcznie konwertować. Program przypisze wartości bezpośrednio do zmiennych kolorów. Jest to bardzo wygodne.

Widzimy, że wiele kart kolorów online wykorzystuje metodę szesnastkową do wyświetlania kolorów.

Podobnie jak drybling społeczności projektantów, grafiki będą miały dołączone palety kolorów. Jeśli widzisz ulubioną kolorystykę, możesz zastosować ją do programu.

Przykład kodu (9-4):

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

pusta konfiguracja (){

rozmiar (400, 400);

RektMode(ŚRODEK);

noStroke();

kolor tyłu = #395b71;

kolorA = #c4d7fb;

kolorB = #f4a7b4;

kolorC = #f9e5f0;

}

nieważne rysowanie () {

tło (Kolor tła);

wypełnienie(kolorA);

prostokąt (200, 200, 90, 300);

wypełnienie(kolorB);

prostokąt (100, 200, 90, 300);

wypełnienie(kolorC);

prostokąt(300, 200, 90, 300);

} [/cceN_cpp]

Teraz kolor jest znacznie wygodniejszy z lepszym efektem niż losowe wprowadzanie wartości.

Dodaj „#” przed szesnastkową wartością koloru, a następnie możesz bezpośrednio przypisać wartość do zmiennej koloru.

Krok 4: Tryb HSB

Oprócz trybu RGB, w dalszej części omówimy tryb HSB. Poniżej przedstawiono metodę przypisywania wartości w trybie HSB.

Przykład kodu (9-5):

[cceN_cpp theme="świt"] void setup() {

rozmiar (400, 400);

ColorMode(HSB);

}

nieważne rysowanie () {

tło(0);

RektMode(ŚRODEK);

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

kolor kolor = kolor(i/20,0 * 255, 255, 255);

wypełnić(kolumna);

prostokąt(i * 20 + 10, wysokość/2, 10, 300);

}

} [/cceN_cpp]

W Processing, aby przełączyć tryb HSB, wystarczy dodać zdanie colorMode(HSB). Użycie funkcji colorMode() służy do zmiany trybu kolorów. Jeśli wpiszemy „HSB” w nawiasie, to zostanie ustawiony tryb HSB; kiedy piszemy „RGB”, zostanie przesunięty w tryb RGB.

Na co warto zwrócić uwagę, to kiedy piszemy colorMode(HSB), domyślna maksymalna wartość HSB to 255. Jest to zupełnie inna wartość niż maksymalna w Photoshopie. W Photoshopie maksymalna wartość H to 360, maksymalna wartość S i B to 100. Musimy więc dokonać konwersji.

Jeśli wartość HSB w Photoshopie wynosi (55, 100, 100), po przeliczeniu na Przetwarzanie, ta wartość powinna wynosić (55/360 × 255, 255, 255), czyli (40, 255, 255).

colorMode() to funkcja, która może się nakładać. Poniżej przedstawimy Ci go szczegółowo.

Krok 5: Metoda nakładania się trybu kolorów

Dlatego jeśli nie chcesz ręcznie konwertować wartości HSB w Photoshopie, możesz napisać „colorMode()” w „colorMode(HSB, 360, 100, 100)”.

Przypadek zastosowania trybu HSB 1

Ponieważ tryb RGB nie jest całkiem wygodny do kontrolowania zmian odcienia, w tej chwili, jeśli chcesz bardziej elastycznie kontrolować kolory, możesz rozważyć tryb HSB.

Przykład kodu (9-6):

[cceN_cpp theme="świt"] void setup() {

rozmiar (800, 800);

tło(0);

ColorMode(HSB);

}

nieważne rysowanie () {

obrysWaga(2);

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

pływak nowyX, nowyY;

nowyX = myszX + (szum(millis()/1000,0 + 1,2) - 0,5) * 800;

nowyY = myszY + (szum(millis()/1000.0) - 0.5) * 800;

linia(myszX, myszY, nowyX, nowyY);

} [/cceN_cpp]

Kiedy kontrolujemy H(odcienie) w skoku, użyliśmy millis(). Uzyska czas działania od początku do chwili obecnej. Tak więc, podobnie jak z upływem czasu, wartość H(odcień) wzrośnie automatycznie, a następnie zmieni się kolor.

Jednostką milis() jest ms. Tak więc, gdy program działa przez 1 sekundę, zwracana wartość wyniesie 1000. Doprowadzi to do zbyt dużej wartości. Więc musimy to podzielić przez 1000,0.

Ponieważ mamy nadzieję, że kolory będą przedstawiać cykliczne krążenie, musimy wykonać operację modulo, gdy w końcu zapiszemy pierwszy parametr w skoku. Może to zapewnić, że zacznie się ponownie od 0, gdy H(odcień) przekroczy 255.

Funkcja strokeWeight() może kontrolować grubość linii. Odpowiednią jednostką parametrów w nawiasie jest piksel.

Krok 6: Przypadek aplikacji trybu 2

Przykład kodu (9-7):

[cceN_cpp theme="świt"] int num; // ilość aktualnie rysowanych linii

zmiennoprzecinkowa pozycja X_A, pozycja Y_A; // Współrzędna punktu A

zmiennoprzecinkowa pozycja X_B, pozycja Y_B; // Współrzędna punktu B

kąt pływaniaA, prędkośćA; // Kąt punktu A, prędkość

kąt pływaniaB, prędkośćB; // Kąt punktu B, prędkość

promień pływakaX_A, promieńY_A; // Promień owalu utworzony przez punkt A na osi X(Y).

promień pływakaX_B, promieńY_B; // promień owalu utworzony przez punkt B na osi X(Y).

pusta konfiguracja () {

rozmiar (800, 800);

ColorMode(HSB);

tło(0);

prędkość A = 0,0009;

prędkośćB = 0,003;

promieńX_A = 300;

promień Y_A = 200;

promieńX_B = 200;

promień Y_B = 300;

}

nieważne rysowanie () {

przetłumacz(szerokość/2, wysokość/2);

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

kątA += prędkośćA;

kątB += prędkośćB;

pozX_A = cos(kątA) * promieńX_A;

posY_A = sin(kątA) * promieńY_A;

posX_B = cos(kątB) * promieńX_B;

posY_B = sin(kątB) * promieńY_B;

skok(int(num/500.0) % 255, 255, 255, 10);

linia(pozycja X_A, pozycja Y_A, pozycja X_B, pozycja Y_B);

liczba++;

}

} [/cceN_cpp]

Efekt operacji:

Obraz wyjściowy:

Widoczny wzór jest tworzony przez ruchomą linię poprzez ciągłe nakładanie się. Ślady dwóch punktów końcowych linii są dwoma okręgami oddzielnie.

W trybie HSB kontrolowaliśmy zmiany odcienia. Wraz ze wzrostem linii odcień się przesunie. Kiedy masywne półprzezroczyste linie nakładają się na siebie, tworzy bardzo bogaty gradient kolorów.

W funkcji draw wbudowaliśmy pętlę for, której celem jest użycie pętli for do kontrolowania ilości linii. Jest to równoznaczne z kontrolowaniem szybkości rysowania. Zwiększenie wartości warunku oceny w pętli for spowoduje zwiększenie przenikania rysunku.

Poniżej schematyczny rysunek. Możesz wyraźniej zobaczyć ślad ruchu kół.

Dostosuj inną prędkość i promień, utworzone wzory również będą inne. Spróbuj zmienić zmienne, takie jak kąt, prędkość, promieńX, promieńY i zobacz, co się stanie.

Krok 7: Tryb mieszania warstw

Różne tryby kolorów, o których mówiliśmy wcześniej, są używane do kolorowania elementów graficznych. Oprócz użycia tej metody do kontrolowania koloru, Przetwarzanie może używać różnych trybów mieszania warstw, takich jak Photoshop.

Otwórz okno warstw w PS, kliknij, aby wybrać tryb mieszania warstw, a następnie zobaczymy te opcje.

Są to istniejące tryby warstw w PS. Mówiąc prościej, tryb mieszania można uznać za rodzaj trybu obliczania kolorów. Zadecyduje, który kolor zostanie utworzony w ostatnim, gdy „kolor A” plus „kolor B”. Tutaj „kolor A” oznacza kolor za bieżącą warstwą (zwany również kolorem podstawowym). „Kolor B” oznacza kolor bieżącej warstwy (zwany również kolorem mieszanym). Program obliczy, aby uzyskać kolor C na podstawie wartości RGB i alfa koloru A i B. Zostanie on wyświetlony na ekranie jako kolor wynikowy.

Różne tryby warstw oznaczają różne metody obliczeń. W kolejnej połowie tej serii artykułów wyjaśnimy to szczegółowo. Teraz musimy tylko najpierw poznać jego zastosowanie.

Spójrzmy na przykład użycia Add Mode w programie.

Przykład kodu (9-8):

[cceN_cpp theme="świt"] PObraz obraz1, obraz2;

pusta konfiguracja (){

rozmiar (800, 400);

image1 = loadImage("1.jpg");

image2 = loadImage("2.jpg");

}

nieważne rysowanie () {

tło(0);

tryb mieszania (DODAJ);

obraz(obraz1, 0, 0, 400, 400);

image(obraz2, myszX, myszY, 400, 400);

}

[/cceN_cpp]

Wynik:

Funkcja blendMode() służy do ustawienia trybu mieszania grafiki. Wypełniamy ADD za oznacza, że ustawiliśmy tryb dodawania.

W programie nie ma pojęcia warstwy. Ale ponieważ istnieje kolejność rysowania elementów graficznych, dlatego podczas mieszania obrazów obraz 1 jest traktowany jako kolor bazowy, a obraz 2 jako kolor mieszany.

Tryb ADD należy do „Brighten Class”. Po jego użyciu uzyskasz rozświetlony efekt.

Poniżej znajduje się tryb mieszania, którego można użyć w Przetwarzaniu.

Krok 8: Przetwarzanie trybu mieszania

Możemy spróbować zmienić inny tryb mieszania, aby zobaczyć efekt.

Gdy przykład (9-8) przyjął tryb nakładania się (tło powinno być ustawione na białe):

Po użyciu trybu odejmowania (tło powinno być ustawione na białe):

Krok 9: Przypadek zastosowania trybu mieszania warstw

Tryb mieszania może być używany nie tylko do zdjęć, ale również nadaje się do wszystkich elementów graficznych na płótnie. Poniżej pokazano użycie trybu dodawania. Może być używany do analogowania różnych efektów świetlnych.

Przykład kodu (9-9):

[cceN_cpp theme="świt"] void setup() {

rozmiar (400, 400);

}

nieważne rysowanie () {

tło(0);

tryb mieszania (DODAJ);

int liczba = int(3000 * myszX/400.0);

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

jeśli (losowo(1) < 0,5){

wypełnienie (0, 50, 0);

}w przeciwnym razie{

wypełnienie(50);

}

elipsa(losowo(50, szerokość - 50), losowo(50, wysokość - 50), 20, 20);

}

}

[/cceN_cpp]

Tutaj, za pomocą funkcji random, połączyliśmy kolor zielony i biały, które już przeniosły alfa, do cząstek. Możemy użyć myszki, aby kontrolować ilość okręgu i obserwować nakładający się efekt.

ADD i SCREEN są dość podobne. Chociaż rozjaśnianie jest takie samo, istnieją subtelne różnice. Możesz go zastąpić SCREEN i dokonać porównania. Po nałożeniu, czystość i jasność ADD będą wyższe. Nadaje się do analogowania efektu świetlnego.

Jeśli chodzi o kolor, tutaj zakończyliśmy ten rozdział. W przypadku tego „języka” opanowałeś już wystarczającą ilość słownictwa. Teraz pospiesz się, aby użyć kodu, aby cieszyć się światem kształtów i kolorów!

Krok 10: Źródło

Ten artykuł pochodzi z:

Jeśli masz jakieś pytania, możesz skontaktować się z: [email protected].