Developer Tales or everything about everything

22Июн/120

Цветовые модели

Цветовые модели очень часто используются как в веб-разработке, так и в разработке GUI-приложений и еще в очень многих областях программирования. Они же используются в Photoshop, а веб-разработчики, порой, проводят в нем не одну бессонную ночь :) Однако, далеко не все понимают смысл различных цветовых моделей, ведь очень часто достаточно обычной модели RGB. Рассмотрим цветовые модели RGB, HSV и CMYK. Заранее заявлю, что кроме сухой теории будет реализация отрисовки окна выбора цвета, такого же как в Photoshop.

Модель RGB

Модель RGB (Red, Green, Blue - Красный, Зеленый, Синий) геометрически представляет собой куб с ребрами длины 255. Три основных ребра, имеющие разные направления, представляют каждый цвет: красный, зеленый и синий. Модель RGB является аддитивной, т.е. путем смешивания главных цветов можно получить любой нужный цвет.

RGB является очень простой и самой распространенной моделью в сфере разработки приложений.

Нормализованное значение цвета считается по формуле: RGB = R + G * 256 + B * 256 * 256.

Модель HSV

Модель HSV (Hue, Saturation, Value - Оттенок, Насыщенность, Значение) не смешивает цвета, как в случае с RGB, а изменяет их свойства. Модель HSV представляет собой пирамиду, в основании которой лежит шестиугольник.

  • Оттенок - это, говоря простыми словами, цвет или цветовой тон. В пирамиде он представляется углом и принимает значения от 0 до 360 градусов;
  • Насыщенность - это наличие белого цвета в оттенке. Может принимать значения от 0 до 255. Чем выше насыщенность, тем меньше белого цвета;
  • Значение - это интенсивность цвета или яркость. Чем выше интенсивность, тем ярче цвет.

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

Модель CMYK

Моделья CMYK (Cyan, Magenta, Yellow, Key - голубой, пурпурный, желтый, ключевой) предназначена для печати. Самое главное свойство данной модели - ее субтрактивность, т.е. цвет получается путем вычета: каждая компонента означает, сколько должно быть вычтено каждого цвета из белого. Ключевая компонента служит для указания ключевого цвета - это связано с проблемой печати, например, черным цветом, который при вычетах не всегда получается полностью черным. Геометрически модель CMYK представляет из себя такой же куб, как и в случае с RGB.

Color Picker

Ну что ж, после небольшой порции теории можно попытаться что-нибудь сотворить своими руками. Ну, а что можно сделать своими руками, что было бы связано с цветовыми моделями? Конечно, окно выбора цвета :) Нет, не воспользоваться встроенными инструментами, градиентами или сторонними библиотеками, а отрисовать окно выбора цвета "попиксельно".

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

Такой же способ генерации используется в Adboe Photoshop (по крайней мере, все сходится). Сначала строится панель выбора основного цвета. При ее построении производится перебор цветов с шагом 3. Начинается и заканчивается эта панель с красного цвета. Этим можно воспользоваться, чтобы определить, когда необходимо закончить генерацию.

Увеличение цвета производится по отдельным цветовым компонентам. Если первым цветом был красный (0xff0000), то следующим, вероятно, будет 0xff0003, затем 0xff0006 и так далее.

Что же делать, когда появится цвет 0xff00ff? Все довольно просто, начинаем изменять другой цветовой элемент. Но какой - красный или зеленый? Определиться с выбором очень просто: нужно всегда двигаться вправо, если изменяется синий цвет, то нужно вернуться в начало и начать изменять красный цвет. Но красный цвет равен 0xff?O_o Инвертируем арифметическую операцию - вместо сложения вычитаем из 0xff тройку. Получаем 0xfc. Доходим до момента, когда красный цвет равен 0x00 и беремся за зеленый цвет.

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

Генерация самого квадрата цветов ненамного сложнее: нужно рассчитать приближенное значения для инкремента (или декремента) цвета по горизонтали и вертикали, затем сгенерировать все цвета. Тут придется применять такие ужасные вещи, как сдвиги вправо и влево 

Реализовать сие чудо можно на любом языке программирования, но для наглядности очень подойдет ActionScript 3. Результат:

Исходный код:

В исходном коде следует обратить внимание на функцию renderColorInfo() и секцию, где генерируются значения для формата SHV. Я не стал приводить громоздкую и ненужную в статье формулу - она есть в Wiki и в коде.

Ссылки

Просмотров: 3634
Комментарии (0) Пинги (0)

Пока нет комментариев.


Leave a comment


× 6 = восемнадцать

http://microfork.com/wp-content/plugins/wp-monalisa/icons/wpml_bye.gif 
http://microfork.com/wp-content/plugins/wp-monalisa/icons/wpml_good.gif 
http://microfork.com/wp-content/plugins/wp-monalisa/icons/wpml_negative.gif 
http://microfork.com/wp-content/plugins/wp-monalisa/icons/wpml_scratch.gif 
http://microfork.com/wp-content/plugins/wp-monalisa/icons/wpml_wacko.gif 
http://microfork.com/wp-content/plugins/wp-monalisa/icons/wpml_yahoo.gif 
http://microfork.com/wp-content/plugins/wp-monalisa/icons/wpml_cool.gif 
http://microfork.com/wp-content/plugins/wp-monalisa/icons/wpml_heart.gif 
http://microfork.com/wp-content/plugins/wp-monalisa/icons/wpml_rose.gif 
http://microfork.com/wp-content/plugins/wp-monalisa/icons/wpml_smile.gif 
http://microfork.com/wp-content/plugins/wp-monalisa/icons/wpml_whistle3.gif 
http://microfork.com/wp-content/plugins/wp-monalisa/icons/wpml_yes.gif 
http://microfork.com/wp-content/plugins/wp-monalisa/icons/wpml_cry.gif 
http://microfork.com/wp-content/plugins/wp-monalisa/icons/wpml_mail.gif 
http://microfork.com/wp-content/plugins/wp-monalisa/icons/wpml_sad.gif 
http://microfork.com/wp-content/plugins/wp-monalisa/icons/wpml_unsure.gif 
http://microfork.com/wp-content/plugins/wp-monalisa/icons/wpml_wink.gif 
 

Trackbacks are disabled.