Работаем с цветом

Самый лучший способ сделать вашу художественную работу интересной - цвет. Если вы когда-нибудь использовали программу вроде 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: