Рассчитать исчезновение цвета

Question

Учитывая два цвета и n шагов, как можно рассчитать n цветов, включая два заданных цвета, которые создают эффект затухания?

Если возможно, предпочтителен псевдокод, но он, вероятно, будет реализован в Java.

Спасибо!

Answer 1

Разделите каждый цвет на его компоненты RGB и затем рассчитайте требуемые отдельные шаги.

oldRed = 120;
newRed = 200;
steps = 10;
redStepAmount = (newRed - oldRed) / steps;

currentRed = oldRed;
for (i = 0; i < steps; i++) {
   currentRed += redStepAmount;
}

Очевидно, расширить это для зеленого и синего.

Answer 2

Есть два хороших связанных вопроса, которые вы также должны рассмотреть:

• Генерация градиентов программно?
• Условное форматирование - процентное преобразование в цвет

Обратите внимание, что вам часто лучше делать это в цветовом пространстве HSV, а не в RGB - он генерирует более приятные цвета для человеческого глаза (меньше вероятность столкновения или отрицательных оптических свойств).

Удачи!

-Adam

Answer 3

Для тех, кто ищет что-то, что они могут скопировать и вставить. Сделана быстрая функция для цветов RGB. Возвращает один цвет, который на ratio ближе к rgbColor2.

.

function fadeToColor(rgbColor1, rgbColor2, ratio) {
    var color1 = rgbColor1.substring(4, rgbColor1.length - 1).split(','),
        color2 = rgbColor2.substring(4, rgbColor2.length - 1).split(','),
        difference,
        newColor = [];

    for (var i = 0; i < color1.length; i++) {
        difference = color2[i] - color1[i];
        newColor.push(Math.floor(parseInt(color1[i], 10) + difference * ratio));
    }

    return 'rgb(' + newColor + ')';
}

Answer 4

Если вы хотите, чтобы смесь выглядела так же, как большинство виджетов GUI для палитры цветов, вы действительно хотите перейти на HSL или HSV. Оттуда вы, вероятно, в порядке с линейной интерполяцией в каждом измерении.

Попытка сделать любые интерполяции непосредственно в цветовом пространстве RGB - плохая идея. Это слишком нелинейно (и нет, гамма-коррекция в этом случае не поможет).

Answer 5

Самое простое - линейная интерполяция между компонентами цвета (см. Ответ Никфа). Просто имейте в виду, что глаз очень нелинейный, поэтому он не обязательно будет выглядеть, как будто вы делаете даже шаги. Некоторые цветовые пространства пытаются решить эту проблему (возможно, CIE?), Поэтому вы можете сначала преобразовать в другое цветовое пространство, интерполировать, а затем преобразовать обратно в RGB или что-то еще, что вы используете.

Answer 6

Вопрос в том, какую трансформацию вы хотите осуществить? Если вы транспонируете в цветовое пространство ВПГ и дали

FF0000 и 00FF00

Будет переходить от красного через желтый к зеленому.

Однако, если вы определили «черный» или какой-либо другой оттенок как среднюю точку наложения, вы должны сначала закрасить его этим цветом 00ff00.

Преобразование через HSV, однако, может быть забавным, потому что вы должны использовать немного триггера для отображения круговой карты на векторные компоненты.

Answer 7

Как насчет этого ответа

- (UIColor *)colorFromColor:(UIColor *)fromColor toColor:(UIColor *)toColor percent:(float)percent
{
    float dec = percent / 100.f;
    CGFloat fRed, fBlue, fGreen, fAlpha;
    CGFloat tRed, tBlue, tGreen, tAlpha;
    CGFloat red, green, blue, alpha;

    if(CGColorGetNumberOfComponents(fromColor.CGColor) == 2) {
        [fromColor getWhite:&fRed alpha:&fAlpha];
        fGreen = fRed;
        fBlue = fRed;
    }
    else {
        [fromColor getRed:&fRed green:&fGreen blue:&fBlue alpha:&fAlpha];
    }
    if(CGColorGetNumberOfComponents(toColor.CGColor) == 2) {
        [toColor getWhite:&tRed alpha:&tAlpha];
        tGreen = tRed;
        tBlue = tRed;
    }
    else {
        [toColor getRed:&tRed green:&tGreen blue:&tBlue alpha:&tAlpha];
    }

    red = (dec * (tRed - fRed)) + fRed;
    green = (dec * (tGreen - fGreen)) + fGreen;
    blue = (dec * (tBlue - fBlue)) + fBlue;
    alpha = (dec * (tAlpha - fAlpha)) + fAlpha;

    return [UIColor colorWithRed:red green:green blue:blue alpha:alpha];
}