Author Topic: Three color problem  (Read 10171 times)

Krice

  • (Banned)
  • Rogueliker
  • ***
  • Posts: 2316
  • Karma: +0/-2
    • View Profile
    • Email
Three color problem
« on: September 06, 2018, 09:34:30 AM »
I have theme colors for fonts, font shadow and background, but I guess I'm too dumb to determine the shadow color from font color and background color. Sometimes the background is light and sometimes dark so fonts with dark/light color need darker or lighter shadow depending on.. something. The shadow color itself is also complementary, but it's easy to do with HSV color. I think it's easiest to use HSV and work with V or value (0-255) of it. I bet there is a simple formula to calculate the shadow intensity, maybe our AI bots could help in this, they got the intelligence, right?
« Last Edit: September 06, 2018, 09:36:07 AM by Krice »

Krice

  • (Banned)
  • Rogueliker
  • ***
  • Posts: 2316
  • Karma: +0/-2
    • View Profile
    • Email
Re: Three color problem
« Reply #1 on: September 07, 2018, 06:54:00 AM »
I made a simple solution which doesn't work that well in some cases (the shadow is either too light or dark), but it's quite nice and at least solves worst problems with black font shadow in light background.

The formula first takes the difference between values of font and background. If it's more than 127 then 127 is added or subtracted to font shadow depending if the font is dark or light. If the difference is less than 127 then the shadow value is determined from background value in the same way:

Code: [Select]
const int q=fv-bv;
const int d=std::abs(q);

double av;
if (d>127)
{
if (fv<127) av=127.0;
else av=-127.0;
}
else
{
if (bv<127) av=127.0;
else av=-127.0;
}
fontc.Adjust_Value(av);

I'm thinking it should work more like some kind of interpolation to get better results.

Tzan

  • Rogueliker
  • ***
  • Posts: 193
  • Karma: +0/-0
    • View Profile
Re: Three color problem
« Reply #2 on: September 08, 2018, 12:24:56 AM »
    ... it wont let me delete the post
« Last Edit: September 08, 2018, 12:27:37 AM by Tzan »

Krice

  • (Banned)
  • Rogueliker
  • ***
  • Posts: 2316
  • Karma: +0/-2
    • View Profile
    • Email
Re: Three color problem
« Reply #3 on: September 08, 2018, 06:44:45 AM »
When I talk about my math skills people assume that I'm trolling, but I'm not. My inability to understand math was actually one of the main reasons why I drop out from "high school" (in Finland it's the three year school that prepares you to university). I have noticed that I can learn math if I keep trying it, but it doesn't actually help if you can't use it in real stuff. This is also why I spent so much time trying to do some kind of FOV routine, but it just didn't happen so I found some nicely working shadowcasting routine and copy-pasted the code. Although I'm not using it in Teemu (yet).

Vosvek

  • Guest
Re: Three color problem
« Reply #4 on: September 09, 2018, 01:36:41 AM »
Unless I have mistaken you, why not hardcode four specific scenarios, rather than trying to average/automate it out all in one go?
  • dark font + dark background = light shadow
  • dark font + light background = light shadow (or no shadow)
  • light font + dark background = dark shadow (or no shadow)
  • light font + light background = dark shadow

Out of curiosity, have you tried replicating/prototyping the effect in the likes of Photoshop or Gimp? Shadows often look ugly, especially when they're grey or utilise heavy mid-range shades. If you're trying to solve ugliness through code rather than the visuals, you might spend months overengineering what is inactuality a visual illusion. :)

Krice

  • (Banned)
  • Rogueliker
  • ***
  • Posts: 2316
  • Karma: +0/-2
    • View Profile
    • Email
Re: Three color problem
« Reply #5 on: September 21, 2018, 06:03:35 AM »
If you're trying to solve ugliness through code rather than the visuals, you might spend months overengineering what is inactuality a visual illusion. :)

I think complementary shadows work in that they bring up the font color itself. I think a full automatic routine can be programmed, but at the moment I have concentrated on more important things. But if someone can solve this it's better than me trying to do math.

Krice

  • (Banned)
  • Rogueliker
  • ***
  • Posts: 2316
  • Karma: +0/-2
    • View Profile
    • Email
Re: Three color problem
« Reply #6 on: November 06, 2018, 08:38:49 AM »
I think no one has tried to solve this before, because when I google for this I find nothing useful. And this combines two of my favourite subjects: color theory and math.

Edit: I did figure out some kind of solution. It's brute forcing value component of HSV and finding out the distance in both font value vs. shadow and background value vs. shadow, then averaging them. I found out that for reasons unknown value 144 for font and 110 for background distance seems to work best. The result is not perfect, but better than before. Some background colors are just a bit difficult and it's funny to see how some subtle colors almost completely disappear in background colors like cyan. Maybe I have to adjust background colors to get slightly better results.

Code: [Select]
int v1, v2;
for (v1=0; v1<255; v1++)
{
int v=std::abs(fontvalue-v1);
if (v==144) { v1=v; break; }
}
for (v2=0; v2<255; v2++)
{
int v=std::abs(backvalue-v2);
if (v==110) { v2=v; break; }
}

int dv=(v1+v2)/2;
« Last Edit: November 06, 2018, 10:32:02 AM by Krice »

Krice

  • (Banned)
  • Rogueliker
  • ***
  • Posts: 2316
  • Karma: +0/-2
    • View Profile
    • Email
Re: Three color problem
« Reply #7 on: November 06, 2018, 11:54:17 AM »
I made a simpler solution by thinking the average value of font and background colors as a "slope" from 0-255 and then created a shallow slope of matching values. Oh man, how did I think this idea? I guess you could somehow adjust the slope to be more like curve, but it's not in my skill range.

Code: [Select]
int arr[257];
double slope=200.0;
for (int t=0; t<255; t++)
{
arr[t]=(int)slope;
slope-=0.588;
}

const int q=(fontvalue+backvalue)/2;
int dv=arr[q];

fontc.Set_Value((double)dv);