RGB, HSB, HSL

В Paper.js цвет представлен объектом Color, который поддерживает различные цветовые модели: RGB, HSB и HSL. Каждая модель имеет свои преимущества в зависимости от задачи: точное задание цвета, работа с оттенками, анимация или генерация градиентов.

RGB (Red, Green, Blue)

Модель RGB основывается на смешении трех основных цветов: красного, зеленого и синего. В Paper.js создается объект цвета через конструктор:

var color = new Color(red, green, blue);
  • red, green, blue — числа от 0 до 1, где 0 — отсутствие компонента, 1 — максимальная интенсивность.
  • Можно использовать RGBA, добавив четвертый параметр alpha для прозрачности:
var semiTransparentBlue = new Color(0, 0, 1, 0.5);

Особенности работы:

  • Явное управление интенсивностью каждого компонента.
  • Идеально для точного указания цвета.
  • Применяется в графике, где важна точная подгонка цвета, например, при работе с изображениями или пиксельной графикой.

Пример использования RGB:

var circle = new Path.Circle({
    center: [100, 100],
    radius: 50,
    fillColor: new Color(1, 0, 0) // чисто красный
});

HSB (Hue, Saturation, Brightness)

HSB позволяет описывать цвет через оттенок, насыщенность и яркость. Paper.js использует конструктор:

var color = new Color({hue: h, saturation: s, brightness: b});
  • hue — оттенок, число от 0 до 360, где 0 и 360 — красный.
  • saturation — насыщенность, от 0 (серый) до 1 (полная насыщенность).
  • brightness — яркость, от 0 (черный) до 1 (полностью яркий цвет).

Преимущества HSB:

  • Удобно для плавной анимации цвета (например, циклическое изменение оттенка).
  • Легко создавать градиенты или палитры, изменяя только hue.
  • Естественнее воспринимается при визуальном подборе цветов.

Пример использования HSB:

var rectangle = new Path.Rectangle({
    point: [50, 50],
    size: [150, 100],
    fillColor: new Color({hue: 200, saturation: 0.8, brightness: 0.7})
});

HSL (Hue, Saturation, Lightness)

Модель HSL похожа на HSB, но вместо яркости используется lightness (светлота):

var color = new Color({hue: h, saturation: s, lightness: l});
  • hue — оттенок (0–360), как в HSB.
  • saturation — насыщенность (0–1).
  • lightness — светлота, 0 — черный, 0.5 — базовый цвет, 1 — белый.

Особенности HSL:

  • Полезна для регулировки светлоты без изменения насыщенности.
  • Удобна для создания пастельных или темных версий базового цвета.
  • Часто используется при стилизации UI-элементов.

Пример использования HSL:

var star = new Path.Star({
    center: [200, 200],
    points: 5,
    radius1: 30,
    radius2: 60,
    fillColor: new Color({hue: 120, saturation: 0.5, lightness: 0.6})
});

Конвертация между моделями

Paper.js позволяет конвертировать цвета между RGB, HSB и HSL с помощью свойств объекта Color:

var color = new Color(1, 0.5, 0); // RGB
console.log(color.hue);          // HSB/HSL оттенок
console.log(color.saturation);   // Насыщенность
console.log(color.brightness);   // Яркость (HSB)
console.log(color.lightness);    // Светлота (HSL)
  • Свойства hue, saturation, brightness и lightness являются читабельными и изменяемыми.
  • Изменение этих свойств автоматически обновляет внутреннее RGB-представление.

Пример анимации оттенка:

var circle = new Path.Circle([150, 150], 50);
circle.fillColor = new Color({hue: 0, saturation: 1, brightness: 1});

function onFrame(event) {
    circle.fillColor.hue += 1; // плавное изменение цвета
}

Градиенты и цветовые модели

Paper.js поддерживает градиенты, которые могут быть заданы через массив цветов в любой модели:

var gradient = new Gradient([
    new Color({hue: 0, saturation: 1, brightness: 1}),
    new Color({hue: 120, saturation: 1, brightness: 1})
]);

var rectangle = new Path.Rectangle({
    point: [50, 50],
    size: [200, 100],
    fillColor: new Color(gradient, [0, 1], 'linear')
});
  • Градиенты реагируют на изменение компонентов цвета: изменение hue одного из цветов автоматически обновляет градиент.
  • Позволяет создавать динамические визуальные эффекты, анимации и плавные переходы между оттенками.

Практические советы

  • Использовать RGB для точных цветовых значений и работы с прозрачностью.

  • Применять HSB для анимации и циклической смены оттенков.

  • Выбирать HSL для контроля светлоты и создания гармоничных вариаций цвета.

  • Свойства объекта Color позволяют комбинировать модели: можно задавать цвет в одной модели и изменять компоненты другой.

  • Для динамических визуальных эффектов предпочтительна работа с hue и saturation, так как это проще для вычислений плавных переходов, чем с RGB.

Эта интеграция RGB, HSB и HSL в Paper.js делает библиотеку мощным инструментом для создания интерактивной и анимационной графики на JavaScript.

Оглавление