{"id":451,"date":"2014-02-11T00:40:04","date_gmt":"2014-02-11T06:40:04","guid":{"rendered":"http:\/\/rrbits.com\/epb\/?p=451"},"modified":"2014-02-24T10:07:46","modified_gmt":"2014-02-24T16:07:46","slug":"image-color-dominator","status":"publish","type":"post","link":"https:\/\/rrbits.com\/epb\/2014\/02\/11\/image-color-dominator\/","title":{"rendered":"Image Color Dominator"},"content":{"rendered":"<p>Most anyone who&#8217;s used iTunes&#8217; album view will know about their color picking mechanism.\u00a0 I was curious about how this might be done and found this question on Stack Overflow: <a href=\"http:\/\/stackoverflow.com\/questions\/13637892\/how-does-the-algorithm-to-color-the-song-list-in-itunes-11-work\">How does the algorithm to color the song list in iTunes 11 work?<\/a><\/p>\n<p>So I set about creating an equivalent in PHP.\u00a0 I settled on using the IMagick PHP extension for grabbing pixel data and doing blurs.<\/p>\n<h3>The Results<\/h3>\n<p style=\"background: #d2d5da; color: #1f2530;\"><img loading=\"lazy\" decoding=\"async\" class=\"size-thumbnail wp-image-452\" style=\"border: 0;\" alt=\"mizu\" src=\"https:\/\/rrbits.com\/epb\/files\/2014\/02\/mizu-150x150.jpg\" width=\"150\" height=\"150\" srcset=\"https:\/\/rrbits.com\/epb\/files\/2014\/02\/mizu-150x150.jpg 150w, https:\/\/rrbits.com\/epb\/files\/2014\/02\/mizu-300x300.jpg 300w, https:\/\/rrbits.com\/epb\/files\/2014\/02\/mizu.jpg 380w\" sizes=\"auto, (max-width: 150px) 100vw, 150px\" \/> <strong style=\"color: #546275;\">Mizu<\/strong> (Water)<\/p>\n<p style=\"background: #030303; color: #c8bdb1;\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-thumbnail wp-image-453\" style=\"border: 0px;\" alt=\"moon\" src=\"https:\/\/rrbits.com\/epb\/files\/2014\/02\/moon-150x150.jpg\" width=\"150\" height=\"150\" srcset=\"https:\/\/rrbits.com\/epb\/files\/2014\/02\/moon-150x150.jpg 150w, https:\/\/rrbits.com\/epb\/files\/2014\/02\/moon-300x300.jpg 300w, https:\/\/rrbits.com\/epb\/files\/2014\/02\/moon.jpg 360w\" sizes=\"auto, (max-width: 150px) 100vw, 150px\" \/> <strong style=\"color: #77756d;\">Tsuki<\/strong> (Moon)<\/p>\n<p style=\"background: #5c3a36; color: #e9cfd1;\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-thumbnail wp-image-454\" style=\"border: 0;\" alt=\"fall\" src=\"https:\/\/rrbits.com\/epb\/files\/2014\/02\/fall-150x150.jpg\" width=\"150\" height=\"150\" srcset=\"https:\/\/rrbits.com\/epb\/files\/2014\/02\/fall-150x150.jpg 150w, https:\/\/rrbits.com\/epb\/files\/2014\/02\/fall-300x300.jpg 300w, https:\/\/rrbits.com\/epb\/files\/2014\/02\/fall.jpg 380w\" sizes=\"auto, (max-width: 150px) 100vw, 150px\" \/> <strong style=\"color: #c58332;\">Aki<\/strong> (Fall)<\/p>\n<p style=\"background: #03cad4; color: #7d008f;\"><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-thumbnail wp-image-466\" style=\"border: 0p;\" alt=\"Chibi\" src=\"https:\/\/rrbits.com\/epb\/files\/2014\/02\/chibi-150x150.png\" width=\"150\" height=\"150\" \/> <strong style=\"color: #020305;\">Chibi<\/strong> ^_^<\/p>\n<h3>The How<\/h3>\n<p>It&#8217;s largely based on the accepted answer given on the Stack Overflow question mentioned earlier. Except I separate potential highlights from the selected background based on a luminance ratio which produces more readable text, and there&#8217;s some additional logic for trying to pick contrasting highlight colors.<\/p>\n<h3>The Source<\/h3>\n<p>Source is available on BitBucket: <a href=\"https:\/\/bitbucket.org\/epb9000\/image-color-dominator\/\">https:\/\/bitbucket.org\/epb9000\/image-color-dominator\/<\/a> Not much in the way of documentation, so hopefully the comments on the class aren&#8217;t horrifically confusing. I&#8217;ll re-read them later and maybe make changes.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Most anyone who&#8217;s used iTunes&#8217; album view will know about their color picking mechanism.\u00a0 I was curious about how this might be done and found this question on Stack Overflow: How does the algorithm to color the song list in iTunes 11 work? So I set about creating an equivalent in PHP.\u00a0 I settled on&#8230;  <a class=\"excerpt-read-more\" href=\"https:\/\/rrbits.com\/epb\/2014\/02\/11\/image-color-dominator\/\" title=\"ReadImage Color Dominator\">Read more &raquo;<\/a><\/p>\n","protected":false},"author":1,"featured_media":474,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[31,3999],"tags":[4250,4243,4006,4262],"class_list":["post-451","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-php","category-programming","tag-color","tag-image-manipulation","tag-imagemagick","tag-php"],"aioseo_notices":[],"_links":{"self":[{"href":"https:\/\/rrbits.com\/epb\/wp-json\/wp\/v2\/posts\/451","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/rrbits.com\/epb\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/rrbits.com\/epb\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/rrbits.com\/epb\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/rrbits.com\/epb\/wp-json\/wp\/v2\/comments?post=451"}],"version-history":[{"count":13,"href":"https:\/\/rrbits.com\/epb\/wp-json\/wp\/v2\/posts\/451\/revisions"}],"predecessor-version":[{"id":475,"href":"https:\/\/rrbits.com\/epb\/wp-json\/wp\/v2\/posts\/451\/revisions\/475"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/rrbits.com\/epb\/wp-json\/wp\/v2\/media\/474"}],"wp:attachment":[{"href":"https:\/\/rrbits.com\/epb\/wp-json\/wp\/v2\/media?parent=451"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/rrbits.com\/epb\/wp-json\/wp\/v2\/categories?post=451"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/rrbits.com\/epb\/wp-json\/wp\/v2\/tags?post=451"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}