Главная » Processing » Работаем с цветом в Processing

0

Самый лучший способ сделать вашу художественную работу интересной – цвет. Если вы когда-нибудь использовали программу вроде Photoshop, вы знаете, что существуют различные системы описания цвета. Это CMYK, LAB, HSB, HSV, RGB, XYZ и т.д. Для устовки цвета фона, штриха или фигуры в Processing вы можете пользоваться системами RGB или HSB. В следующем примере мы покажем, как это сделать.

Как это делается

Первое, что мы сделаем – объявим переменную c, как раз перед функцией setup(). Мы присвоим ей значение, соответствующее случайному цвету.

color c;

void setup(

{

size( 640, 480 );

smooth();

c = color( random( 255 ), random( 255 ), random( 255 ) );

}

Второе, что мы сделаем – нарисуем прямоугольник с цветом, переходящим от черного к белому. Фрагмент кода рисует 255 по-разному окрашенных прямоугольников. Это первая часть кода из функции draw().

Void draw(

{

colorMode( RGB, 255 ); background( 255 );

// grayscale noStroke();

for ( int i = 0; i < 255; i++ ) { fill( i );

rect( i * 2 + 20, 20, 2, 120 );

}

stroke( 0 ); noFill();

rect( 20, 20, 500, 120 );

}

Следом за прямоугольником со шкалой оттенков серого – прямоугольник окрашенный случайным цветом. Он будет добавлен в функцию draw().

// random color fill( c ); stroke( 0 );

rect( 540, 20, 80, 120 );

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

// full opaque colors stroke( 0 );

fill( 255, 0, 0 );

rect( 20, 160, 75, 60 );

fill( 0, 255, 0 );

rect( 95, 160, 75, 60 );

fill( 0, 0, 255 );

rect( 170, 160, 75, 60 );

fill( 0, 255, 255 );

rect( 245, 160, 75, 60 );

fill( 255, 0, 255 );

rect( 320, 160, 75, 60 );

fill( 255, 255, 0 );

rect( 395, 160, 75, 60 );

fill( 255 );

rect( 470, 160, 75, 60 );

fill( 0 );

rect( 545, 160, 75, 60 );

Второй строкой тестовой таблицы будут идти прозрачный версии цветов первой строки. Также за этими цветовыми образцами будет черный прямоугольник. Пррачность образцов устанавливается мышью. Это тоже входит в функцию draw().

// black background behind transparent colors rect( 0, 250, width, 70 );

float t = map( mouseX, 0, width, 0, 255 );

// transparent colors fill( 255, 0, 0, t );

rect( 20, 220, 75, 60 );

fill( 0, 255, 0, t );

rect( 95, 220, 75, 60 );

fill( 0, 0, 255, t );

rect( 170, 220, 75, 60 );

fill( 0, 255, 255, t );

rect( 245, 220, 75, 60 );

fill( 255, 0, 255, t );

rect( 320, 220, 75, 60 );

fill( 255, 255,       0, t );

rect( 395, 220,   75, 60     );

fill( 255, t );                          

rect( 470, 220,   75, 60     );

fill( 0, t );                

rect( 545, 220,   75, 60     );

А вот и последний фрагмент кода, который следует добавить к функции draw(). Мы перлючимся на цветовой режим HSB. Следующий код выведет на экран плавный переход от черного к цвету. Тон задается позицией x мыши, насыщенность – позицией y.

// HSB color bar

colorMode( HSB, 360, 100, 100, 100 );

float h = map( mouseX, 0, width, 0, 360 ); float s = map( mouseY, 0, height, 0, 100 ); noStroke();

for ( int i = 0; i < 100; i++ ) { fill( h, s, i );

rect( 20 + i*6, 340, 6, 120 )

}

noFill(); stroke(0);

rect( 20, 340, 600, 120 );

Когда вы запустите пример, вы увидите тестовую таблицу, изображенную на скриншоте, со шкалой оттенков серого и цветами RGB и HSB:

Как это работает

Все функции из этого примера похожи друг на друга. color(), stroke() и fill() используются с одними и теми же параметрами. Если входной параметр – один, то цветом будет оттенок серого. Цветовой режим, установленный по умолчанию в Processing это RGB, он оперирует величинами от 0 до 255. Так color(0) установит черный, а color(255) – белый. Все в этих пределах даст вам серый цвет. Если вы хотите использать эти функции в формате с двумя параметрами, то вторым будет прозрачность цвета.

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

f Функция color() используется для создания переменной типа color. Это удобно, если вы хотите создать цвет, чтобы впоследствии использовать везде в скетче. В этом примере я объявил цветовую переменную c перед функцией setup().

f Функция fill() используется для установки цвета заливки фигуры, которую вы будете рисовать. У нее может быть от одного до четырех параметров. Также вы можете использовать для этого цветовую переменную.

f  Функция noFill() используются для отключения заливки перед рисованием фигуры.

f   Функция stroke() похожа на функцию fill(), но устанавливает цвет штриха фигуры.

f  Функция noStroke() используется для отключения штриха перед рисованием фигуры.

f Функция background() устанавливает цвет фона. Обычно это первая функция, которую вы применяете в функции draw(), она очищает экран. Вместе с этой функцией удобно испольховать прозрачные цвета. Если так, то величина alpha проигнорируется.

f Первый параметр функции colorMode() устанавливает режим цвета. Это может быть RGB или HSB. Цветовой режим, установленный по умолчанию – RGB, со знениями от 0 до 255. Функция colorMode( RGB, 1.0 ) для указания цветовых компонентов использует значения от 0 до 1. Если вы хотите переключить на режим HSB, запишите colorMode( HSB, 360, 100, 100 ).

Дополнительно

Для выбора цвета перед применением его в скетче существует встроенный в Processing инструмент color selector. Для открытия этого маленького удобного инструмента откройте меню Tools | Color Selector.

Смотрите также

Функция background() может работать с прозрачными цветами, когда вы рисуете вне экрана. Подробнее об этом – в конце этой главы в примере Внеэкранное рисование.

Источник: Ян Вантомм, Processing 2: креативное программирование, перевод с английского Александры Мишутиной, Published by Packt Publishing Ltd., 2012, BIRMINGHAM – MUMBAI.

По теме:

  • Комментарии