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
Tom Irving

2
어쩌면 색상의 양뿐만 아니라 채도 값도 계산의 일부라고 생각할 수 있습니다. 제 실험을 통해 하이라이트의 색상이 일부 영역에서 발생하더라도 배경색으로 선택되는 결론을 얻었습니다. 영상. 이것이 표지 이미지의 히스토그램과 그 피크 를 보는 것이 유용 할 수 있다고 생각하는 이유 이며 일부 미세 조정 된 매개 변수를 기반으로 색상이 선택됩니다.
Raffael

답변:


423

실시 예 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 개 미만으로 표시하면 제목이 배경과 가장 잘 대비되어 흰색 또는 검은 색이됩니다. 그런 다음 노래는 하나의 강조 표시 색상이 있거나 제목 색상이 배경으로 약간 희미 해집니다.

더 많은 예

더 많은 예


3
좋아요 @Seth Thompson, 그것은 매우 유망한 것 같습니다. 나는 내 자신을 시도 할 것입니다, 그것은 며칠이 걸릴 것입니다, 기다려주십시오.
LuisEspinoza

6
아주 멋진 솔루션입니다. 이제 Mathematica에서 Objective-C로 향하는 포트가 필요합니다.
loretoparisi

1
이 매우 자세한 답변은 +1입니다!
Marius Schulz

1
@cormullion LUV (및 LAB)는 모두 지각 균일 성을 목표로합니다. 그러나 두 색상 공간에서 유클리드 거리를 사용하는 것에 대한 명시 적 참조를 찾지 못했습니다. 내 생각에 다른 것이 없으면 RGB보다 낫습니다.
세스 톰슨

6
이것이 내가 "Chuck Norris Answer"라고 부르는 것입니다
MCKapur

44

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

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

https://github.com/luisespinoza/LEColorPicker

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

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

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

Screenshot_Mona


2
+1-아주 멋진 것들, 그리고 알고리즘 개발과 어플리케이션 개발이 그들 자신에게 매우 흥미로울 수있는 좋은 예
Yuval Karmi

1
대비를 확인하기위한 +1
brianmearns

예, 근사하지만 각 색상의 해시 값을 어떻게 반올림합니까? 오른쪽 하단에 작은 흑백 "명시 적"로고를 추가하면이 알고리즘을 쉽게 깨뜨릴 수 있다고 생각합니다. 실제로 흑백에 대한 초점을 추가하고 있습니다. 어쨌든,이 알고리즘은 클립 아트 기반 이미지에서 더 잘 작동하지만 36x36 이미지를 사용하는 경우 앤티 앨리어싱으로 인해 이러한 실패 사례가 더 드물게됩니다.
Jack Franzen

한마디 : 환상적!
Teddy


15

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


예, 이미 확인했습니다. 슬프게도 거의 문서화되지 않은 것 같습니다.
LuisEspinoza

ColorTunes에서 중요한 의견은 (중간 컷 양자화 알고리즘) [ leptonica.com/papers/mediancut.pdf]에 대한 언급 입니다. 방금 파이썬 에서이 작업을 약 2 시간 만에 종이에 설명을 작성하고 위의 Seth 알고리즘 구현을 선호합니다. 나는 결과를 조금 더 좋아하지만 가장 중요하게는 조금 더 빠릅니다 (물론 Seth의 알고리즘을 잘못 구현했을 수 있습니다).
brianmearns

@ sh1ftst0rm github 또는 다른 곳에 파이썬 구현이 있습니까? 건배
Anentropic

@Anentropic 죄송합니다. 그것은 내가 일하고있는 개인 프로젝트의 일부였으며 전혀 추출하지 못했습니다. 기회가 생기면 어딘가에 게시하려고 시도하지만 곧 나오지 않을 것입니다.
brianmearns



당사 사이트를 사용함과 동시에 당사의 쿠키 정책개인정보 보호정책을 읽고 이해하였음을 인정하는 것으로 간주합니다.
Licensed under cc by-sa 3.0 with attribution required.