iTunes 11で曲リストに色を付けるアルゴリズムはどのように機能しますか?[閉まっている]


297

新しいiTunes 11には、アルバムの曲リストを表示する非常に優れたビューがあり、アルバムカバーの機能でフォントと背景の色を選択します。誰かがアルゴリズムがどのように機能するかを理解しましたか?

3番目の例


9
w3cカラーコントラスト式が答えの一部である可能性があります。私自身の経験的テストでは、この式がMS Wordで自動カラーフォントを決定するために使用されていることを示しています。[W3C色対比式「色の明るさは、以下の式によって決定される」を検索[1] [1]:w3.org/TR/AERT#color-contrast
bluedog

@bluedog、私はあなたが正しいと思います。たくさんのアルバムカバーを試しましたが、常にフォントは背景とのコントラストがはっきりしているため、はっきりと見ることができます。
LuisEspinoza 2012年

1
Mac OSとWindowsの間で異なるように見えることは他に注意する必要があります:twitter.com/grimfrog/status/275187988374380546
Tom Irving

2
色の量だけでなく、彩度の値も計算の一部であると想像できます。私の実験により、ハイライト色は背景色として選択されることが多いという結論に至りました。画像。そのため、カバー画像のヒストグラムとそのピークを見ることは有用であり、いくつかの微調整されたパラメーターに基づいて色が選択されていると思います。
ラファエル、

回答:


423

例1

入力としてアルバムカバーを指定して、MathematicaでiTunes 11カラーアルゴリズムを概算しました。

出力1

私がやった方法

試行錯誤の末、テストしたアルバムの約80%で機能するアルゴリズムを思いつきました。

色の違い

アルゴリズムの大部分は、画像の主要な色を見つけることを扱います。ただし、ドミナントカラーを見つけるための前提条件は、2つのカラー間の定量化可能な差異を計算することです。2つの色の違いを計算する1つの方法は、RGB色空間でそれらのユークリッド距離を計算することです。ただし、人間の色の知覚は、RGB色空間の距離とあまり一致しません。

したがって、RGBカラー(の形式{1,1,1})をYUVに変換する関数を書きました。

(編集:@cormullion@Drakeは、Mathematicaの組み込みのCIELABとCIELUVの色空間も同様に適切であることを指摘しました...ホイールを少しここで再発明したように見えます)

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、組み込みDominantColors関数をより適切に近似するためにMathematica 要素を返します。

私の実際の機能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
    ]

残りのアルゴリズム

まず、アルバムカバー(36px36px)のサイズを変更し、バイラテラルフィルターを使用して詳細を減らしました

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ハイライトに戻す2つの色が見つからない場合(つまり、アルバムカバーがモノクロの場合)は、いくつかのエッジケースが発生します。私のアルゴリズムはこれらのケースには対応していませんが、iTunesの機能を複製するのは簡単です。次に、曲がある場合は1つのハイライトカラーになるか、タイトルの色が背景に少しフェードします。

その他の例

その他の例


3
OK @Seth Thompson、それは非常に有望なようです。私は自分で試してみるつもりです。数日かかります。しばらくお待ちください。
LuisEspinoza

6
かなり素晴らしいソリューション。今度はMathematicaからObjective-Cへの移植が必要です。
loretoparisi

1
この非常に詳細な回答の+1!
Marius Schulz

1
@cormullion LUV(およびLAB)はどちらも知覚の均一性を目指しています。ただし、どちらの色空間でもユークリッド距離を使用する明示的な参照は見つかりませんでした。私の推測では、他に何もなければ、どちらもRGBよりも優れているでしょう。
セストンプソン

6
これは私が「チャックノリスアンサー」と呼んでいるものです
MCKapur 2013

44

@ Seth-thompsonの回答と@bluedogのコメントを使用して、小さなObjective-C(Cocoa-Touch)プロジェクトを構築し、画像の機能でカラースキームを生成します。

プロジェクトは次の場所で確認できます。

https://github.com/luisespinoza/LEColorPicker

今のところ、LEColorPickerは次のことを行っています:

  1. 画像は36x36 pxにスケーリングされます(これにより、計算時間が短縮されます)。
  2. 画像からピクセル配列を生成します。
  3. ピクセル配列をYUV空間に変換します。
  4. Seth Thompsonのコードが行うように色を集めます。
  5. 色のセットはカウントでソートされます。
  6. アルゴリズムは3つの最も支配的な色を選択します。
  7. 最も支配的なものは、背景として割り当てられています。
  8. 2番目と3番目の支配的な色はw3c色コントラスト式を使用してテストされ、色と背景とのコントラストが十分かどうかを確認します。
  9. テキストの色の1つがテストに合格しない場合、Yコンポーネントに応じて白または黒に割り当てられます。

今のところ、ColorTunesプロジェクト(https://github.com/Dannvix/ColorTunes)とWade Cosgroveプロジェクトの新機能を確認します。また、配色結果を改善するための新しいアイデアもいくつかあります。

Screenshot_Mona


2
+1-とてもかっこいいもの、そしてアルゴリズム開発とアプリケーション開発がどちらもそれ自体が非常に興味深い方法の良い例
Yuval Karmi

1
コントラストをチェックするための+1。
brianmearns 2014年

ええクールですが、各色のハッシュ値をどのように丸めますか?私はこのアルゴリズムを簡単に壊すことができると思います。右下に小さな白黒の「Explicit」ロゴを追加するだけで、実際に白黒のフォーカスが追加されます。とにかく、このアルゴリズムはクリップアートベースの画像に適していますが、36x36の画像を使用している場合、アンチエイリアシングによってこれらの失敗例がよりまれになります
Jack Franzen

一言:FANTASTIC!
テディ


15

また、MMCQ(メディアンカットカラークオンタイズ)アルゴリズムを使用しているItunesアルバムビューのHTML実装であるColorTunesをチェックアウトすることもできます。


はい、すでに確認しています。悲しいことにほとんど文書化されていないようです。
LuisEspinoza

ColorTunesの重要なコメントは、(中央値カット量子化アルゴリズム)[ leptonica.com/papers/mediancut.pdf]への参照です。私はこれを約2時間でpythonに実装しただけで、論文の説明を形成し、上記のセスのアルゴリズムの実装よりもそれを好みます。私は結果が少し良いのが好きですが、最も重要なのはかなり速いことです(もちろん、セスのアルゴリズムを間違って実装した可能性があります)。
brianmearns 2014年

@ sh1ftst0rm githubまたはどこかにPython実装がありますか?歓声
Anentropic

@Anentropicすみません。それは私が取り組んでいる私的プロジェクトの一部であり、私はそれをまったく抽出していません。機会があれば、どこかに投稿してみますが、たぶんすぐには表示されません。
brianmearns 2015



弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.