Color и цветовые пространства

В Paper.js цвет задается объектом Color, который является универсальным инструментом для определения оттенков, прозрачности и градиентов. Цвет может быть представлен в различных цветовых пространствах: RGB, HSB (Hue, Saturation, Brightness), градациях серого или через строки CSS.

Создание цвета

// Через RGB
let redColor = new Color(1, 0, 0); // Красный

// Через HSB
let hsbColor = new Color({ hue: 120, saturation: 0.5, brightness: 0.7 });

// Через CSS строку
let cssColor = new Color('#00ff00'); // Зеленый

// Через градации серого
let grayColor = new Color(0.5); // Полутон серого

Ключевой момент: значения RGB и HSB в Paper.js нормализованы в диапазоне от 0 до 1. Для CSS-цветов используется привычная шестнадцатеричная или словесная запись.

Цветовые пространства

RGB

Цвет RGB определяется тремя компонентами: красной, зелёной и синей. В Paper.js эти компоненты имеют тип Number от 0 до 1:

let colorRGB = new Color(0.2, 0.6, 0.8); // Синий оттенок

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

  • Можно комбинировать с прозрачностью (alpha):
let semiTransparent = new Color(0.2, 0.6, 0.8, 0.5);
  • Изменение любой компоненты напрямую через объект:
colorRGB.red = 0.9;
colorRGB.green = 0.1;

HSB (Hue, Saturation, Brightness)

HSB позволяет работать с цветом на основе его тон, насыщенность и яркость:

let colorHSB = new Color({ hue: 200, saturation: 0.7, brightness: 0.8 });

Примечания:

  • Hue задается в градусах (0–360)
  • Saturation и Brightness — числа от 0 до 1
  • HSB удобен для анимаций и создания градиентов, так как легко изменять тон без влияния на яркость и насыщенность.

Градации серого

Gray-scale цвета используют один числовой параметр:

let gray = new Color(0.3); // Темно-серый
  • Можно добавлять прозрачность:
let grayAlpha = new Color(0.3, 0.5); // Полупрозрачный серый

Прозрачность (Alpha)

Прозрачность задается как четвертая компонента в RGB или HSB или вторым аргументом в градациях серого:

let transparentRed = new Color(1, 0, 0, 0.4);
  • Значение alpha от 0 (полностью прозрачный) до 1 (полностью непрозрачный)
  • Можно изменять после создания:
transparentRed.alpha = 0.8;

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

Paper.js поддерживает LinearGradient, RadialGradient и Color смешение.

Линейный градиент

let from = new Point(0, 0);
let to = new Point(100, 100);
let gradient = new Gradient([new Color(1,0,0), new Color(0,0,1)]);
let linearGradient = new Color(gradient, from, to);
  • Линейный градиент изменяет цвет по прямой линии.
  • Каждая остановка градиента задается объектом ColorStop, можно указывать позицию от 0 до 1.

Радиальный градиент

let radialGradient = new Color(new Gradient([new Color(1,1,0), new Color(1,0,0)]), new Point(50,50), new Point(50,100));
  • Центр градиента определяется первой точкой, радиус второй.
  • Используется для создания эффекта освещения или блика.

Методы работы с цветами

Смешение цветов

let blue = new Color(0,0,1);
let yellow = new Color(1,1,0);
let mixed = blue.mix(yellow, 0.5); // Результат: зеленый
  • Второй параметр — степень смешения (0–1)
  • 0 возвращает исходный цвет, 1 — второй цвет.

Изменение компонентов HSB

let color = new Color({ hue: 120, saturation: 0.5, brightness: 0.7 });
color.hue += 30;       // Изменение тона
color.saturation *= 0.8; // Изменение насыщенности
color.brightness = 1;  // Увеличение яркости

Копирование цвета

let copyColor = color.clone();
  • Создает независимую копию для последующих изменений.

Цвета для объектов

Цвета применяются к Fill (заливка) и Stroke (обводка) объектов:

let circle = new Path.Circle(new Point(50,50), 40);
circle.fillColor = new Color(0, 1, 0);    // Зеленая заливка
circle.strokeColor = new Color(0, 0, 0);  // Черная обводка
circle.strokeWidth = 3;
  • Можно использовать градиенты вместо одноцветной заливки:
circle.fillColor = linearGradient;
  • Альфа-компонента применяется и к заливке, и к обводке.

Выводы по управлению цветом

  • Цвет в Paper.js — объект с богатым набором методов и поддержкой нескольких цветовых пространств.
  • HSB удобен для динамических изменений и анимации, RGB — для прямого контроля компонентов.
  • Градиенты позволяют создавать сложные эффекты освещения и глубины.
  • Прозрачность легко контролируется через alpha, а смешение цветов упрощает генерацию промежуточных оттенков.

Цветовые возможности Paper.js позволяют строить сложные визуальные эффекты с минимальными усилиями и дают полный контроль над визуальной частью графики.

Оглавление