Працюємо з кольором в Processing

Найкращий спосіб зробити вашу художню роботу цікавою – колір Якщо ви коли-небудь використовували програму на зразок 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 &lt 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 &lt 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, 10) для вказівки колірних компонентів використовує значення від 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

Схожі статті:


Сподобалася стаття? Ви можете залишити відгук або підписатися на RSS , щоб автоматично отримувати інформацію про нові статтях.

Коментарів поки що немає.

Ваш отзыв

Поділ на параграфи відбувається автоматично, адреса електронної пошти ніколи не буде опублікований, допустимий HTML: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>

*

*