İTunes 11'deki şarkı listesini renklendirme algoritması nasıl çalışır? [kapalı]


297

Yeni iTunes 11, albüm kapağının işlevinde fontların ve arka planın renklerini seçerek bir albümün şarkı listesi için çok güzel bir görünüme sahip. Algoritmanın nasıl çalıştığını anlayan var mı?

Üçüncü Örnek


9
W3c renk kontrast formülü cevabın bir parçası olabilir. Kendi deneysel testlerim, bu formülün MS Word tarafından otomatik renk yazı tipine karar vermek için kullanıldığını gösteriyor. "Renk parlaklığı aşağıdaki formülle belirlenir" araması
bluedog 30:12

@ bluedog, bence haklısın. Albüm kapaklarımın çoğunu denedim ve her zaman yazı tipinin net bir şekilde izlemek için arka planla yeterince kontrastı var.
LuisEspinoza

1
Unutulmaması gereken bir şey, Mac OS ve Windows arasında farklı olduğu görülüyor: twitter.com/grimfrog/status/275187988374380546
Tom Irving

2
Belki sadece renklerin miktarının değil, aynı zamanda doygunluk değerlerinin de hesaplamanın bir parçası olduğunu hayal edebilirim: Deneylerim beni sonuçlara götürdü, vurgu renklerinin genellikle birkaç alanda ortaya çıkmasına rağmen arka plan rengi olarak seçildiğini görüntüsü. Bu yüzden kapak görüntüsünün ve piklerinin histogramına bakmanın faydalı olabileceğine inanıyorum ve bazı ince ayarlanmış parametrelere dayanarak renk seçildi.
Raffael

Yanıtlar:


423

örnek 1

Mathematica'daki iTunes 11 renk algoritmasına yaklaşık albüm kapağı girdi olarak verildi:

Çıktı 1

Nasıl yaptım

Deneme yanılma yoluyla, test ettiğim albümlerin ~% 80'inde çalışan bir algoritma buldum.

Renk Farkları

Algoritmanın büyük kısmı görüntünün baskın rengini bulmakla ilgilidir. Bununla birlikte, baskın renkleri bulmak için bir ön koşul, iki renk arasında ölçülebilir bir fark hesaplamaktır. İki renk arasındaki farkı hesaplamanın bir yolu, RGB renk uzayındaki Öklid mesafelerini hesaplamaktır. Ancak, insan renk algısı RGB renk uzayındaki mesafe ile çok iyi uyuşmuyor.

Bu nedenle, RGB renklerini (formda {1,1,1}) YUV'a dönüştürmek için bir işlev yazdım , renk algısını yaklaşık olarak belirlemede çok daha iyi bir renk alanı:

(EDIT: @cormullion ve @Drake , Mathematica'nın yerleşik CIELAB ve CIELUV renk alanlarının da aynı derecede uygun olacağını belirtti ...

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
    ]

Sonra, yukarıdaki dönüşüm ile renk mesafesini hesaplamak için bir işlev yazdım:

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

Baskın Renkler

Yerleşik Mathematica işlevinin DominantColors, iTunes'un kullandığı algoritmaya yaklaşmak için yeterince ince denetime izin vermediğini hemen keşfettim . Bunun yerine kendi fonksiyonumu yazdım ...

Bir piksel grubundaki baskın rengi hesaplamanın basit bir yöntemi, tüm pikselleri benzer renkteki kovalara toplamak ve daha sonra en büyük kovayı bulmaktır.

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

.1Farklı renklerin nasıl ayrı ayrı düşünüleceğine tolerans olduğunu unutmayın . Ayrıca giriş, ham üçlü biçiminde ( {{1,1,1},{0,0,0}}) bir piksel dizisi olmasına rağmen RGBColor, yerleşik DominantColorsişleve daha iyi yaklaşmak için bir Mathematica öğesi döndürdüğümü unutmayın .

Gerçek DominantColorsNewişlevim, nbelirli bir rengi filtreledikten sonra baskın renklere dönme seçeneği ekler . Ayrıca her bir renk karşılaştırması için toleranslar sunar:

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
    ]

Algoritmanın Geri Kalanı

Önce albüm kapağını ( 36px, 36px) yeniden boyutlandırdım ve iki taraflı bir filtreyle ayrıntıları azalttım

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

iTunes, albümün kenarlarında baskın rengi bularak arka plan rengini seçer. Ancak, görüntüyü kırparak albüm kapağı kenarlıklarını yok sayar.

thumb = ImageCrop[thumb, 34];

Sonra, varsayılan toleransı ile görüntünün en dış kenarı boyunca baskın rengi (yukarıdaki yeni işlevle) buldum .1.

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

Son olarak, bir bütün olarak görüntüde 2 baskın renk döndürdüm ve işleve arka plan rengini de filtrelemesini söyledim.

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

Yukarıdaki tolerans değerleri aşağıdaki gibidir: .1"ayrı" renkler arasındaki minimum farktır; .2çok sayıda baskın renk arasındaki minimum farktır (daha düşük bir değer, siyah ve koyu griye dönebilirken, daha yüksek bir değer, baskın renklerde daha fazla çeşitlilik sağlar); .5baskın renkler ve arka plan arasındaki minimum fark (Daha yüksek bir değer daha yüksek kontrastlı renk kombinasyonları verecektir)

İşte bu kadar!

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

Nihai Çıktı

notlar

Algoritma genel olarak uygulanabilir. Yukarıdaki ayarları ve tolerans değerlerini, test ettiğim albüm kapaklarının ~% 80'i için genellikle doğru renkleri üretmek için çalıştıkları noktaya kadar değiştirdim. DominantColorsNewVurgulamalar için geri dönecek iki renk bulamadığında (örn. Albüm kapağı tek renkli olduğunda) birkaç kenar durumu oluşur . Algoritmam bu durumları ele almıyor, ancak iTunes'un işlevselliğini çoğaltmak önemsiz olacaktır: albüm iki vurgudan daha az vurgu yaptığında, arka planla en iyi kontrasta bağlı olarak başlık beyaz veya siyah olur. Sonra şarkılar varsa vurgulanan renk haline gelir veya başlık rengi arka plana biraz soluklaşır.

Daha fazla örnek

Daha fazla örnek


3
Tamam @Seth Thompson, çok umut verici görünüyor. Ben kendim deneyeceğim, birkaç gün sürecek, lütfen sabırlı olun.
LuisEspinoza

6
Oldukça harika bir çözüm. Şimdi Mathematica'dan Objective-C'ye bir limana ihtiyacım var, bu zor bir mücadele.
loretoparisi

1
Bu çok ayrıntılı cevap için +1!
Marius Schulz

1
@cormullion LUV (ve LAB) her ikisi de algısal bütünlüğü amaçlamaktadır. Bununla birlikte, her iki renk uzayında da öklid mesafelerinin kullanımına ilişkin açık referanslar bulamadım. Benim tahminim, başka hiçbir şey olmasaydı, her ikisi de RGB'den daha iyi olurdu.
Seth Thompson

6
Ben "Chuck Norris Cevap"
demek istediğim bu

44

@ Seth-thompson'un cevabı ve @ bluedog'un yorumuyla, bir görüntünün işlevinde renk şemaları oluşturmak için küçük bir Objective-C (Cocoa-Touch) projesi inşa ediyorum.

Projeyi şu adresten kontrol edebilirsiniz:

https://github.com/luisespinoza/LEColorPicker

Şimdilik, LEColorPicker şunları yapıyor:

  1. Görüntü 36x36 piksel olarak ölçeklendirilir (bu işlem işlem süresini azaltır).
  2. Görüntüden bir piksel dizisi oluşturur.
  3. Piksel dizisini YUV alanına dönüştürür.
  4. Seth Thompson'ın kodunun yaptığı gibi renkleri toplayın.
  5. Renk kümeleri sayıma göre sıralanır.
  6. Algoritma en baskın üç rengi seçer.
  7. En baskın olanı Arkaplan olarak atandı.
  8. İkinci ve üçüncü en baskın olanlar, renklerin arka planla kontrast oluşturup oluşturmadığını kontrol etmek için w3c renk kontrast formülü kullanılarak test edilir.
  9. Metin renklerinden biri testi geçemezse, Y bileşenine bağlı olarak beyaz veya siyah olarak atanır.

Şimdilik, yeni özellikler için ColorTunes projesini ( https://github.com/Dannvix/ColorTunes ) ve Wade Cosgrove projesini kontrol edeceğim . Ayrıca renk şeması sonucunu iyileştirmek için bazı yeni fikirlerim var.

Screenshot_Mona


2
+1 - Çok güzel şeyler ve algoritma geliştirme ve uygulama geliştirmenin kendi başlarına nasıl çok ilginç olabileceğinin harika bir örneği
Yuval Karmi

1
Kontrastı kontrol etmek için +1.
brianmearns

Evet güzel ama her renk için hash değerlerini nasıl yuvarlıyorsunuz? Bu algoritmayı kolayca kırabileceğimi düşünüyorum, sağ alt kısma biraz siyah beyaz "Açık" logo ekleyerek, gerçekten siyah ve beyaz için bir odak ekliyorsunuz. Her neyse, bu algoritma küçük resim tabanlı görüntüler için daha iyi çalışır, ancak 36x36'da görüntünüz varsa, bu başarısız durumlar kenar yumuşatma ile daha nadir hale getirilir
Jack Franzen

Tek kelime: FANTASTİK!
Teddy


15

Olabilir de çıkış ColorTunes MMCQ (medyan kesim renk nicemleme) algoritması kullanan Itunes albümü görünümünün bir HTML uygulamasıdır.


evet zaten kontrol ediyorum. Ne yazık ki çok az belgelenmiş görünüyor.
LuisEspinoza

ColorTunes'daki önemli yorum (medyan kesim nicemleme algoritması) [ leptonica.com/papers/mediancut.pdf] referansıdır . Bunu sadece 2 saat içinde python'da sadece makaledeki açıklamayı oluşturdum ve yukarıdaki Seth'in algoritmasını uygulamamı tercih ettim. Sonuçları biraz daha beğendim, ama en önemlisi biraz daha hızlı (tabii ki Seth'in algoritmasını yanlış uygulayabilirdim).
brianmearns

@ sh1ftst0rm pithhon uygulamanızı github veya başka bir yerde yapıyor musunuz? şerefe
Anentropik

@Anentropic Üzgünüm, bilmiyorum. Üzerinde çalıştığım özel bir projenin parçasıydı ve hiç çıkarmadım. Bir şansım olursa, bir yere göndermeye çalışacağım, ancak muhtemelen yakında olmayacak.
brianmearns



Sitemizi kullandığınızda şunları okuyup anladığınızı kabul etmiş olursunuz: Çerez Politikası ve Gizlilik Politikası.
Licensed under cc by-sa 3.0 with attribution required.