Интересно ръководство за програмиране при обработка за дизайнер-Контрол на цветовете: 10 стъпки

2024 Автор: John Day | [email protected]. Последно модифициран: 2024-01-30 07:50

В предишни глави сме говорили повече за това как да използваме кода за оформяне вместо знанията за цвета. В тази глава ще разгледаме по -задълбочено този аспект на знанието.

Стъпка 1: Основни познания за цвета

В определен аспект цветът е надминал човешката интуиция. Различните красиви цветове, които виждаме с просто око, всъщност се състоят от едни и същи компоненти. Само с трите светли цвята червено, зелено и синьо можем да създадем всички цветове, които могат да се видят от човешките очи чрез смес.

Мобилните екрани и компютърните екрани, които виждате в момента, са създадени в основата на този принцип. Червеното, зеленото и синьото се наричат трите оригинални цвята на светлината. Чрез съотношението на трите елемента можем да осигурим определен цвят. Този метод на описание се нарича още RGB режим. Сред него червеното е R, зеленото е G и синьото е В.

С изключение на режим RGB, има друг режим, наречен CMYK режим. Обикновено се комбинира с печат. В печата има и три оригинални цвята. Той обаче е различен от трите оригинални цвята на светлината. Те са червени, жълти и сини поотделно. Сред него C е за циан, M е за магента и Y е за жълто. Теоретично само чрез CMY можем да смесваме повечето цветове. Но поради технологията на производство на суровина, едва ли можем да накараме насищането на CMY да постигне 100%. Ако смесим тези три цвята, не можем да получим черен цвят, който е достатъчно тъмен. Така че има допълнителен К, който е за черно печатащо мастило, като добавка към печат.

Що се отнася до RGB и CMYK, трябва само да знаете, че има най -очевидна разлика в природата. RGB е плюс цветен режим, който увеличава яркостта чрез смесване на повече цветове. Докато CMYK е минус цветен режим, който увеличава тъмнината чрез смесване на повече цветове. На снимката по -долу можем визуално да видим приликите и разликите на двата режима. Лявата картина, можем да си представим като тъмна къща с включени три различни цвята фенерчета. Снимката вдясно можем да я разглеждаме като акварелна хартия, след като се припокрива с три пигмента червено, зелено и синьо.

Ако искате да знаете по -задълбочено неговата относителна връзка между различните цветови режими, можете да отворите фотошопа си и да изберете инструмента за избор на цвят. Тогава можете да видите интуитивно цветовите стойности на един и същи цвят при различни цветови режими.

В последния бихме искали да въведем друг общ цветен режим за вас, HSB. HSB няма концепция за „оригинален цвят“. Той е класифициран според чувствата на човешките очи към цветовете. H означава нюанс, S означава насищане, а B е яркост.

Hue представлява тенденцията за цвят. Всеки цвят има определен вид цветова тенденция, само ако не е бял, бял или сив. Най -богатата област за преход на цвят на инструмента за избор на цвят се използва за обозначаване на нюанса. Стойността му в PS варира от 0 до 360.

Наситеността означава чистотата на цвета. По -високата чистота носи по -ярки цветове. Стойността му в PS варира от 0 до 100.

Яркостта означава степента на осветеност на цвета, варираща от 0 до 100.

В сравнение с режима RGB, трите измерения на HSB са много по -съгласувани с усещането на човешките очи за цветове. Просто погледнете само стойностите на HSB, като цяло можете да си представите какъв цвят е.

Що се отнася до същия цвят, стойността на цвета в RGB режим е (255, 153, 71), докато в HSB е (27, 72, 100).

Трудно е да се прецени как ще изглежда след смесването на трите оригинални цвята заедно, ако погледнем само RGB. Но HSB е различен. Трябва само да се запознаете с нюансите на цветовете като червеното е 0, оранжевото е 30 и жълтото е 60, тогава ще разберете, че това ще бъде сравнително наситен оранжев цвят с висока яркост и малко близо до червеното, когато H е 27.

След това ще съответстваме на трите измерения на двата режима в x, y, x в пространството и ще нарисуваме цветен кубик, за да направим сравнение.

RGB и HSB са просто различни методи за описание на цветовете. Можем да приемем адреса като метафора. Да предположим, че ако искате да кажете на други хора позицията на императорския дворец, можете да кажете, че е на номер 4 на Jingshan Front Street, район Dongcheng, Пекин. Или можете да кажете, че е на 15 секунди, 55 минути, 39 градуса на северна ширина и 26 секунди, 23 минути, 116 градуса на източна дължина. Методът на описание на HSB е подобен на първия. Ако сте запознати с относителната област, обикновено можете да знаете позицията на адреса. Докато RGB може да е по -точен, но е много абстрактен.

Режимът HSB съществува с цел да ни помогне да опишем по -удобно цвета. За да покажем определен вид цвят на екрана, накрая първо трябва да го преобразуваме в режим RGB.

В горното въвеждаме три цветови режима: RGB, HSB, CMYK. В програмата трябва да се съсредоточите само върху два режима: RGB и HSB. Те имат свои собствени предимства и собствени приложения едновременно. Ако сте запознати с него, той ще задоволи най -дизайнерските ви изисквания.

Стъпка 2: Тип данни за съхраняване на цветове

За да показваме цветове в програмата, преди това използваме RGB режим. Въпреки това, само като контролираме трите свойства, можем да покажем някакви цветове? В компютъра е така.

Преди това споменахме в Processing, с изключение на R, G, B, можем да обозначим алфа (прозрачност) за цветовете. Но алфата не принадлежи към компонента на цвета. Неговото съществуване е до удобна смес с цветове отзад. Следователно, за да могат компютрите да описват точно определен цвят, трябва да контролираме само ключовите три променливи.

По -долу започваме да въвеждаме един вид тип данни Цвят, който се използва главно за съхраняване на цветове. Подобно е на споменатите по -рано типове данни като boolena, int, float.

Тук нека първо обясня действителното използване на цвета. Представете си това: да предположим, че ако можем да използваме само усвоените преди това методи за съхраняване на определени данни, какво да правим?

Пример за код (9-1):

[cceN_cpp theme = "зори"] int r, g, b;

void setup () {

размер (400, 400);

r = 255;

g = 0;

b = 0;

}

void draw () {

фон (0);

rectMode (ЦЕНТЪР);

попълнете (r, g, b);

правоъгълна (ширина/2, височина/2, 100, 100);

}

[/cceN_cpp]

Що се отнася до цветовете, които имат тенденция към оцветяване, трябва да създадем три променливи, за да съхраняваме данни в три цветови канала съответно в червено, зелено и синьо. По -късно, ако искаме да извикаме този набор от цветни данни, трябва да ги запишем в запълване или щрих.

Но ще откриете, че е твърде обезпокоително да го направите, защото данните са взаимосвързани. Ако имате идея да ги опаковате в употреба, ще бъде по -удобно. Следователно се създава цвят.

Пример за код (9-2):

[cceN_cpp theme = "зори"] цвят myColor;

void setup () {

размер (400, 400);

myColor = цвят (255, 0, 0);

}

void draw () {

фон (0);

rectMode (ЦЕНТЪР);

fill (myColor);

правоъгълна (ширина/2, височина/2, 100, 100);

} [/cceN_cpp]

Същото с типове данни като int, трябва да използваме „color myColor“в началото, за да създадем променливи.

При настройката използваме „myColor = цвят (255, 0, 0)“, за да присвоим стойност на променливата myColor. Докато цветът на функцията (a, b, c) правилно представя, че този набор от данни е формирал цветен тип, така че да импортира променлива myColor. Ако напишете „myColor = (255, 0, 0)“, програмата ще се обърка.

В последния, ние използваме fill (), за да реализираме операцията на цветна подложка. Функциите fill () и stroke () позволяват да се припокриват. Според количеството и вида на параметрите ще има различни ефекти. Импортирането само на една целочислена променлива, която я представлява, е цвят само със скали на сивото. Докато импортирате променлив цвят, това означава, че цветовата гама ще бъде по -голяма. Можете също да импортирате цветна променлива и цяло число, да промените функцията fill () в горното в fill (myColor, 150), след което можете да контролирате алфа с втория параметър.

Стъпка 3: Припокриващ се метод на запълване

щрих, фон имат същия метод на припокриване с запълване.

Прочетете стойността на цвета на канала

В допълнение към заданията, можете също така независимо да получите стойността на RGB в цветовата променлива

Пример за код (9-3):

[cceN_cpp theme = "зори"] цвят myColor;

void setup () {

myColor = цвят (255, 125, 0);

println (червено (myColor));

println (зелен (myColor));

println (син (myColor));

}

[/cceN_cpp]

Резултат в конзолата: 255, 125, 0.

Функцията red (), green (), blue () ще се върне относително към стойността на червения, зеления и синия канал в myColor.

Шестнадесетично присвояване

С изключение на използването на десетични числа за показване на RGB, можем да използваме и шестнадесетичен. Десетичен означава увеличаване на 1, когато отговаря на 10. Докато шестнадесетичен означава увеличаване на 1, когато отговаря на 16. Неговата относителна връзка с десетичен знак е: „0 до 9“съответства на „0 до 9”,“A до F”съответстват на“10 до 15”.

Снимката по -долу е илюстрацията на метода на преобразуване.

Разбира се, ако получим набор от шестнадесетични стойности като ff7800, не е нужно да го преобразуваме ръчно. Програмата ще присвоява стойности на цветовите променливи директно. Много е удобно.

Можем да видим, че много цветни карти онлайн всички приемат шестнадесетичен метод за показване на цвят.

Подобно на дрибъла на дизайнерската общност, произведения на изкуството ще бъдат прикачени цветни палитри. Ако видите любимо оцветяване, можете да го приложите към програмата.

Пример за код (9-4):

[cceN_cpp theme = "dawn"] цвят backColor, colorA, colorB, colorC;

void setup () {

размер (400, 400);

rectMode (ЦЕНТЪР);

noStroke ();

backColor = #395b71;

colorA = #c4d7fb;

colorB = #f4a7b4;

colorC = #f9e5f0;

}

void draw () {

фон (backColor);

запълване (colorA);

правоъгълна (200, 200, 90, 300);

запълване (colorB);

правоъгълник (100, 200, 90, 300);

запълване (colorC);

правоъгълник (300, 200, 90, 300);

} [/cceN_cpp]

Сега цветът е много по -удобен с по -добър ефект, отколкото въвеждането на стойности на случаен принцип.

Добавете „#“преди шестнадесетичната стойност на цвета, след което можете да присвоите стойност на променливия цвят директно.

Стъпка 4: Режим HSB

Освен RGB режим, по -нататък ще говорим и за HSB режим. По -долу е показан методът на присвояване на стойности в режим HSB.

Пример за код (9-5):

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

размер (400, 400);

colorMode (HSB);

}

void draw () {

фон (0);

rectMode (ЦЕНТЪР);

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

цвят col = цвят (i/20.0 * 255, 255, 255);

запълване (колона);

правоъгълна (i * 20 + 10, височина/2, 10, 300);

}

} [/cceN_cpp]

В Processing, за да превключим HSB режим, трябва само да добавим изречение от colorMode (HSB). Използването на функцията colorMode () е за промяна на цветовия режим. Ако напишем “HSB” в скобата, той ще бъде настроен на HSB режим; докато пишем „RGB“, той ще бъде преместен в режим RGB.

Струва си да се обърне внимание, когато пишем colorMode (HSB), максималната стойност по подразбиране на HSB е 255. Това е доста различно от максималната стойност във Photoshop. Във Photoshop максималната стойност на H е 360, максималната стойност на S и B са 100. Така че трябва да направим преобразуване.

Ако стойността на HSB във Photoshop е (55, 100, 100), когато се преобразува в Обработка, тази стойност трябва да бъде (55 /360 × 255, 255, 255), т.е. (40, 255, 255).

colorMode () е функция, която може да се припокрива. По -долу ще ви го представим подробно.

Стъпка 5: Метод на припокриване на ColorMode

Следователно, ако не искате да конвертирате HSB стойността във Photoshop ръчно, можете да напишете „colorMode ()“в „colorMode (HSB, 360, 100, 100)“.

Случай за приложение в режим HSB 1

Тъй като режимът RGB не е много удобен за контролиране на промените в нюанса, в този момент, ако искате да контролирате цветовете по -гъвкаво, можете да помислите за режим HSB.

Пример за код (9-6):

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

размер (800, 800);

фон (0);

colorMode (HSB);

}

void draw () {

strokeWeight (2);

ход (int (millis ()/1000.0 * 10)%255, 255, 255);

float newX, newY;

newX = mouseX + (шум (милис ()/1000.0 + 1.2) - 0.5) * 800;

новY = мишкаY + (шум (милис ()/1000.0) - 0.5) * 800;

ред (mouseX, mouseY, newX, newY);

} [/cceN_cpp]

Когато контролираме H (нюанси) в ход, използвахме millis (). Той ще получи времето за работа от началото до настоящето. По този начин, както с напредването на времето, стойността на H (нюанс) ще се увеличи автоматично, след което цветът се променя.

Единицата за милис () е ms. Така че, когато програмата работи за 1 секунда, връщаната стойност ще бъде 1000. Това ще доведе до твърде голяма стойност. Така че трябва да го разделим на 1000.0.

Тъй като се надяваме, че цветовете ще представят периодична циркулация, затова трябва да направим операция по модул, когато най -накрая напишем първия параметър в ход. Това може да гарантира, че то ще започне отново от 0, когато H (оттенък) надхвърли 255.

Функция ходWeight () може да контролира дебелината на линиите. Съответната единица за параметри в скобата е пиксел.

Стъпка 6: Режим на приложение за режим 2

Пример за код (9-7):

[cceN_cpp theme = "dawn"] int num; // количество начертани линии в момента

поплавък posX_A, posY_A; // Координата на точка А

поплавък posX_B, posY_B; // Координата на точка В

ъгъл на поплавъкA, скоростA; // Ъгъл на точка А, скорост

ъгъл на поплавъкB, скоростB; // Ъгъл на точка В, скорост

радиус на поплавъкX_A, радиусY_A; // Радиусът на овала, образуван от точка А в оста X (Y).

радиус на поплавкаX_B, радиусY_B; // радиусът на овала, образуван от точка B в оста X (Y).

void setup () {

размер (800, 800);

colorMode (HSB);

фон (0);

скоростA = 0,0009;

скоростB = 0,003;

радиусX_A = 300;

радиусY_A = 200;

радиусX_B = 200;

радиусY_B = 300;

}

void draw () {

превод (ширина/2, височина/2);

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

ъгъл А += скорост А;

ъгълB += скоростB;

posX_A = cos (ъгълA) * радиусX_A;

posY_A = sin (ъгълA) * радиусY_A;

posX_B = cos (ъгълB) * радиусX_B;

posY_B = sin (ъгълB) * радиусY_B;

ход (int (num/500.0) % 255, 255, 255, 10);

ред (posX_A, posY_A, posX_B, posY_B);

номер ++;

}

} [/cceN_cpp]

Операционен ефект:

Изходна снимка:

Моделът, който сте видели, се произвежда от движеща се линия чрез постоянно припокриване. Следите от двете крайни точки на линията са два кръга поотделно.

Чрез режим HSB ние контролираме промените в нюанса. С увеличаването на линиите, нюансът ще се измести. Когато масивни полупрозрачни линии се припокриват, това ще създаде много богат цветен градиент.

Вградихме цикъл for във функцията за изтегляне с цел да използваме цикъла for за контрол на количеството на реда. Това е еквивалентно на това, че имаме контролирана скорост на рисуване. Увеличавайки стойността на условието за преценка в цикъла for, това ще увеличи чертежа seepd.

По -долу е схематичната фигура. Можете да видите по -ясно следите от движение на кръгове.

Регулирайте различна скорост и радиус, образуваните модели също ще бъдат различни. Опитайте се да промените променливи като ъгъл, скорост, radiusX, radiusY и вижте какво ще се случи.

Стъпка 7: Режим на смесване на слоеве

Различните цветови режими, за които говорихме по -рано, се използват само за оцветяване на графични компоненти. С изключение на използването на този метод за контрол на цвета, Processing може да използва режими на смесване на различни слоеве като Photoshop.

Отворете прозореца на слоя в PS, щракнете, за да изберете режим на смесване на слоеве, след което можем да видим тези опции.

Това са съществуващи режими на слоеве в PS. Казано по -просто, режимът на смесване може да се разглежда като вид режим на изчисляване на цветовете. Той ще реши кой цвят ще бъде създаден в последния, когато „цвят А“плюс „цвят В“. Тук „цвят А“означава цвета зад текущия слой (наричан още основен цвят). „Цвят В“означава цвета на текущия слой (наричан още смесен цвят). Програмата ще изчисли за получаване на цвят C според стойността на RGB и алфа на цвят A и B. Тя ще се покаже на екрана като цвят на резултата.

Режимът на различен слой означава различни методи за изчисление. В следващата половина на тази поредица от статии ще продължим да я обясняваме подробно. Сега остава само първо да разберем използването му.

Нека разгледаме пример за използване на режим на добавяне в програмата.

Пример за код (9-8):

[cceN_cpp theme = "зори"] PImage image1, image2;

void setup () {

размер (800, 400);

image1 = loadImage ("1.jpg");

image2 = loadImage ("2.jpg");

}

void draw () {

фон (0);

blendMode (ADD);

изображение (изображение1, 0, 0, 400, 400);

изображение (image2, mouseX, mouseY, 400, 400);

}

[/cceN_cpp]

Резултат:

Функцията blendMode () се използва за задаване на режим на смесване на графики. Попълваме ADD зад, което означава, че сме задали режим на добавяне.

В програмата няма концепция за слой. Но тъй като съществува графична последователност на графичните компоненти, следователно при смесване на изображения, изображение 1 се разглежда като основен цвят, а изображение 2 като смесен цвят.

Режимът ADD принадлежи към “Brighten Class”. След като го използвате, ще получите по -светъл ефект.

По -долу е представен режим на смесване, който може да се използва при обработка.

Стъпка 8: Обработка на режим на смесване

Можем да опитаме да променим различен режим на смесване, за да видим ефекта.

Когато пример (9-8) е приел режим на припокриване (фонът трябва да бъде зададен на бял):

След като използвате Режим на изваждане (фонът трябва да бъде настроен на бял):

Стъпка 9: Пример за режим на смесване на слоеве

Режимът на смесване може да се използва не само за снимки, но и подходящ за всички графични компоненти в платното. По -долу е показана употреба за режим на добавяне. Може да се използва за аналог на различни светлинни ефекти.

Пример за код (9-9):

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

размер (400, 400);

}

void draw () {

фон (0);

blendMode (ADD);

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

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

ако (случаен (1) <0.5) {

попълнете (0, 50, 0);

} else {

попълнете (50);

}

елипса (произволна (50, ширина - 50), произволна (50, височина - 50), 20, 20);

}

}

[/cceN_cpp]

Тук чрез функция random сме смесили зеления цвят и белия цвят, които вече са пренесли алфа, в частиците. Можем да използваме мишката, за да контролираме количеството на кръга и да наблюдаваме ефекта на припокриване.

ADD и SCREEN са доста сходни. Въпреки че е същото да се озарява, има тънки разлики. Можете да го замените с SCREEN и да направите сравнение. След като се припокрият, чистотата и яркостта на ADD ще бъдат по -високи. Подходящ е за аналог на светлинния ефект.

Що се отнася до цвета, тук стигнахме до края на тази глава. За този „език“вече сте усвоили достатъчно вакабуларии. Побързайте да използвате кода, за да се насладите на света на формата и цвета!

Стъпка 10: Източник

Тази статия е от:

Ако имате въпроси, можете да се свържете с: [email protected].