How to fade from one colour to another

[ItHadToComeToThis]

Not too sure on how to do this one. So asking you fine people.

I have a floating text bar. I want to fade from say red to green depending on whether a percentage is 0 or 100. So at 0% it would be fully red. 100% would be fully green.

Now, there is the basic way of doing it I think which is an <R,G,B> vector that increases / decreases red or green depending on the percentage. That way is easy enough.

But what if you don't want full red <1,0,0> or full green <0,1,0>. What if you wanted to fade between two different shades of green and red and the two vectors were like <0.987, 0.0144, 0.0013> etc and the other vector has a different variation of blue. 

Is there a way to do this so that one colour fades into another?

Edited July 23, 2021 by ItHadToComeToThis

[Rolig Loon]

One way would be to define a straight-line path between the two color vectors which, after all, are just definitions of points in 3D RGB space.  So, say you want to change gradually from <a,b,c> to <x,y,z> in 10 steps. Each step on a straight line between the two involves changing the R component by (x - a)/10, the G component by (y - b)/10, and the B component by (z - c)/10.  That is

<R,G,B> = < (a + (x-a)/10)*i,  (b+(y-b)/10)*i,  (c + (z-c)/10)*i)> , where i is the step number [1,10].

If you want to take a more interesting path than a straight line, you just have to define that curve and slice it up to define how much R, G, and B change in each step.

EDIT:  To be clear, your slider bar is just the graphical representation of that straight line between <a, b, c> on one end and <x, y, z> on the other.  As you move the slider, each step (i) along that line is defined by that simple equation.

Edited July 23, 2021 by Rolig Loon
typos. as always.

[Quistess Alpha]

I'm not really a color expert, but IIRC slides like this are better done in a different colorspace, read up on

http://wiki.secondlife.com/wiki/LlLinear2sRGB and its cousin

http://wiki.secondlife.com/wiki/LlsRGB2Linear 

Also, Rolig made the math look worse than it is. it's easier to think about this as a weighted sum of the 2 colors:

float f = 0.1;
vector color1 = <1,0.5,0.25>;
vector color2 =<0.25,1,0.75>; // not even sure what colors these are. . .
vector inbetween(vector a,vector b,float f)
{
  return (1-f)*a + f*b;
  // FWIW, this is equivalent to:
  // return a + f*(b-a);
}

where 'f' is the amount between the 2 colors; 0.0 is color a, 1.0 is color b.

Edited July 23, 2021 by Quistess Alpha

[Rolig Loon]

2 minutes ago, Quistess Alpha said:

Also, Rolig made the math look worse than it is. it's easier to think about this as a weighted sum of the 2 colors:

Heh ... Both do the same thing. It's just a matter of whether you solve the problem algebraically or as a matrix problem.  Yours does look less imposing, though.   

[Quistess Alpha]

Also, I just remembered the actual loop for this sort of thing has a number of annoying gotchas, if you want to avoid them, IMO best practice is to use integers in the loop conditionals and calculate the floats, rather than (for example) adding a float increment:

//Do this:
integer index_max = 9;
integer index;
for(index=0;index<=index_max;++index)
{
  //...
    float f = (float)index/index_max;
}

//Don't do this:
float max = 1.0;
float f;
for(f=0.0;f<=max;f+=0.11111111111)
{
  //...
}

It will save you a big headache, not that there aren't ways to make a floating-point increment work if you really want to.

[ItHadToComeToThis]

Awesome. Thank you everyone

[Qie Niangao]

I'm late to the thread and even though there's a fine solution already, I try never to miss a chance to cite Nexii Malthus' fine Interpolation library. which I also use myself every chance I can find an excuse. (The vector linear interpolation formula will look mighty familiar.)

[Mollymews]

not sure what happened to my other post, so I do again and show another way that precalculates the size of the partition to reduce the amount of computation at each step

default
{
    state_entry()
    {
        vector start = <0.987, 0.0144, 0.0013>;
        vector end = <0.0122, 0.872, 0.0145>;

        // precalculate partition
        integer mag = 8;  // change mag to whichever suits
        vector part = (end - start) / mag;

        // testing loop
        integer step;
        vector color = start;        
        llOwnerSay((string)step + " " + (string)color);
        for (step = 1; step < mag - 1; step++)
        {
           color += part;
           llOwnerSay((string)step + " " + (string)color);
        };
        color = end;
        llOwnerSay((string)step + " " + (string)color);
     }
}

 

 

[Quistess Alpha]

2 hours ago, Qie Niangao said:

I'm late to the thread and even though there's a fine solution already, I try never to miss a chance to cite Nexii Malthus' fine Interpolation library. which I also use myself every chance I can find an excuse. (The vector linear interpolation formula will look mighty familiar.)

OMG thank you. I kinda need fancy vector interpolation for KFM things and have been putting of trying to implement it myself ( my guesses at formulae work kinda, but aren't the best. )

[Rolig Loon]

2 hours ago, Qie Niangao said:

I try never to miss a chance to cite Nexii Malthus' fine Interpolation library. which I also use myself every chance I can find an excuse.

Thank you for that reminder, Qie.  I had all but forgotten about Nexii's collection. There are some lovely gems hidden in user pages in the wiki.  I have used some of Dora's insights from time to time, for example.  She was an impressive mathematician, especially with vectors.  And then, of course, there's Void's collection of clever functions to manipulate lists (and other things).  Strife Onizuka has stuff (like this) scattered all over the place too. Many of the early LSL scripters have moved on or died, leaving a legacy of Easter Egg gems like these .  I've often thought that it's a shame most of these functions are buried where you would never know to look. 

[Rolig Loon]

26 minutes ago, Quistess Alpha said:

I kinda need fancy vector interpolation for KFM things

Having just recalled Dora Gustafson's stuff in reply to Qie, I should aim you specifically to her experiments with KFM, which you'll find on her user page.  I have had great fun playing with her Bezier Toy, which I still do not understand fully.  Dora had an in-world shop where she sold many of her scripted tools and toys, usually at ridiculously low prices and many full perm.