Visually Separate Characters

[SunburnedGoose]

https://github.com/lokesh/color-thief/

http://lokeshdhakar.com/projects/color-thief/

[AndrewC-B]

It's beautiful. 

Might be worth checking to see if there are any emblems which might cause contrast issues with the yellow and white borders around item tiles.

On Tue, May 12, 2015 at 6:34 PM, Rick Casey notifications@github.com wrote:

https://github.com/lokesh/color-thief/

http://lokeshdhakar.com/projects/color-thief/

Reply to this email directly or view it on GitHub: https://github.com/kyleshay/DIM/issues/103

[phatsk]

I tried it in the class main colors but...it's a little abrasive:

Another option would be to agree on three other colors to use, or maybe even make it configurable? I'm not sure about pulling in the dominant pixel value from an emblem or shader though.

Edit: didn't even see the links to color thief smh

[SunburnedGoose]

Can you pull it then mix in some grey to desaturate the color? It should be pretty muted, but distinct. 20% saturation?

On Tue, May 12, 2015 at 11:59 AM phatsk notifications@github.com wrote:

I tried it in the class main colors but...it's a little abrasive:

[image: screen shot 2015-05-12 at 12 57 24 pm] https://cloud.githubusercontent.com/assets/990374/7593223/85769444-f8a6-11e4-9f2c-cb1eae223326.png

Another option would be to agree on three other colors to use, or maybe even make it configurable? I'm not sure about pulling in the dominant pixel value from an emblem or shader though.

— Reply to this email directly or view it on GitHub https://github.com/kyleshay/DIM/issues/103#issuecomment-101347891.

[phatsk]

I'm looking into color-thief now - just need a good hook into the document ready so the images can load first (apparently CT expects the images to be downloaded - makes sense).

[SunburnedGoose]

If you can show me the code that takes in the image, and exports the correctly saturdated color, I'll wire up angular to make it work.

[phatsk]

It should be pretty straightforward - you need to grab the emblem image src. I've found that it's being set in scripts/store/dimStoreHeading.directive.js:

vm.characterBoxUrl

From there, just plug it in with colorThief and an invisible <img> element:

var colorThief = new ColorThief();
var bg_img = document.createElement('img');
bg_img.src = vm.characterBoxUrl;
bg_img = colorThief.getColor(bg_img);

// "Saturate" - a more comprehensize color library is available here:
// https://github.com/eligrey/color.js/blob/master/color.js
// but tbh we could just reduce the intensity given back from ColorThief 

for(var i = bg_img.length; i--;)
bg_img[i] = bg_img[i] - (bg_img[i]* 0.2); // "saturate" by 20%

// Put it in a string
bg_img = 'rgb(' + bg_img.join(',') + ')';   

[kyleshay]

here is another library that focuses on looking at the vibrant colors in the image apposed to the most common;

http://jariz.github.io/vibrant.js/

not sure which would be ideal. just a consideration.

[SunburnedGoose]

We should test it. On Wed, Jun 24, 2015 at 12:59 PM kyle shay notifications@github.com wrote:

here is another library that focuses on looking at the vibrant colors in the image apposed to the most common;

http://jariz.github.io/vibrant.js/

not sure which would be ideal. just a consideration.

— Reply to this email directly or view it on GitHub https://github.com/kyleshay/DIM/issues/103#issuecomment-114959212.

[SunburnedGoose]

https://developer.chrome.com/apps/app_external#external https://github.com/lokesh/color-thief/blob/master/dist/color-thief.min.js

img.onload = function () { var colorThief = new ColorThief(); colorThief.getColor(img); };

[kyleshay]

can revisit this if we want, closing for now