Интересное руководство по программированию обработки для дизайнера - Управление цветом: 10 шагов

2024 Автор: John Day | [email protected]. Последнее изменение: 2024-01-30 11:48

В предыдущих главах мы больше говорили о том, как использовать код для формирования формы, а не о знаниях о цвете. В этой главе мы собираемся глубже изучить этот аспект знания.

Шаг 1. Основные сведения о цвете

Цвет в определенном аспекте превзошел человеческую интуицию. Различные красивые цвета, которые мы видим невооруженным глазом, на самом деле состоят из одних и тех же компонентов. Только с помощью трех светлых цветов: красного, зеленого и синего, мы можем создать все цвета, которые могут быть видны человеческим глазом через смесь.

Мобильные экраны и экраны компьютеров, которые вы сейчас видите, созданы на основе этого принципа. Красный, зеленый и синий называются тремя исходными цветами света. Благодаря соотношению трех элементов мы можем обеспечить определенный цвет. Этот способ описания также называется режимом RGB. Среди них красный - R, зеленый - G и синий - B.

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

Что касается RGB и CMYK, вам нужно только знать, что существует наиболее очевидная разница в природе. RGB - это цветной режим плюс, который увеличивает яркость за счет смешивания большего количества цветов. CMYK - это минусовый цветовой режим, который увеличивает темноту за счет смешивания большего количества цветов. На картинке ниже мы можем визуально увидеть сходство и различие двух режимов. На левом изображении мы можем представить себе темный дом с включенными фонариками трех разных цветов. Изображение справа, мы можем рассматривать его как акварельную бумагу после наложения трех пигментов: красного, зеленого и синего.

Если вы хотите более глубоко узнать его относительные отношения между различными цветовыми режимами, вы можете открыть свой фотошоп и выбрать палитру цветов. Затем вы можете интуитивно увидеть значения цвета одного и того же цвета в разных цветовых режимах.

В последнем случае мы хотели бы представить вам еще один распространенный цветовой режим - HSB. HSB не имеет понятия «Исходный цвет». Он классифицируется в соответствии с восприятием цвета человеческими глазами. H обозначает оттенок, S - насыщенность, а B - яркость.

Оттенок представляет собой цветовую тенденцию. Каждый цвет имеет определенную цветовую тенденцию, только если он не черный, белый или серый. Область наиболее насыщенного перехода цвета на палитре цветов используется для обозначения оттенка. Его значение в 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 равно H. 27.

Затем мы сопоставим три измерения двух режимов с координатами x, y, x в пространстве и нарисуем цветной кубик для сравнения.

RGB и HSB - это просто разные методы описания цветов. Мы можем принять адрес как метафору. Предположим, если вы хотите рассказать другим людям о местонахождении Императорского дворца, вы можете сказать, что он находится в доме № 4 по улице Цзиншань Фронт-стрит, район Дунчэн, Пекин. Или вы можете сказать, что это 15 секунд, 55 минут, 39 градусов по северной широте и 26 секунд, 23 минуты, 116 градусов по восточной долготе. Метод описания HSB аналогичен предыдущему. Если вы знакомы с относительной областью, вы обычно можете знать положение адреса. Хотя RGB может быть более точным, но он очень абстрактный.

Режим HSB существовал с целью помочь нам более удобно описывать цвета. Чтобы отобразить на экране определенный цвет, нам, в конце концов, нужно сначала преобразовать его в режим RGB.

Выше мы представляем три цветовых режима: RGB, HSB, CMYK. В программе нужно ориентироваться только на два режима: RGB и HSB. У них есть свои преимущества и свои приложения одновременно. Если вы с ним знакомы, он удовлетворит большинство ваших требований к проектированию.

Шаг 2: Тип данных для хранения цветов

Чтобы отображать цвета в программе, раньше в основном мы использовали режим RGB. Однако можно ли отображать какие-либо цвета, только управляя тремя свойствами? В компьютере это так.

Ранее мы упоминали, что в разделе «Обработка», кроме R, G, B, мы можем указать альфа (прозрачность) для цветов. Но альфа не относится к цветовой составляющей. Его существование заключается в удобном смешивании с красками позади. Следовательно, чтобы компьютеры точно описывали определенный вид цвета, мы должны управлять только тремя ключевыми переменными.

Далее мы начинаем вводить своего рода тип данных Color, который в основном используется для хранения цветов. Он похож на ранее упомянутые типы данных, такие как boolena, int, float.

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

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

[cceN_cpp theme = "рассвет"] int r, g, b;

void setup () {

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

г = 255;

г = 0;

b = 0;

}

void draw () {

фон (0);

rectMode (ЦЕНТР);

заполнить (r, g, b);

rect (ширина / 2, высота / 2, 100, 100);

}

[/cceN_cpp]

Что касается цветов, которые имеют цветовую тенденцию, нам нужно создать три переменные для хранения данных в трех цветовых каналах красного, зеленого и синего соответственно. Позже, если мы захотим вызвать этот набор цветовых данных, мы должны записать его в заливку или обводку.

Но вы обнаружите, что это слишком сложно сделать, потому что данные взаимосвязаны. Если у вас есть идея упаковать их в пользование, так будет удобнее. Таким образом создается цвет.

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

[cceN_cpp theme = "dawn"] цвет myColor;

void setup () {

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

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

}

void draw () {

фон (0);

rectMode (ЦЕНТР);

заливка (myColor);

rect (ширина / 2, высота / 2, 100, 100);

} [/cceN_cpp]

То же самое с типами данных, такими как int, мы должны использовать «color myColor» в начале для создания переменных.

В настройке мы используем myColor = color (255, 0, 0) для присвоения значения переменной myColor. В то время как функция color (a, b, c) правильно представляет, что этот набор данных сформировал цветовой тип, чтобы импортировать переменную myColor. Если вы напишете «myColor = (255, 0, 0)», то программа пойдет не так.

В последнем случае мы используем fill () для реализации операции заполнения цветом. Функции fill () и stroke () могут перекрываться. В зависимости от количества и типа параметров он будет иметь разный эффект. Импортируется только одна целочисленная переменная, которая представляет собой цвет только с оттенками серого. При импорте переменного цвета это означает, что диапазон цветов будет больше. Вы также можете импортировать переменную цвета и целочисленную переменную, изменить функцию fill () в приведенном выше примере на fill (myColor, 150), а затем вы можете контролировать альфа-канал с помощью второго параметра.

Шаг 3: Метод заполнения с перекрытием

штрих, фон имеют тот же метод перекрытия с заливкой.

Чтение значения цвета канала

Помимо присвоений, вы также можете самостоятельно получить значение RGB в переменной цвета.

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

[cceN_cpp theme = "dawn"] цвет 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);

заливка (цветА);

прямоугольник (200, 200, 90, 300);

заливка (цветB);

rect (100, 200, 90, 300);

заливка (цветC);

rect (300, 200, 90, 300);

} [/cceN_cpp]

Теперь цвет намного удобнее с лучшим эффектом, чем случайный ввод значений.

Добавьте «#» перед шестнадцатеричным значением цвета, тогда вы можете напрямую присвоить значение переменной color.

Шаг 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);

заполнить (col);

rect (я * 20 + 10, высота / 2, 10, 300);

}

} [/cceN_cpp]

В обработке, чтобы переключить режим 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 (миллис () / 1000.0 * 10)% 255, 255, 255);

float newX, newY;

newX = mouseX + (noise (millis () / 1000.0 + 1.2) - 0.5) * 800;

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

строка (mouseX, mouseY, newX, newY);

} [/cceN_cpp]

Когда мы контролируем H (оттенки) в штрихе, мы использовали millis (). Он получит время работы от начала до настоящего времени. Таким образом, как и с течением времени, значение H (оттенок) будет автоматически увеличиваться, а затем цвет изменится.

Единица миллис () - мс. Итак, когда программа выполняется в течение 1 секунды, возвращаемое значение будет 1000. Это приведет к слишком большому значению. Таким образом, мы должны разделить его на 1000.0.

Поскольку мы надеемся, что цвета будут представлять собой периодическую циркуляцию, поэтому нам нужно выполнить операцию по модулю, когда мы, наконец, напишем первый параметр в штрихе. Это может гарантировать, что он снова начнется с 0, когда H (оттенок) превысит 255.

Функция strokeWeight () может управлять толщиной линий. Соответствующая единица измерения параметров в скобках - пиксель.

Шаг 6. Вариант применения режима 2

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

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

float posX_A, posY_A; // Координата точки А

float posX_B, posY_B; // Координата точки B

угол поплавка A, скорость A; // Угол точки А, скорость

угол поплавкаB, скоростьB; // Угол точки B, скорость

float radiusX_A, radiusY_A; // Радиус овала, образованного точкой A на оси X (Y).

float radiusX_B, radiusY_B; // радиус овала, образованного точкой B на оси X (Y).

void setup () {

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

colorMode (HSB);

фон (0);

speedA = 0,0009;

speedB = 0,003;

радиусX_A = 300;

радиусY_A = 200;

радиусX_B = 200;

радиусY_B = 300;

}

void draw () {

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

for (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 (число / 500.0)% 255, 255, 255, 10);

линия (posX_A, posY_A, posX_B, posY_B);

число ++;

}

} [/cceN_cpp]

Эффект операции:

Выходное изображение:

Узор, который вы видели, создается движущейся линией через постоянное перекрытие. Следы двух конечных точек линии представляют собой две окружности отдельно.

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

Мы встроили цикл for в функцию draw, чтобы использовать цикл for для управления количеством строк. Это эквивалентно тому, что у нас есть контролируемая скорость рисования. Увеличение значения условия оценки в цикле for увеличит просачивание рисунка.

Ниже схематический рисунок. Вы можете более четко увидеть след движения кругов.

Отрегулируйте другую скорость и радиус, формируемые рисунки тоже будут разными. Попробуйте изменить такие переменные, как угол, скорость, радиус X, радиус Y и посмотрите, что произойдет.

Шаг 7: режим наложения слоев

Различные цветовые режимы, о которых мы говорили ранее, используются для раскрашивания графических компонентов. За исключением использования этого метода для управления цветом, Processing может использовать различные режимы наложения слоев, такие как Photoshop.

Откройте окно слоя в PS, нажмите, чтобы выбрать режим наложения слоев, и мы увидим эти параметры.

Это существующие режимы слоев в PS. Проще говоря, режим наложения можно рассматривать как своего рода режим расчета цвета. Он решит, какой цвет будет создан последним, когда «цвет A» плюс «цвет B». Здесь «цвет A» означает цвет за текущим слоем (также называемый основным цветом). «Цвет B» означает цвет текущего слоя (также называемый смешанным цветом). Программа вычислит, чтобы получить цвет C в соответствии со значением RGB и альфа-каналом для цветов A и B. Он будет отображаться на экране как цвет результата.

Различные режимы слоев означают разные методы расчета. В следующей половине этой серии статей мы продолжим объяснять это более подробно. Теперь нам нужно только сначала узнать его использование.

Давайте посмотрим на пример использования режима добавления в программе.

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

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

void setup () {

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

image1 = loadImage ("1.jpg");

image2 = loadImage ("2.jpg");

}

void draw () {

фон (0);

blendMode (ДОБАВИТЬ);

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

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

}

[/cceN_cpp]

Результат:

Функция blendMode () используется для установки режима наложения графики. Заполняем ДОБАВИТЬ позади означает, что мы установили режим добавления.

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

Режим ADD относится к «Классу яркости». После его использования вы получите эффект сияния.

Ниже представлен режим наложения, который можно использовать в Обработке.

Шаг 8: режим наложения обработки

Мы можем попробовать изменить другой режим наложения, чтобы увидеть эффект.

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

После использования режима вычитания (фон должен быть белым):

Шаг 9: Пример применения режима наложения слоев

Режим наложения может использоваться не только для изображений, но также подходит для всех графических компонентов на холсте. Ниже показано использование режима добавления. Его можно использовать для аналоговых различных световых эффектов.

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

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

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

}

void draw () {

фон (0);

blendMode (ДОБАВИТЬ);

int num = int (3000 * мышьX / 400.0);

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

if (random (1) <0,5) {

заполнить (0, 50, 0);

}еще{

заполнить (50);

}

эллипс (случайный (50, ширина - 50), случайный (50, высота - 50), 20, 20);

}

}

[/cceN_cpp]

Здесь с помощью функции random мы смешали зеленый цвет и белый цвет, которые уже имеют альфа-канал, в частицы. Мы можем использовать мышь, чтобы контролировать количество кругов и наблюдать за эффектом перекрытия.

ДОБАВИТЬ и ЭКРАН очень похожи. Хотя это то же самое для осветления, есть небольшие различия. Вы можете заменить его на ЭКРАН и провести сравнение. После наложения чистота и яркость ADD будут выше. Подходит для аналога светового эффекта.

Что касается цвета, то здесь мы подошли к концу в этой главе. Для этого «языка» вы уже освоили достаточно пустот. А теперь поспешите использовать код, чтобы насладиться миром формы и цвета!

Шаг 10: Источник

Эта статья взята с сайта:

Если у вас есть какие-либо вопросы, вы можете связаться с ： [email protected].