Taiko2k / Tauon

The music player of today! :city_sunrise:
https://tauonmusicbox.rocks
GNU General Public License v3.0
1.64k stars 64 forks source link

[Feature request] Expose colours generated from art to themes #1135

Open curbia opened 2 months ago

curbia commented 2 months ago

I know you've talked in the past about deprecating auto theme, and given how it is currently implemented I can understand why.

Yesterday I was on a bit of a tear regarding custom theming and was trying to figure out how the Carbon theme uses a custom colour from the album art. I eventually found that it is built into t_main.py at line 5734. I think this is a missed opportunity to allow themers to use custom colours from the album artwork as accents in their themes.

Rather than hardcoding that bit of code to look for a theme named Carbon, I propose that we expose 2-3 colours as variables that can be implemented in themes. Something like this:

36,36,36        playlist panel
var(--auto1)        bottom panel
48,48,48        side panel

(Sorry for the CSS variable example, it's all I really know.)

And I remember you saying that the Carbon theme's math is different than the auto-theme's. In some cases it provides a good colour:

colours1

But in other cases its colour choice is somewhat strange:

colours2

I would've grabbed more examples, but I managed to cause a crash I can't recover from. (#1134) In any case, it would be really cool if we could hammer down a process to pull a few good accent colours and surface them to themers somehow.

curbia commented 2 months ago

More examples: colours3 colours4 colours5 colours6 colours7

It seems variable as to which calculation method is better. In general, albums with a lot of black/white/grey seem more difficult to pull colours from, as those shades will always appear at the top of the list of colours that occur often. It might make sense to de-prioritize grey shades so that you get actual accent colours.

I did a super simple test in GIMP to test this idea and it seems to work very well. Essentially, you strip out all of the black and all of the white from the image (colour erase layer in GIMP) so you are just left with the vibrant colours. Choose points in the image with the most abundant colours, then add the black/white back in and sample at those points to get accent colours. (If you don't add them back, the accent colours are much too bright.)

image

While researching this I found a Python library that can manipulate images, but I'm unsure if it would have the tools needed for this feature. As a CPU-saving method, this calculation could be run only when the art is loaded for the first time, and stored in a static database.

(This is all just me spitballing)

Taiko2k commented 2 months ago

Thanks for the write up. Thing is its a hard problem getting colours that look good together in the right places. Its hard enough designing this manually let alone automatically. Carbon works well because its quite constrained.

Exposing controls for this to the theme files, the way carbon works, is a good idea, but still a considerable engineering challenge. Its just not worth prioritizing I feel.

I think if we really want more auto theme themes and we have a theme that is worth including, then just adding more hard coded code paths might be the more worthwhile tide over.

curbia commented 2 months ago

Just for fun, I spent a bit of time today learning basic Python and playing around with this library. (There is a live demo here if you want to drag some images on to see what it spits out.)

I wrote a super basic script that pulls a palette of 4 colors for an image, because in my testing usually the colors I perceived as the "most important" fell within the top 4. Usually not the first rank, because a lot of albums are visually dominated by black.

In order to rank the results by their perceived intensity, I needed to do some math to compare the colors. Luckily, I have been messing around a lot with this in CSS/SVG recently and thus learned quite a bit about mathematical color theory. Using colorsys, I converted the RGB swatches to HLS to make it easier to compare their saturation and lightness.

Here is a comparison of a few covers I tested using this math. It's basically just a representation of intensity by multiplying the saturation of each swatch by 1 - the distance of its lightness from the mid-point, where color is most intense.

test 1

The math definitely need to be played with, but so far it definitely de-emphasizes dark and desaturated colors to some degree. Others I'm a little confused about and will need to dig into the results, but perhaps another day!