How do you lighten/darken a color without the aid of a shader?
For example, color1 = (r, g, b), is some color that I don't know, now what color2 can I add to color1 to make color3(a lighter color of color1)
Assuming a vector addition operator was as follows: color1(r1,g1,b1)+color2(r2,g2,b2)=color3(r1+r2,g1+g2,b1+b2)
My first thought was to somehow move the color towards pure white(1,1,1) to lighten(or pure black (0,0,0) to darken), but I have no idea how to do this.
The simplest way is to do a lerp.
newcolor = lerp(color, vec3(1,1,1), x) to Lighten
newcolor = lerp(color, vec3(0,0,0), x) to Darken
In both cases x goes from 0 (no change) to 1 (full change)
if you don't know what a lerp is its a linear interpolate from 1 component to the next.
c = a + (b-a)*x
I'm a little confused about Linear Interpolation, and I didn't see anything on Google about lerp.
But I think I understand the general concept in my own terms:
A scalar x may be used with a color vector to lighten or darken the following ways:
(i)To lighten, color1 = (r*x, g*x, b*x) where x is the percentage amount you want the color to be darkened. Where (0 < x < 1)(ie: x=.5 = 50% darken)
(ii)To darken,Same as (i), except (1 < x < inf) (ie: x=2=200% lighten)
Think of linear interpolation as this: you have a straight line. There are two points on this line, representing two colors, say red and blue:
-------------- red ---------------------------------------- blue ----------------
Now any point on the line between red and blue corresponds to some gradient of red and blue. We can give each point on this line a scalar value, call it t:
t = 0 corresponds to red
t = 1 corresponds to blue
t between 0 and 1 corresponds to some point between red and blue, for instance t = 0.5 is exactly halfway, t = 1/3 is two thirds red, one third blue, and so on.
(t below 0 and above 1 are also possible but are less useful)
Now the formula to calculate the exact color depending on the scalar t is:
color = blue * t + red * (1 - t)
This is basically saying, take a proportion t of blue, and make the rest (1 - t) red, and add them to obtain the final color. We can rewrite this as:
color = red + (blue - red) * t
Which is really the equation of a line (thus the name linear interpolation). More broadly:
interpolated value = start value + (end value - start value) * scalar
Now if you wanted to make a color darker, you would want to interpolate between your color and black, and to make a color lighter you want to interpolate between your color and white.
Of course this isn't the only way to lighten or darken colors, even though it makes the most sense in general. You could also just add or subtract X to each component of the color until it becomes 0 or 255. It depends on your constraints/requirements and the specific effect you wish to obtain.
Ah, I completely understand now, thanks! All I needed was a little more elaboration :)
Just multiply your color vector by a scalar.
For example, 1.5 to lighten, 0.5 to darken, etc.
isn't the good way passing into HSL, raising L, then going back to RGB ?
obviously, the end results are the same (maximum light or max dark, white and black) .
But maybe in the middle the HSL way respects the Hue better I think. You get progressive desaturation with the lerp technique.
or maybe i'm just dead wrong.
You get progressive desaturation with the lerp technique.
It's the same with HSL/HSV. You had to use Luv or Lab if you really want to manipulate the lightness decoupled from saturation. Perhaps YCrCb would be a sufficient compromise; I'm not sure.
You get progressive desaturation with the lerp technique.
It's the same with HSL/HSV. You had to use Luv or Lab if you really want to manipulate the lightness decoupled from saturation. Perhaps YCrCb would be a sufficient compromise; I'm not sure.
XYZ is nice too, and also takes into account human perception. Probably overkill, though.
A lerp() will mix the two colours, if that's what you want go for it. if you want to lighten a colour you can convert it to an HSB colour space, add some brightness, and convert back to RGB. You can also do what someone above wrote, multiply by a number greater than 1, you will desaturate the colour after a certain point though.
