Градиенты FastLED: fill_gradient_rgb и CHSV

Ночник-«закат» для полки я красил таблицей: шестнадцать строк, в каждой три числа, от тёмно-синего (10, 0, 40) у основания к оранжевому (255, 120, 0) наверху. Строки я честно подобрал глазами, перенёс в массив — а через месяц захотел сменить нижний цвет на фиолетовый, то есть пересчитать всю таблицу заново. Сосед по кружку глянул в скетч и показал одну строку: fill_gradient_rgb(leds, 16, CRGB(10, 0, 40), CRGB(255, 120, 0)). Библиотека считает переход сама, для любого числа пикселей, для любых двух цветов — и даже для трёх или четырёх опорных точек. Ручные таблицы с шестнадцатью строками чисел с тех пор у меня не заводятся.

План урока: познакомимся с fill_gradient_rgb — линейным градиентом FastLED для реальной платы (в симуляторе этой функции нет, и я покажу честную замену), разберём, почему RGB-переход между далёкими цветами темнеет в середине, и соберём HSV-градиент вручную — циклом с CHSV, который движок курса рисует живьём. Главный навык урока — выбор модели под задачу: закаты, лёд и пламя красят в RGB, радуги и переливы — в HSV.

Сигнатура, которой я пользуюсь девять раз из десяти: fill_gradient_rgb(leds, NUM_LEDS, цвет1, цвет2). Функция идёт по буферу и линейно интерполирует каждый из трёх каналов от первого цвета ко второму: пиксель 0 получает цвет1, последний — цвет2, между ними равномерные ступени, при 16 пикселях шаг канала — шестнадцатая часть разницы. Есть и расширенные варианты: три опорных цвета — fill_gradient_rgb(leds, 16, c1, c2, c3) — дорога с одним перекрёстком, четыре — с двумя. Три точки — мой любимый формат для заката: синий внизу, оранжевый в середине, глубокий красный сверху — переход получается богаче двухцветного без единого нового понятия. Про саму структуру цвета и остальные заливки мы подробно говорили в уроке про CRGB и fill_solid.

Оговорка, из-за которой в уроке два скетча: fill_gradient_rgb в симуляторе курса не поддержан — движок умеет fill_solid и fill_rainbow, а градиент между произвольными цветами мы соберём вручную циклом, чуть ниже, и он будет крутиться прямо на странице. Скетч ниже — целиком рабочий для реальной платы: вставили, загрузили, полка светится закатом. Две практические детали. Первая: стоп-цвета попадают в крайние пиксели включительно, и если переход нужен не на всю ленту, а на её часть — сузьте число в вызове, а остаток докрасьте fill_solid: две строки вместо таблицы цветов. Вторая — привычка из первого урока раздела: каналы подставляем только через CRGB или CHSV, сырые байты мимо конвертера упираются в GRB-порядок ленты, о котором был отдельный разговор в уроке про подключение WS2812.

У RGB-градиента есть характер, который полезно знать заранее: он честно усредняет каналы, и когда цвета далеки друг от друга, середина получается в полсилы. Разберу на числах: переход от красного (255, 0, 0) к синему (0, 0, 255) в середине ленты даёт (128, 0, 128) — красный канал уже упал вдвое, синий ещё не набрал, и глаз видит грязный тёмный фиолетовый, а не красивый светлый мостик. Оба конца насыщенные и яркие, середина — полупустая. Это не брак библиотеки, это свойство линейной интерполяции трёх независимых каналов, и оно же делает RGB-градиент идеальным там, где полутон и нужен: закат через сумеречный красно-фиолетовый, угасающий вечер, темнеющий лёд. Мой ночник из начала урока — живой пример: синий (10, 0, 40) и оранжевый (255, 120, 0) встречаются посередине примерно в (132, 60, 20) — тёплом сумеречном цвете, который и делает «закат» закатом, а не переключателем двух красок.

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

Ручной HSV-градиент — тот же цикл заливки, только цвет каждого пикселя считается формулой: leds[i] = CHSV(startHue + i * delta, 255, 255). Стартовый оттенок плюс номер пикселя, умноженный на шаг. Шаг — единственная художественная ручка, и его шкалу легко держать в голове через произведение: дельта, умноженная на число пикселей, — сколько круга ляжет на ленту. Дельта 16 при 16 пикселях раскладывает ровно полный круг (16 × 16 = 256); дельта 8 — половину круга, от красного через жёлтый и зелёный до аквы; дельта 2 — узкий клин из тридцати двух шагов от красного к жёлтому, готовый «рассвет»; дельта 32 — два нахлёста круга, спектр повторится дважды.

Направление обхода — знак: минус в формуле, CHSV(startHue - i * delta, ...), разворачивает градиент в другую сторону. Переполнение не страшно, потому что оттенок живёт в byte: стартовый 250 плюс i * 3 заворачивается через ноль сам, без единого if — тем же свойством, которым замыкала круг радуга fill_rainbow в уроке про радугу и оттенок. И последний шаг к живому эффекту: подвижный старт. Заведите byte h, прибавляйте единицу между кадрами, подставляйте в формулу — и весь спектр поползёт по ленте, не меняя формы: тот же трюк, что оживлял fill_rainbow, только теперь вы управляете и шириной, и направлением спектра сами.

Практическое применение, которое я собирал чаще всего, — шкала-индикатор: влажность грунта, заряд батареи, громкость. Логика двухчастная, и в симуляторе выше она вся видна: цвет деления красится один раз по его позиции — CHSV(96 - i * 4, ...) даёт зелёное основание и тёплый верх, — а уровень решает, сколько делений горит, простым сравнением i < level. На реальной плате уровень приходит из analogRead, и перевод его в деления — одна строка map(): готовый рецепт с числами лежит в уроке про потенциометр и map — диапазон 0–1023 превращается в 0–16 делений. Получившаяся шкала читается с трёх метров без легенды: чем выше и теплее столбик, тем ближе тревога, — вся семантика в градиенте, а не в подписях. И настройка на месте: полную яркость шкале не давайте — при 255 слепит и в темноте, и при дневном свете; 120–140 через setBrightness — мой рабочий диапазон для индикаторов, цвета остаются читаемыми, глаза целы.

Про направление обхода на реальной плате — последний камень в стену выбора. У HSV-версии библиотеки, fill_gradient с CHSV-цветами, есть четвёртый аргумент-направление: SHORTEST_HUES ведёт от цвета к цвету коротким путём по кругу, LONGEST_HUES — длинным, через все промежуточные оттенки. Красный к синему коротким путём — через фиолетовый, длинным — через жёлтый и зелёный: концы одинаковые, полосы совершенно разные. В ручном цикле тем же управляют знак дельты и стартовый оттенок: развернули минус, подвинули старт — получили вторую дорогу. Направление обхода — такой же параметр градиента, как и сами цвета, и его стоит выбирать сознательно, а не обнаруживать в готовом виде.