[algorithm] iTunes 11에서 노래 목록의 색상을 지정하는 알고리즘은 어떻게 작동합니까? [닫은]

새로운 iTunes 11은 앨범의 노래 목록을보기에 아주 좋으며 앨범 표지의 기능에 따라 글꼴 및 배경 색상을 선택합니다. 알고리즘이 어떻게 작동하는지 알아 낸 사람이 있습니까?

세 번째 예



답변

실시 예 1

앨범 커버를 입력으로하여 Mathematica의 iTunes 11 컬러 알고리즘을 근사화했습니다.

출력 1

내가 어떻게했는지

시행 착오를 통해, 나는 그것을 테스트 한 앨범의 ~ 80 %에서 작동하는 알고리즘을 생각해 냈습니다.

색상 차이

알고리즘의 대부분은 이미지의 주요 색상을 찾는 데 사용됩니다. 그러나 지배적 인 색상을 찾기위한 전제 조건은 두 색상 간의 수량화 가능한 차이를 계산하는 것입니다. 두 색상의 차이를 계산하는 한 가지 방법은 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 요소를 반환 합니다.

내 실제 함수 DominantColorsNewn주어진 다른 색상을 필터링 한 후 주요 색상 으로 되 돌리는 옵션을 추가합니다 . 또한 각 색상 비교에 대한 공차를 제공합니다.

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의 기능을 복제하는 것은 사소한 일입니다. 앨범이 하이라이트를 2 개 미만으로 표시하면 제목이 배경과 가장 잘 대비되어 흰색 또는 검은 색이됩니다. 그런 다음 노래는 하나의 강조 표시 색상이 있거나 제목 색상이 배경으로 약간 희미 해집니다.

더 많은 예

더 많은 예


답변

@ Seth-thompson의 답변과 @bluedog의 의견으로 이미지에 따라 색 구성표를 생성하는 작은 Objective-C (Cocoa-Touch) 프로젝트를 빌드합니다.

다음에서 프로젝트를 확인할 수 있습니다.

https://github.com/luisespinoza/LEColorPicker

현재 LEColorPicker는 다음을 수행합니다.

  1. 이미지 크기는 36×36 픽셀로 조정되어 계산 시간이 줄어 듭니다.
  2. 이미지에서 픽셀 배열을 생성합니다.
  3. 픽셀 배열을 YUV 공간으로 변환합니다.
  4. 세스 톰슨의 코드처럼 색상을 수집하십시오.
  5. 색상 세트는 개수별로 정렬됩니다.
  6. 알고리즘은 가장 지배적 인 3 가지 색상을 선택합니다.
  7. 가장 지배적 인 것은 배경으로 할당됩니다.
  8. 두 번째 및 세 번째 지배적 인 색상은 w3c 색상 대비 수식을 사용하여 테스트하여 색상이 배경과 충분히 대비되는지 확인합니다.
  9. 텍스트 색상 중 하나가 테스트를 통과하지 못하면 Y 구성 요소에 따라 흰색 또는 검은 색으로 할당됩니다.

지금은 ColorTunes 프로젝트 ( https://github.com/Dannvix/ColorTunes )와 Wade Cosgrove 프로젝트에서 새로운 기능을 확인합니다. 또한 색 구성표 결과를 개선하기위한 몇 가지 새로운 아이디어가 있습니다.

Screenshot_Mona


답변

Panic의 Wade Cosgrove는 iTunes의 알고리즘과 비슷한 알고리즘을 구현 한 멋진 블로그 게시물을 작성했습니다. Objective-C의 샘플 구현이 포함되어 있습니다.


답변

MMCQ (중앙 컷 색상 양자화) 알고리즘을 사용하는 Itunes 앨범보기의 HTML 구현 인 ColorTunes 를 체크 아웃 할 수도 있습니다 .


답변

@Seth의 답변으로 PHP와 Imagick을 사용하여 그림의 두 측면 테두리에서 지배적 인 색상을 얻는 알고리즘을 구현했습니다.

https://gist.github.com/philix/5688064#file-simpleimage-php-L81

http://festea.com.br 에서 표지 사진의 배경을 채우는 데 사용됩니다.


답변

방금 @Seth가 설명한 것과 거의 동일한 알고리즘을 구현하는 JS 라이브러리를 작성했습니다 . github.com/arcanis/colibrijs 및 NPM 에서 무료로 사용할 수 있습니다 colibrijs.


답변

나는 다른 맥락에서 같은 질문을하고 이상 지적했다 http://charlesleifer.com/blog/using-python-and-k-means-to-find-the-dominant-colors-in-images/ A에 대한 학습 알고리즘 (k Means)은 이미지에서 임의의 시작점을 사용하여 똑같은 작업을 수행합니다. 그렇게하면 알고리즘이 자체적으로 지배적 인 색상을 찾습니다.