如何为iTunes 11中的歌曲列表着色算法有效? [关闭]

本文翻译自:How does the algorithm to color the song list in iTunes 11 work? [closed]

The new iTunes 11 has a very nice view for the song list of an album, picking the colors for the fonts and background in function of album cover. 新的iTunes 11可以很好地查看专辑的歌曲列表,选择专辑封面功能的字体和背景颜色。 Anyone figured out how the algorithm works? 有谁想出算法是如何工作的?

第三个例子


#1楼

参考:https://stackoom.com/question/vDq0/如何为iTunes-中的歌曲列表着色算法有效-关闭


#2楼

例1

I approximated the iTunes 11 color algorithm in Mathematica given the album cover as input: 鉴于专辑封面为输入,我在Mathematica中近似了iTunes 11颜色算法:

输出1

How I did it 我是怎么做到的

Through trial and error, I came up with an algorithm that works on ~80% of the albums with which I've tested it. 通过反复试验,我提出了一种算法,该算法适用于我测试过的约80%的专辑。

Color Differences 颜色差异

The bulk of the algorithm deals with finding the dominant color of an image. 该算法的大部分涉及找到图像的主色。 A prerequisite to finding dominant colors, however, is calculating a quantifiable difference between two colors. 然而,找到主色的先决条件是计算两种颜色之间的可量化差异。 One way to calculate the difference between two colors is to calculate their Euclidean distance in the RGB color space. 计算两种颜色之间差异的一种方法是计算RGB颜色空间中的欧几里德距离。 However, human color perception doesn't match up very well with distance in the RGB color space. 然而,人类颜色感知与RGB颜色空间中的距离不匹配。

Therefore, I wrote a function to convert RGB colors (in the form {1,1,1} ) to YUV , a color space which is much better at approximating color perception: 因此,我编写了一个函数将RGB颜色(格式为{1,1,1} )转换为YUV ,这是一种颜色空间,可以更接近颜色感知:

(EDIT: @cormullion and @Drake pointed out that Mathematica's built-in CIELAB and CIELUV color spaces would be just as suitable... looks like I reinvented the wheel a bit here) (编辑: @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
    ]

Next, I wrote a function to calculate color distance with the above conversion: 接下来,我写了一个函数来计算上面转换的颜色距离:

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

Dominant Colors 主导色彩

I quickly discovered that the built-in Mathematica function DominantColors doesn't allow enough fine-grained control to approximate the algorithm that iTunes uses. 我很快发现内置的Mathematica函数DominantColors不允许足够的细粒度控制来近似iTunes使用的算法。 I wrote my own function instead... 我写了自己的功能......

A simple method to calculate the dominant color in a group of pixels is to collect all pixels into buckets of similar colors and then find the largest bucket. 计算一组像素中的主色的简单方法是将所有像素收集到相似颜色的桶中,然后找到最大的桶。

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

Note that .1 is the tolerance for how different colors must be to be considered separate. 请注意, .1是不同颜色必须分开考虑的容差。 Also note that although the input is an array of pixels in raw triplet form ( {{1,1,1},{0,0,0}} ), I return a Mathematica RGBColor element to better approximate the built-in DominantColors function. 另请注意,尽管输入是原始三元组形式的像素数组( {{1,1,1},{0,0,0}} ),但我返回一个Mathematica RGBColor元素以更好地逼近内置的DominantColors函数。

My actual function DominantColorsNew adds the option of returning up to n dominant colors after filtering out a given other color. 我的实际功能DominantColorsNew添加了在过滤掉给定的其他颜色后返回多达n主色的选项。 It also exposes tolerances for each color comparison: 它还公开了每种颜色比较的公差:

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
    ]

The Rest of the Algorithm 算法的其余部分

First I resized the album cover ( 36px , 36px ) & reduced detail with a bilateral filter 首先,我使用双边滤镜重新调整了专辑封面( 36px36px )和缩小细节的大小

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

iTunes picks the background color by finding the dominant color along the edges of the album. iTunes通过查找专辑边缘的主色来选择背景色。 However, it ignores narrow album cover borders by cropping the image. 但是,它会通过裁剪图像忽略窄的专辑封面边框。

thumb = ImageCrop[thumb, 34];

Next, I found the dominant color (with the new function above) along the outermost edge of the image with a default tolerance of .1 . 接下来,我沿着图像的最外边缘找到了主色(带有上面的新函数),默认公差为.1

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

Lastly, I returned 2 dominant colors in the image as a whole, telling the function to filter out the background color as well. 最后,我在图像中作为一个整体返回了2种主色,告诉函数也过滤掉了背景色。

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

The tolerance values above are as follows: .1 is the minimum difference between "separate" colors; 上述公差值如下: .1是“单独”颜色之间的最小差异; .2 is the minimum difference between numerous dominant colors (A lower value might return black and dark gray, while a higher value ensures more diversity in the dominant colors); .2是众多主色之间的最小差异(较低的值可能会返回黑色和深灰色,而较高的值可确保主色的多样性); .5 is the minimum difference between dominant colors and the background (A higher value will yield higher-contrast color combinations) .5是主色和背景之间的最小差异(较高的值会产生较高对比度的色彩组合)

Voila! 瞧!

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

最终产出

Notes 笔记

The algorithm can be applied very generally. 该算法可以非常普遍地应用。 I tweaked the above settings and tolerance values to the point where they work to produce generally correct colors for ~80% of the album covers I tested. 我将上述设置和容差值调整到它们工作的程度,以便为我测试的约80%的专辑封面生成大致正确的颜色。 A few edge cases occur when DominantColorsNew doesn't find two colors to return for the highlights (ie when the album cover is monochrome). DominantColorsNew找不到要为高光返回的两种颜色时(即专辑封面是单色时),会出现一些边缘情况。 My algorithm doesn't address these cases, but it would be trivial to duplicate iTunes' functionality: when the album yields less than two highlights, the title becomes white or black depending on the best contrast with the background. 我的算法没有解决这些问题,但复制iTunes的功能是微不足道的:当专辑产生少于两个高光时,标题会变成白色或黑色,具体取决于与背景的最佳对比度。 Then the songs become the one highlight color if there is one, or the title color faded into the background a bit. 然后歌曲成为一个高亮颜色,如果有一个,或标题颜色逐渐淡入背景。

More Examples 更多例子

更多例子


#3楼

您还可以查看ColorTunes ,它是使用MMCQ(中值剪切颜色量化)算法的Itunes专辑视图的HTML实现。


#4楼

Wade Cosgrove of Panic wrote a nice blog post describing his implementation of an algorithm that approximates the one in iTunes. Panic的Wade Cosgrove撰写了一篇很好的博客文章,描述了他的算法的实现,该算法与iTunes中的算法相似。 It includes a sample implementation in Objective-C. 它包括Objective-C中的示例实现。


#5楼

With the answer of @Seth-thompson and the comment of @bluedog, I build a little Objective-C (Cocoa-Touch) project to generate color schemes in function of an image. 在@ Seth-thompson的回答和@bluedog的评论中,我构建了一个Objective-C(Cocoa-Touch)项目来生成一个图像功能的配色方案。

You can check the project at : 您可以在以下位置查看项目:

https://github.com/luisespinoza/LEColorPicker https://github.com/luisespinoza/LEColorPicker

For now, LEColorPicker is doing: 目前,LEColorPicker正在做:

  1. Image is scaled to 36x36 px (this reduce the compute time). 图像缩放到36x36像素(这会减少计算时间)。
  2. It generates a pixel array from the image. 它从图像生成像素阵列。
  3. Converts the pixel array to YUV space. 将像素阵列转换为YUV空间。
  4. Gather colors as Seth Thompson's code does it. 像Seth Thompson的代码那样收集颜色。
  5. The color's sets are sorted by count. 颜色的集合按计数排序。
  6. The algorithm select the three most dominant colors. 该算法选择三种最主要的颜色。
  7. The most dominant is asigned as Background. 最主要的是背景。
  8. The second and third most dominants are tested using the w3c color contrast formula, to check if the colors has enought contrast with the background. 使用w3c颜色对比公式测试第二和第三大优势,以检查颜色是否与背景形成鲜明对比。
  9. If one of the text colors don't pass the test, then is asigned to white or black, depending of the Y component. 如果其中一种文本颜色未通过测试,则根据Y分量将其分配为白色或黑色。

That is for now, I will be checking the ColorTunes project ( https://github.com/Dannvix/ColorTunes ) and the Wade Cosgrove project for new features. 那就是现在,我将检查ColorTunes项目( https://github.com/Dannvix/ColorTunes )和Wade Cosgrove项目的新功能。 Also I have some new ideas for improve the color scheme result. 我也有一些改进配色方案结果的新想法。

Screenshot_Mona


#6楼

I asked the same question in a different context and was pointed over to http://charlesleifer.com/blog/using-python-and-k-means-to-find-the-dominant-colors-in-images/ for a learning algorithm (k Means) that rougly does the same thing using random starting points in the image. 我在不同的背景下问了同样的问题,并指出了http://charlesleifer.com/blog/using-python-and-k-means-to-find-the-dominant-colors-in-images/学习算法(k均值),粗略地使用图像中的随机起点做同样的事情。 That way, the algorithm finds dominant colors by itself. 这样,算法自己找到主色。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值