Як працює алгоритм розфарбовування списку пісень в iTunes 11? [зачинено]


297

Новий iTunes 11 має дуже гарний вигляд для списку пісень альбому, підбираючи кольори для шрифтів та фону у функції обкладинки альбомів. Хтось зрозумів, як працює алгоритм?

Третій приклад


9
Формула контрасту в кольорі w3c може бути частиною відповіді. Мої власні емпіричні тести показують, що ця формула використовується MS Word, щоб вирішити, що це шрифт автоматичного кольору. Пошук "Яскравість кольору визначається за такою формулою" [формула контрастності кольорів w3c] [1] [1]: w3.org/TR/AERT#color-contrast
bluedog

@bluedog, я думаю, ти маєш рацію. Я спробував багато обкладинки своїх альбомів, і завжди шрифт має достатню контрастність з фоном, щоб чітко його переглядати.
LuisEspinoza

1
Ще щось зауважимо, це те, що, здається, відрізняється Mac OS та Windows: twitter.com/grimfrog/status/275187988374380546
Том Ірвінг

2
Я міг уявити, що, можливо, не тільки кількість кольорів, але й їхні значення насичення є частиною обчислення: мої експерименти привели мене до висновків, що кольори виділення часто вибираються як кольори тла, хоча вони трапляються в кількох областях зображення. Ось чому я вважаю, що перегляд гістограми обкладинки та її піків може бути корисним, і на основі деяких тонко налаштованих параметрів вибирається колір.
Раффаель

2
Дивіться іншу відповідь на сайті panic.com/blog/2012/12/itunes-11-and-colors
Mark Ransom

Відповіді:


423

Приклад 1

Я наблизив алгоритм кольорів iTunes 11 у Mathematica, враховуючи обкладинку альбому як вхідний:

Вихід 1

Як я це зробив

Через спроби та помилки я придумав алгоритм, який працює на ~ 80% альбомів, з якими я тестував його.

Відмінності кольорів

Основна частина алгоритму стосується пошуку домінуючого кольору зображення. Необхідною умовою пошуку домінуючих кольорів є обчислення кількісно різниць різниці між двома кольорами. Один із способів обчислити різницю між двома кольорами - це обчислити їх евклідову відстань у кольоровому просторі RGB. Однак сприйняття кольором людини не дуже добре відповідає відстані в кольоровому просторі RGB.

Тому я написав функцію для перетворення кольорів RGB (у формі {1,1,1}) в YUV , кольоровий простір, який набагато краще для наближення кольорового сприйняття:

(EDIT: @cormullion і @Drake вказали, що вбудовані кольори простору CIELAB та CIELUV в Mathematica будуть настільки ж підходящими ... схоже, я тут трохи переробив колесо)

convertToYUV[rawRGB_] :=
    Module[{yuv},
        yuv = {{0.299, 0.587, 0.114}, {-0.14713, -0.28886, 0.436},
            {0.615, -0.51499, -0.10001}};
        yuv . rawRGB
    ]

Далі я написав функцію обчислення кольорової відстані за допомогою перерахованого вище перетворення:

ColorDistance[rawRGB1_, rawRGB2_] := 
    EuclideanDistance[convertToYUV @ rawRGB1, convertToYUV @ rawRGB2]

Домінуючі кольори

Я швидко виявив, що вбудована функція Mathematica DominantColors не дає достатньо тонкого контролю, щоб наблизити алгоритм, який використовує iTunes. Натомість я написав власну функцію ...

Простий метод обчислення домінуючого кольору в групі пікселів - зібрати всі пікселі у відра подібних кольорів і потім знайти найбільше відро.

DominantColorSimple[pixelArray_] :=
    Module[{buckets},
        buckets = Gather[pixelArray, ColorDistance[#1,#2] < .1 &];
        buckets = Sort[buckets, Length[#1] > Length[#2] &];
        RGBColor @@ Mean @ First @ buckets
    ]

Зауважте, що .1це допуск до того, як різні кольори повинні вважатися окремими. Також зауважте, що хоча вхід є масивом пікселів у необробленій формі триплета ( {{1,1,1},{0,0,0}}), я повертаю RGBColorелемент Mathematica, щоб краще наблизити вбудованийDominantColors функції.

Моя фактична функція DominantColorsNewдодає можливість повернення до nдомінуючих кольорів після фільтрації заданого іншого кольору. Він також виставляє допуски для кожного порівняння кольорів:

DominantColorsNew[pixelArray_, threshold_: .1, n_: 1, 
    numThreshold_: .2, filterColor_: 0, filterThreshold_: .5] :=
    Module[
        {buckets, color, previous, output},
        buckets = Gather[pixelArray, ColorDistance[#1, #2] < threshold &];
        If[filterColor =!= 0, 
        buckets = 
            Select[buckets, 
                ColorDistance[ Mean[#1], filterColor] > filterThreshold &]];
        buckets = Sort[buckets, Length[#1] > Length[#2] &];
        If[Length @ buckets == 0, Return[{}]];
        color = Mean @ First @ buckets;
        buckets = Drop[buckets, 1];
        output = List[RGBColor @@ color];
        previous = color;
        Do[
            If[Length @ buckets == 0, Return[output]];
            While[
                ColorDistance[(color = Mean @ First @ buckets), previous] < 
                    numThreshold, 
                If[Length @ buckets != 0, buckets = Drop[buckets, 1], 
                    Return[output]]
            ];
            output = Append[output, RGBColor @@ color];
            previous = color,
            {i, n - 1}
        ];
        output
    ]

Решта алгоритму

Спочатку я змінив розмір обкладинки альбому ( 36px, 36px) та зменшив деталі двостороннім фільтром

image = Import["http://i.imgur.com/z2t8y.jpg"]
thumb = ImageResize[ image, 36, Resampling -> "Nearest"];
thumb = BilateralFilter[thumb, 1, .2, MaxIterations -> 2];

iTunes підбирає колір тла, знаходячи домінуючий колір по краях альбому. Однак він ігнорує вузькі рамки обкладинки альбомів, обрізаючи зображення.

thumb = ImageCrop[thumb, 34];

Далі я знайшов домінуючий колір (з новою функцією вище) уздовж самого зовнішнього краю зображення з допуском за замовчуванням .1.

border = Flatten[
    Join[ImageData[thumb][[1 ;; 34 ;; 33]] , 
        Transpose @ ImageData[thumb][[All, 1 ;; 34 ;; 33]]], 1];
background = DominantColorsNew[border][[1]];

Нарешті, я повернув 2 домінуючих кольори на зображенні в цілому, кажучи про функцію фільтрації кольору фону також.

highlights = DominantColorsNew[Flatten[ImageData[thumb], 1], .1, 2, .2, 
    List @@ background, .5];
title = highlights[[1]];
songs = highlights[[2]];

Вище наведені значення допусків: .1мінімальна різниця між "окремими" кольорами; .2- мінімальна різниця між численними домінуючими кольорами (нижче значення може повертати чорний і темно-сірий, тоді як більш високе значення забезпечує більшу різноманітність домінуючих кольорів); .5- мінімальна різниця між домінуючими кольорами та фоном (Більш високе значення дасть поєднання кольорів з більш контрастним кольором)

Вуаля!

Graphics[{background, Disk[]}]
Graphics[{title, Disk[]}]
Graphics[{songs, Disk[]}]

Кінцевий результат

Примітки

Алгоритм можна застосовувати дуже загально. Я змінив наведені вище параметри та значення допуску до того, що вони працюють для створення загально правильних кольорів для ~ 80% тестів, які я протестував. Декілька крайових випадків трапляються, колиDominantColorsNew не знайдеться два кольори, щоб повернутись до яскравих моментів (наприклад, коли обкладинка альбому однотонна). Мій алгоритм не стосується цих випадків, але було б тривіально дублювати функціональність iTunes: коли альбом дає менше двох яскравих тонів, заголовок стає білим або чорним, залежно від найкращого контрасту з фоном. Тоді пісні стають одним кольором виділення, якщо такий є, або колір заголовка трохи відпадає на задньому плані.

Більше прикладів

Більше прикладів


3
Гаразд @ Сет Томпсон, це здається дуже перспективним. Я спробую це спробувати сам, це займе у мене пару днів, будь ласка, наберіться терпіння.
Луїс Еспіноза

6
Досить приголомшливе рішення. Тепер потрібен порт від Mathematica до Objective-C, що є важкою боротьбою.
loretoparisi

1
+1 за цю дуже детальну відповідь!
Маріус Шульц

1
@cormullion LUV (та LAB) спрямовані на сприйняття рівномірності. Однак я не знайшов явних посилань на використання евклідових відстаней в будь-якому кольоровому просторі. Я здогадуюсь, що якби нічого іншого, вони обидва були б кращі за RGB.
Сет Томпсон

6
Це те, що я люблю називати "Відповідь Чака Норріса"
MCKapur

44

Відповідаючи на @ Seth-thompson та на коментар @bluedog, я будую невеликий проект Objective-C (Cocoa-Touch) для створення кольорових схем у функції зображення.

Ви можете перевірити проект за адресою:

https://github.com/luisespinoza/LEColorPicker

Наразі LEColorPicker робить:

  1. Зображення масштабується до 36x36 пікселів (це зменшує час обчислення).
  2. Він генерує масив пікселів із зображення.
  3. Перетворює масив пікселів у простір YUV.
  4. Збирайте кольори так, як це робить код Сет Томпсон.
  5. Набори кольорів сортуються за кількістю.
  6. Алгоритм вибору трьох найбільш домінуючих кольорів.
  7. Найбільш домінуючий позначається як фон.
  8. Другий і третій домінанти тестуються за допомогою формули контрасту кольорів w3c, щоб перевірити, чи кольори мали контраст із фоном.
  9. Якщо один з кольорів тексту не проходить тест, він призначається білому або чорному, залежно від компонента Y.

Це зараз, я перевіряю проект ColorTunes ( https://github.com/Dannvix/ColorTunes ) та проект Wade Cosgrove на нові функції. Також у мене є кілька нових ідей для покращення результату кольорової гами.

Скріншот_Mona


2
+1 - Дуже цікавий матеріал, і чудовий приклад того, як розробка алгоритмів та розробка додатків можуть бути дуже цікавими самі по собі
Юваль Кармі

1
+1 для перевірки контрасту.
brianmearns

Так здорово, але як ви округляєте значення хешу для кожного кольору? Я думаю, що я міг би легко зламати цей алгоритм, просто додавши трохи чорно-білого логотипу "Явний" внизу праворуч, ви дійсно додаєте фокус для чорно-білого. У будь-якому разі, цей алгоритм буде краще працювати для зображень на основі графічних зображень, але якщо у вас є зображення в 36x36, ці випадки невдалості стануть більш рідкісними шляхом згладжування
Джек Францен

Одне слово: FANTASTIC!
Тедді


15

Ви також можете перевірити ColorTunes, що є реалізацією HTML перегляду альбому Itunes, який використовує алгоритм MMCQ (середнє квантування кольорів вирізаного кольору).


так, я вже перевіряю. Сумно, здається, ледве не документально підтверджено.
Луїс Еспіноза

Важливим коментарем у ColorTunes є посилання на (алгоритм квантування середнього розрізу) [ leptonica.com/papers/mediancut.pdf] . Я щойно реалізував це в python приблизно за 2 години, просто сформував опис у статті, і віддаю перевагу моєму виконанню алгоритму Сету вище. Результати мені подобаються трохи краще, але найголовніше - це трохи швидше (звичайно, я міг би неправильно реалізувати алгоритм Сет).
brianmearns

@ sh1ftst0rm У вас є реалізація python в github чи десь? ура
Anentropic

@Anentropic Вибачте, я не хочу. Я був частиною приватного проекту, над яким я працював, і я його взагалі не видобув. Якщо у мене є шанс, я спробую його десь опублікувати, але це, мабуть, не скоро.
brianmearns



4

Я задав те саме питання в іншому контексті, і він був вказаний на http://charlesleifer.com/blog/using-python-and-k-means-to-find-the-dominant-colors-in-images/ для алгоритм навчання (k означає), що грубо робить те саме, використовуючи випадкові вихідні точки на зображенні. Таким чином, алгоритм знаходить домінуючі кольори сам по собі.

Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.