博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
如何为iTunes 11中的歌曲列表着色算法有效? [关闭]
阅读量:3587 次
发布时间:2019-05-20

本文共 9153 字,大约阅读时间需要 30 分钟。

本文翻译自:

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楼

参考:


#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 , a color space which is much better at approximating color perception: 因此,我编写了一个函数将RGB颜色(格式为{1,1,1} )转换为 ,这是一种颜色空间,可以更接近颜色感知:

(EDIT: and 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) (编辑: 和指出,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楼

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


#4楼

Wade Cosgrove of Panic wrote a 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 : 您可以在以下位置查看项目:

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 ( ) and the Wade Cosgrove project for new features. 那就是现在,我将检查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 for a learning algorithm (k Means) that rougly does the same thing using random starting points in the image. 我在不同的背景下问了同样的问题,并指出了学习算法(k均值),粗略地使用图像中的随机起点做同样的事情。 That way, the algorithm finds dominant colors by itself. 这样,算法自己找到主色。

转载地址:http://rrlgj.baihongyu.com/

你可能感兴趣的文章
LeetCode3-----除数博弈(分析法+动态规划,C语言实现)
查看>>
LeetCode4----分石子(博弈类动态规划,C语言实现,难度:中等)
查看>>
数据结构与算法笔记-----B树,B+树及其应用
查看>>
数据结构与算法笔记----BF算法与KMP算法(图解+C语言实现+代码分析)
查看>>
Java-----面向面试每日刷10题(1-10)
查看>>
Java-----面向面试每日刷10题(11-20)
查看>>
数据结构笔记----哈希表及其在JAVA集合中的应用
查看>>
Java-----面向面试每日刷10题(21-30)
查看>>
Java-----面向面试每日刷10题(31-40)
查看>>
Java----面试中将用到的网络基础知识(1)
查看>>
迪杰斯特拉算法(图示+C语言实现)
查看>>
Java----面试中将用到的网络基础知识(2)
查看>>
Java----面试中将用到的网络基础知识(3)
查看>>
Java----面试中将用到的网络基础知识(4)
查看>>
面试中的数据库基本知识(索引的分类)
查看>>
十个理由,让程序员成为2018最抢手老公
查看>>
CTO详细讲解海量日志处理ELK
查看>>
“欣欣”架构师说:分布式具体方案解析
查看>>
Otto.de:我为什么选择分布式垂直架构
查看>>
架构设计之初体验,送给准备进阶架构的朋友(个人总结)
查看>>