Алгоритм изменения цвета, чтобы сделать его менее похожим на фон

Я создаю демо из 20 шариков, подпрыгивающих друг от друга, с фоном, заполненным сплошным цветом. Цвет для каждого шара выбирается случайным образом randint(0, 255)для каждого компонента кортежа R, G, B.

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

Как рассчитать индекс сходства для использования в качестве порога? Или как преобразовать цвет, скажем, в менее синий ?

Очевидный отказ от ответственности: я ничего не знаю о теории цвета, поэтому я не знаю, существуют ли вышеупомянутые понятия!

Я пишу на python, но я ищу концепции и стратегии, так что псевдокод - это хорошо (или просто теория).

РЕДАКТИРОВАТЬ:

Чтобы уточнить несколько моментов:

• Каждый шар имеет свой случайный цвет. Я бы хотел, чтобы они оставались как можно более случайными и максимально изучали цветовое пространство (будь то RGB или HSV, pygameдля определения цвета принимаются оба формата)

• Я просто хотел бы избежать того, чтобы каждый цвет был "слишком близко" к фону. Проблема не только в оттенке: у меня все в порядке с голубым шаром на темно-синем фоне (или «голубым» на синем и т. Д.)

• На данный момент мне все равно, будет ли шар цвета, аналогичного (или даже идентичного) другому шару. Избежать этого - бонус, но это незначительная проблема.

• Цвет фона - это постоянный один цвет RGB. Пока я использую «базовый» синий (0, 0, 255), но я не согласен с этим. Поэтому считайте фон произвольного цвета (с произвольным оттенком, яркостью, насыщенностью и т. Д.).

EDIT2:

Версия TL, DR: просто дайте возможность создавать X случайных цветов, чтобы ни один не "слишком сильно" исчезал на фоне произвольного (но единственного и постоянного) цвета

Вы можете использовать тот факт, что цвета составляют (трехмерное) цветовое пространство и рассчитать расстояние в этом цветовом пространстве. Затем вам нужно определить метрику в этом цветовом пространстве, чтобы найти расстояние между двумя цветами.

Например, расстояние в евклидовом пространстве между двумя точками x = (x1, x2, x3) и y = (y1, y2, y3) определяется как d (x, y) = sqrt ((y1-x1) * (y1- x1) + (y2-x2) * (y2-x2) + (y3-x3) * (y3-x3)).

Теперь вы можете рассчитать расстояние между цветом шариков и цветом фона, а если оно слишком мало, создайте новый случайный цвет и протестируйте снова.

Вы обнаружите, что ни RGB, ни даже HSV не являются хорошими цветовыми пространствами для этой задачи. Википедия статья о разнице цвета использует L б цветового пространства и дает несколько возможных метрик.

Существует также обсуждение стека и потока по этой теме.

Страница стандартов доступности веб-сайтов Организации Объединенных Наций ( http://www.un.org/webaccessibility/1_visual/13_colourcontrast.shtml ) действительно указывает стандарт для обеспечения надлежащего контраста текста на веб-сайтах, учитывая, что некоторые пользователи имеют дальтонизм. Это может быть особенно важно для вас, так как некоторые из ваших пользователей также могут быть дальтониками (было бы трудно отличить красный шар от зеленого фона, если они имеют одинаковую яркость).

Страница ООН указывает на анализатор коэффициента цветовой контрастности Juicy Studios по адресу ( http://juicystudio.com/services/luminositycontrastratio.php#specify ), в котором говорится, что текст на фоне должен иметь контрастность 4,5: 1, за исключением того, что я считаю, что похоже на ваш случай:

• Крупный текст. Масштабный текст и изображения крупномасштабного текста имеют контрастность не менее 3: 1.

Теперь, какова контрастность? Далее по гиперссылкам (это весело!) Мы попадаем на страницу W3, которая определяет контрастность как:

Contrast Ratio = (L1 + 0.05)/(L2 + 0.05)

Где L1 и L2 - относительные яркости цветов. L1 - более яркий цвет, L2 - менее яркий цвет. Опять же, мы переходим по ссылке на ту же страницу W3, которая указывает:

L = 0.2126 * R + 0.7152 * G + 0.0722 * B where R, G and B are defined as:

if RsRGB <= 0.03928 then R = RsRGB/12.92 else R = ((RsRGB+0.055)/1.055) ^ 2.4
if GsRGB <= 0.03928 then G = GsRGB/12.92 else G = ((GsRGB+0.055)/1.055) ^ 2.4
if BsRGB <= 0.03928 then B = BsRGB/12.92 else B = ((BsRGB+0.055)/1.055) ^ 2.4
and RsRGB, GsRGB, and BsRGB are defined as:

RsRGB = R8bit/255
GsRGB = G8bit/255
BsRGB = B8bit/255

ПРИМЕЧАНИЕ : символ каретки ^ выше относится к возведению в степень (x²)

И у нас есть довольно хорошая основа для алгоритма контраста (это дружелюбно к дальтоникам!)

• Определите значения R, G, B для каждого цвета
• Определите яркость для каждого цвета
• Если коэффициент контрастности от более яркого цвета к наименее яркому цвету меньше 3, перемотайте!

Использование значений RGB путем генерации случайного 0-255значения для каждого компонента может не только создавать цвета, похожие на фон, но также может привести к очень похожим цветам для шаров.

Я бы, вероятно, выбрал менее случайный подход и создал бы цвета, которые гарантированно будут отличаться. Вы можете создать цвет для каждого ~ 32 градусов в диапазоне оттенков и чередовать яркость или насыщенность (используйте цветовую модель HSV вместо RGB).

Так что-то вроде этого:

numColors = 20;
stepSize = 360 / (numColors / 2 + 1); // hue step size
for(i = 0; i < numColors; i++){
    color = HSV(i / 2 * stepSize, 0.5 + (i % 2) * 0.5, 1.0) 
}

который создаст 20 цветов, красиво распределенных. Это предполагает, что вы используете целочисленную математику, поэтому i = 0и i = 1создаст то же значение оттенка.

Конечно, это не слишком хорошо масштабируется ... если у вас есть 100 значений цвета для создания, расстояние между оттенками может быть недостаточным, и вы снова получите похожие цвета. В этом случае вы также можете изменить значение V(яркость).

Я не знаю, на что похож ваш цвет фона, но HSV также облегчает сравнение цветов (просто сравните 3 компонента и не забывайте, что HUE является круглым (0 == 360)).

ОБНОВИТЬ:

Поскольку я на самом деле не ответил на ваш вопрос, а предложил другой подход, вот как может выглядеть алгоритм для произвольного фона и совершенно случайных цветных шаров (это метод грубой силы, но он должен хорошо работать для вашего варианта использования):

// background color, currently equals RGB(0, 0, 255)
bg = HSV(240, 1.0, 1.0)

// number of colors to create is equal to the amount of balls
numColors = balls.length

// set threshold to compare colors. you can tweak this to your liking
threshold = 0.15

for(i = 0; i < numColors; i++){
    do {
        // assuming rnd returns a random float 0-1 inclusive
        color = HSV(rnd() * 360, rnd(), rnd())
        // calculate delta values, normalize hue to 0-1
        dH = (180 - abs(abs(bg.h - color.h) - 180)) / 360
        dS = bg.s - color.s
        dV = bg.v - color.v
        // "distance" between bg and color
        difference = sqrt(dH * dH + dS * dS + dV * dV)
    } while(difference < threshold)

    ball[i].color = color
}

Так как вы упомянули, что у вас есть постоянный фон, цвет шаров может быть случайным, но они должны падать на определенных диапазонах, которые по-прежнему дополняют фон.

Основы. Прежде чем мы это сделаем, вам нужно знать основы. Рассмотрим следующие цвета:

Black   #000000 rgb(0,0,0)
Red     #FF0000 rgb(255,0,0)
Green   #00FF00 rgb(0,255,0)
Blue    #0000FF rgb(0,0,255)
Yellow  #FFFF00 rgb(255,255,0)
Cyan    #00FFFF rgb(0,255,255)
Pink    #FF00FF rgb(255,0,255)
Gray    #C0C0C0 rgb(192,192,192)
White   #FFFFFF rgb(255,255,255)

Смесь цветов RGB [(0..255), (0..255), (0..255)] создает новые цвета, как указано выше.

Вычисление отрицательных цветов Вычисление отрицательных цветов аналогично преобразованию красного в голубой, зеленого в фиолетовый и синего в желтый.

Red     #FF0000 rgb(255,0,0) ->     Cyan    #00FFFF rgb(0,255,255)
Green   #00FF00 rgb(0,255,0) ->     Purple   #FF00FF    rgb(255,0,255)
Blue    #0000FF rgb(0,0,255) ->     Yellow  #FFFF00 rgb(255,255,0)

Дополнительный цвет

В соответствии со ссылкой на вычисление дополнительных цветов: http://serennu.com/colour/rgbtohsl.php

О HSL

HSL выражает цвета с точки зрения их оттенка, насыщенности и яркости, давая число для каждого из этих трех атрибутов цвета.

Оттенок - это позиция цвета на цветовом круге, выраженная в градусах от 0 ° до 359 °, представляющая 360 ° колеса; 0 ° - красный, 180 ° - красный, противоположный голубой, и так далее.

Насыщенность - это интенсивность цвета, насколько он тусклый или яркий. Чем ниже насыщенность, тем более тусклый (серый) цвет выглядит. Это выражается в процентах, 100% - полное насыщение, самый яркий и 0% - отсутствие насыщенности, серый.

Легкость - это то, насколько светлый цвет. Немного отличается от насыщенности. Чем больше белого цвета, тем выше его значение Легкости, чем больше черного, тем ниже его Легкость. Таким образом, 100% Lightness превращает цвет в белый, 0% Lightness превращает цвет в черный, и «чистый» цвет будет 50% Lightness.

Легче увидеть разницу между Насыщенностью и Легкостью, чем объяснить это. Если вы хотите прояснить ситуацию, попробуйте просмотреть варианты «Яркость» и «Насыщенность» на странице калькулятора цвета, выбрав в качестве начального цвета довольно яркий цвет.

Таким образом, запись HSL выглядит следующим образом, давая значения Hue, Saturation и Lightness в следующем порядке: t

Красный: 0 ° 100% 50% Бледно-розовый: 0 ° 100% 90% Голубой: 180 ° 100% 50% Вот шаги:

1. Преобразуйте ваш цвет в HSL.

2. Измените значение оттенка на противоположное значение оттенка (например, если ваш оттенок равен 50 °, противоположный будет под углом 230 ° на колесе - на 180 ° дальше вокруг).

3. Оставьте значения насыщенности и легкости такими, какими они были.

4. Преобразуйте это новое значение HSL обратно в исходное обозначение цвета (RGB или что-то еще).

Такие сайты, как EasyRGB.com, могут сделать для вас общее преобразование из RGB в HSL или наоборот.

Пример программирования сделан на PHP по ссылке

Преобразование из RGB в HSL

Значение выше синего цвета # 0000FF rgb (0,0,255) может быть представлено как красный шестнадцатеричный 00 + зеленый шестнадцатеричный 00 + синий шестнадцатеричный FF

$redhex  = substr($hexcode,0,2);
$greenhex = substr($hexcode,2,2);
$bluehex = substr($hexcode,4,2);

Он также может быть представлен как красное десятичное число 0 + зеленое десятичное число 0 + голубое десятичное число 255

$var_r = (hexdec($redhex)) / 255;
$var_g = (hexdec($greenhex)) / 255;
$var_b = (hexdec($bluehex)) / 255;

Теперь вставьте эти значения в процедуру rgb2hsl. Ниже приведена моя PHP-версия универсального кода EasyRGB.com для этого преобразования:

Входные данные - $ var_r, $ var_g и $ var_b сверху. Выходные данные - эквивалент HSL как $ h, $ s и $ l - они снова выражаются в виде долей 1, как и входные значения

$var_min = min($var_r,$var_g,$var_b);ttt
$var_max = max($var_r,$var_g,$var_b);
$del_max = $var_max - $var_min;

$l = ($var_max + $var_min) / 2;

if ($del_max == 0)
{
        $h = 0;
        $s = 0;
}
else
{
        if ($l < 0.5)
        {
                $s = $del_max / ($var_max + $var_min);
        }
        else
        {
                $s = $del_max / (2 - $var_max - $var_min);
        };

        $del_r = ((($var_max - $var_r) / 6) + ($del_max / 2)) / $del_max;
        $del_g = ((($var_max - $var_g) / 6) + ($del_max / 2)) / $del_max;
        $del_b = ((($var_max - $var_b) / 6) + ($del_max / 2)) / $del_max;

        if ($var_r == $var_max)
        {
                $h = $del_b - $del_g;
        }
        elseif ($var_g == $var_max)
        {
                $h = (1 / 3) + $del_r - $del_b;
        }
        elseif ($var_b == $var_max)
        {
                $h = (2 / 3) + $del_g - $del_r;
        };

        if ($h < 0)
        {
                $h += 1;
        };

        if ($h > 1)
        {
                $h -= 1;
        };
};

Итак, теперь у нас есть цвет как значение HSL в переменных $ h, $ s и $ l. Эти три выходные переменные на данном этапе снова представлены как доли от 1, а не как градусы и проценты. Так, например, голубой (180 ° 100% 50%) будет выглядеть как $ h = 0,5, $ s = 1 и $ l = 0,5.

Затем найдите значение противоположного оттенка, то есть того, который находится на расстоянии 180 ° или 0,5 (я уверен, у математиков есть более элегантный способ обозначить это, но):

Рассчитайте противоположный оттенок, $ h2

            $h2 = $h + 0.5;

            if ($h2 > 1)
                    {
                            $h2 -= 1;
                    };

Значение HSL дополнительного цвета теперь составляет $ h2, $ s, $ l. Итак, мы готовы преобразовать это обратно в RGB (снова моя PHP-версия формулы EasyRGB.com). Обратите внимание, что форматы ввода и вывода на этот раз отличаются, см. Мои комментарии в верхней части кода:

Входные данные - это значение HSL дополнительного цвета, хранящееся в $ h2, $ s, $ l в виде дробей 1 Выходные данные - это RGB в обычном формате 255 255 255, хранящиеся в $ r, $ g, $ b. Оттенок преобразуется с использованием функции hue_2_rgb, показанной в конце этого кода

    if ($s == 0)
    {
            $r = $l * 255;
            $g = $l * 255;
            $b = $l * 255;
    }
    else
    {
            if ($l < 0.5)
            {
                    $var_2 = $l * (1 + $s);
            }
            elset
            {
                    $var_2 = ($l + $s) - ($s * $l);
            };

            $var_1 = 2 * $l - $var_2;
            $r = 255 * hue_2_rgb($var_1,$var_2,$h2 + (1 / 3));
            $g = 255 * hue_2_rgb($var_1,$var_2,$h2);
            $b = 255 * hue_2_rgb($var_1,$var_2,$h2 - (1 / 3));
    };

   // Function to convert hue to RGB, called from above

    function hue_2_rgb($v1,$v2,$vh)
    {
            if ($vh < 0)
            {
                    $vh += 1;
            };

            if ($vh > 1)
            {
                    $vh -= 1;
            };

            if ((6 * $vh) < 1)
            {
                    return ($v1 + ($v2 - $v1) * 6 * $vh);
            };

            if ((2 * $vh) < 1)
            {
                    return ($v2);
            };

            if ((3 * $vh) < 2)
            {
                    return ($v1 + ($v2 - $v1) * ((2 / 3 - $vh) * 6));
            };

            return ($v1);
    };

И после этой процедуры у нас наконец-то есть $ r, $ g и $ b в формате 255 255 255 (RGB), которые мы можем преобразовать в шесть цифр шестнадцатеричного числа:

    $rhex = sprintf("%02X",round($r));
    $ghex = sprintf("%02X",round($g));
    $bhex = sprintf("%02X",round($b));

    $rgbhex = $rhex.$ghex.$bhex;

$ rgbhex - это наш ответ - дополнительный цвет в гексе.

Так как ваш цвет фона синий или 0,0255, HSL

Оттенок (H): 240 градусов / Насыщенность (S): 100% / Легкость (L): 4,9%

противоположность 240 - 60 по кругу, затем преобразование обратно в RGB дает значение # 181800

Я хотел бы расширить идею @ ashes999 по созданию набросков.

Мой код будет как Python, как я могу изо всех сил (я никогда не писал строки Python в моей жизни, но я просмотрел книгу один или два раза).

def lerp(a,b,value): # assuming your library was not kind enough to give you this for free
    return a + ((b - a) * value);

def drawRandomBall(bgColour,radius,point):
    var ballColour = Colour(random(0,255),random(0,255),random(0,255);
    var outlineColour = Colour(lerp(bgColour.R,255 - ballColour.R,0.5),lerp(bgColour.G,255 - ballColour.G,0.5),lerp(bgColour.B,255 - ballColour.B,0.5));
    fillCircle(point,radius+1,outlineColour);
    fillCircle(point,radius,ballColour);

Это может выглядеть не очень красиво и не совсем идеально для производственного кода, но этого должно быть достаточно для быстрого исправления. Я не тестировал код, так как у меня точно нет программы «шарики подпрыгивая вокруг экрана», которую я мог бы изуродовать для проверки.

Редактировать:

Увидев действующий код, ситуация перевернулась с ног на голову, поэтому вместо этого я предлагаю это решение.

Заменить строки 276-284 следующим текстом:

# Colour generator
def generateColourNonBG(leeway):
    color = (randint(0,255), randint(0,255), randint(0,255))
    while color[0] >= BG_COLOR[0]-leeway and color[0] =< BG_COLOR[0] + leeway and
    color[1] >= BG_COLOR[1]-leeway and color[1] =< BG_COLOR[1] + leeway and
    color[2] >= BG_COLOR[2]-leeway and color[2] =< BG_COLOR[2] + leeway:
        color = (randint(0,255), randint(0,255), randint(0,255))

# Ball generator
def generateBall():
    Ball(generateColourNonBG(5),
                   radius=randint(10, radius),
                   position=[randint(100, screen.get_size()[0]-radius),
                             randint(100, screen.get_size()[0]-radius)],
                   velocity=[randint(50, 50+vel[0]), randint(50, 50+vel[1])],
                   )                       

# Create the balls
balls = pygame.sprite.Group()
for _ in xrange(BALLS):
    balls.add(generateBall())

В этой новой упрощенной версии фабричный метод выплевывает шары, а специализированный метод генерирует цвета. Генератор цвета проверяет случайно сгенерированный цвет, чтобы определить, находится ли он в пределах определенного диапазона близости к цвету фона. Цвет считается слишком близким к цвету BG, если все три его цветовых канала находятся в пределах leewayлюбой стороны BG. Таким образом, если длина пути равна 0, только цвета, которые точно соответствуют BG, отклоняются. Я выбрал 5 по умолчанию, который отказывается от цвета BG и 5 цветов по обе стороны. Так как цвет BG белый, я не уверен, что он откажется от черного, потому что цифры закручиваются. Этого можно избежать, используя функции min и max, но я оставил их для краткости.

Для формата RGB это, кажется, работает достаточно хорошо и тривиально:

iversity_score = (abs (r1 - r2) + abs (g1 - g2) + abs (b1 - b2)) / 765,0

Это даст вам оценку от 0,0 до 1,0. Чем ниже, тем сложнее различить два цвета.

Это должно быть очевидно, но ради полноты: значения r, g, b должны быть сначала приведены к числу с плавающей запятой, и предполагается, что их максимальное значение равно 255.