iTunes 11 歌曲列表的着色算法是如何实现的?

2012年11月份 LuisEspinoza 在Stackoverflow上提问:“最新版的 iTunes 11专辑里歌曲列表非常漂亮,可以从专辑封面给歌曲列表里的字体和背景提取出颜色。有没有人知道这个算法是如何实现的?”

针对这个问题,Seth Thompson 的回答所得投票最高,感谢@袁欣_Jason 的热心翻译。

Third Example

 

以下是 Seth Thompson 的回答

Example 1

在Mathematica中,我用专辑封片图片做为输入,近似模拟出了iTune 11的着色算法:

Output 1

 

我是如何做到的

经过反复尝试,我想出了一种算法,经过我的测试,对大约 80% 的专辑都有效。

计算颜色的差异

这个算法就是要寻找图片的主色。能够找到这个主色的先决条件是两种颜色之间的差异是可计量的。其中一种方法就是计算出这两种颜色在RGB颜色空间中的欧式距离(Euclidean distance),不过人对颜色的感知与这种计算出的欧式距离并不匹配。

因此我写了一个函数,用来将 RGB 颜色转换成 YUV 格式,这种颜色空间可以更好的模拟人的色觉:

接下来,我写了一个函数用来计算转换后两种颜色的色距:

寻找主色

我很快发现,Mathematica的内置函数 DominantColors 做不到像 iTunes 中的算法对细微颜色那么精确的识别。我自己新写了一个函数…

从一组像素中识别出主色的最简单方法,就是将相似的像素归类,在找出最大的那个色块。

注意 .1 是指将两种颜色区分开的最低色差,虽然我用一个原始像素构成的数组作为输入,为了更好模拟系统内置的DominantColors函数,最后我返回了一个RGBColor类型。

我真正使用的函数 DominantColorsNew 还添加了筛选出某种给定的颜色再返回 n 种主色的功能。你还可以指定区分两种颜色为不同的最低色差。

算法其他内容

首先我把专辑的封面图片调整为(36px, 36px),用双边过滤器降低了一些图片细节。

iTunes会从专辑的边缘寻找主色给歌曲列表背景着色,有一点要注意的是,计算时要去除掉专辑封面的一圈窄边框。

接下来我用上面的函数再找出图片最外层主色,使用默认最小色差.1 。

最后,我用整张图片作为输入,剔除掉上面找出的背景颜色,再找出两种主色。

.1是指将两种颜色区分对待的最小色差,.2是指找出的主色之间的最小色差,.5指的是主色跟背景颜色之间的最小色差(值越大对比度越高)

Final Output

注释说明

这个算法对大部分专辑图片都有效。我用上面的色差参数测试,约80%的专辑封面都可以生成正确的颜色。有一些是因为专辑封面是黑白的,导致无法返回高亮色。我的算法没有处理这些特例,不过能不能完全模拟iTunes并不重要。如果一个专辑封面少于两种高亮色,专辑标题会变成黑色或者白色,这取决于跟背景的最佳对比度。歌曲的标题会变成其中一种返回的高亮色,如果没有返回的颜色,那么歌曲的标题颜色会有一些融于背景之中。

其他例子

More Examples

 

1 2 收藏 评论

关于作者:袁欣

关注移动开发;玩一点萨克斯,架子鼓 ;游泳与网球入门者(新浪微博:@袁欣_Jason) 个人主页 · 我的文章 · 17

相关文章

可能感兴趣的话题



直接登录
跳到底部
返回顶部