HSV-цвета и палитры: плавные переливы без боли

Один вечер я потратил на «закат» из пяти пикселей. Захотелось плавно перетечь от красного к фиолетовому, взял RGB и начал подбирать числа: 255,0,0 → 200,0,80 → 150,0,150 → 100,0,200. На бумаге выглядело логично, на ленте получились ступеньки и какая-то грязная серо-фиолетовая каша посередине. Три часа подборов, результат — «ну, вроде похоже». Потом я узнал про HSV, собрал тот же эффект за пять минут — и с тех пор цвет на лентах подбираю одной ручкой, а не тремя. Этот урок про то самое цветовое пространство, из-за которого с FastLED не хочется возвращаться к RGB.

План такой: разберём, почему RGB неудобен для анимаций, познакомимся с оттенком, насыщенностью и яркостью в терминах FastLED, научимся одной строкой fill_rainbow() получать радугу и заставим её плавно ползти по ленте. Как всегда, всё проверяется в симуляторе — радуга и «дыхание» будут крутиться прямо на этой странице.

RGB описывает свет так, как его видит машина: сколько подать в каждый из трёх кристаллов. Человек же думает другими словами: «какой оттенок», «насколько чистый цвет» и «насколько ярко». Когда вы анимируете цвет в RGB, вам приходится переводить человеческую задачу в машинные числа вручную — и вот тут начинаются ступеньки.

Классический пример: путь от красного (255, 0, 0) к синему (0, 0, 255) по прямой проходит через (128, 0, 128). По числам это «посередине», по ощущению — грязный тёмный фиолетовый, а не красивый переход. Хуже того: чтобы просто затемнить всю ленту, нужно уменьшать три числа сразу и следить, чтобы ни одно не ушло за ноль. Чтобы сдвинуть оттенок — пересчитывать все три канала заново. Анимация в RGB превращается в ведение ручных таблиц. Ровно это и была моя пятичасовая ступенька из начала урока: я подбирал три канала одновременно, когда правильный ответ — одно число, оттенок.

Цветовое пространство HSV устроено по-человечески. H — hue, оттенок — точка на цветовом круге. В FastLED круг разбит на 256 шагов: от 0 до 255, а не на привычные графическим редакторам 360 градусов — потому что оттенок хранится в одном байте. S — saturation, насыщенность: 0 — бесцветная серая заливка, 255 — максимально чистый цвет. V — value, яркость: 0 — чёрный, 255 — вся мощь выбранного оттенка.

Круг запоминается круглыми числами: каждые 32 шага — следующий цвет. Красный 0, оранжевый 32, жёлтый 64, зелёный 96, аква 128, синий 160, пурпурный 192, розовый 224. И замыкание круга: оттенок 255 почти совпадает с оттенком 0 — после розового круг приходит к красному. Именно поэтому переливы оттенка в HSV идут без швов: у круга просто нет конца.

Смотрите, что произошло: три «разных» цвета собраны из одного оттенка. В RGB мне пришлось бы держать в голове три числа на каждый вариант; в HSV крутится одна ручка за раз. CHSV возвращает цвет, который присваивается пикселю точно так же, как CRGB, — FastLED сам пересчитает оттенок, насыщенность и яркость в три канала на этапе отрисовки, вам об этом думать не нужно.

Важно не перепутать яркость v с FastLED.setBrightness(). v — свойство конкретного пикселя, им анимируют «дыхание» и затухание. setBrightness — глобальный множитель на всю ленту, его ставят один раз в setup(), чтобы не слепить глаза и не жарить блок питания. Моё правило простое: если приглушение одно для всех и навсегда — setBrightness; если пиксель по сценарию гаснет и разгорается — это v, и только он. Смешивать оба можно, но тогда заранее прикиньте итоговую яркость: перемножение легко съест половину диапазона.

Радуга в FastLED — одна функция: fill_rainbow(leds, 16, startHue, deltaHue). Она идёт по буферу и каждому следующему пикселю выдаёт оттенок на deltaHue больше, чем у предыдущего. Стартовый оттенок задаёте вы, а дельта определяет, сколько цветового круга поместится на ленту: дельта 16 при 16 пикселях — ровно один полный круг; дельта 8 — половина круга, растянутая на всю ленту; дельта 64 — радуга в четыре раза плотнее, цвета пойдут с повторами. Ориентир простой: дельта, умноженная на число пикселей, равная 256, — полный круг без нахлёста.

А теперь главный трюк. Пока startHue неизменен, радуга застыла. Добавьте в loop() строку hue = hue + 1; — и круг поедет: каждый кадр вся радуга сдвигается на один оттенок, плавно и без единого RGB-числа в коде. В симуляторе ниже шаг происходит каждые 40 миллисекунд — это примерно 25 кадров в секунду, глаз видит непрерывное течение, а не мигание: мерцание перестаёт различаться у большинства людей где-то от 50 Гц, так что запас у нас большой.

Оттенок — не единственная живая ручка. Если в цикле менять v, лента «дышит»: разгорается и гаснет, как экран ноутбука в тёмной комнате. В симуляторе ниже яркость ходит туда-обратно между 20 и 250: направление хранится в переменной dir, а на границах переключается. Тот же принцип, что и у оттенка: одна переменная, одна ручка — и анимация готова. Граница 25 выбрана не случайно: если дать v упасть до нуля, лента на мгновение полностью слепнет, и «дыхание» превращается в мигание.

Отдельно скажу про индикаторы — тут HSV выигрывает всухую. Заряд батареи: при 100% зелёный (96), при 0% красный (0), посередине естественным образом получается жёлтый. Перевод заряда в оттенок — одна строка: hue = map(level, 0, 100, 0, 96). Никаких таблиц «при 70% бери такие-то числа». Тревога — оттенок 0, спокойствие — 96, промежуточные состояния — промежуточные точки круга. Если делаете хоть какой-то статусный индикатор на ленте — делайте его в HSV, и он будет читаться интуитивно.

HSV щёлкает только через руки. Четыре задачи по возрастанию — все решаются в симуляторах этого урока, инструменты у вас уже есть: CHSV, fill_rainbow, map и циклы.

Теперь вы красите пиксели осмысленно и умеете оживлять один параметр — оттенок или яркость. Осталась главная привычка настоящего светодиодного аниматора: рисовать не «когда дошли руки в loop()», а по таймеру кадров. На millis() держатся все серьёзные эффекты — бегущие волны, огонь, кометы с хвостами, — и следующий урок целиком посвящён этому каркасу.