Linear color lerp with three colors

Processing Coding Questions
1

Hi There,

I Want to make a linear color lerp with three colors. I already figured out how to make a lerp with just two colors. Is there someone who can help me to make a ‘lerpColor()’ with three separete color values? Thanks

color from = color(204, 102, 0);
color to = color(0, 102, 153);
color interA = lerpColor(from, to, .33);
color interB = lerpColor(from, to, .66);
fill(from);
rect(10, 20, 20, 60);
fill(interA);
rect(30, 20, 20, 60);
fill(interB);
rect(50, 20, 20, 60);
fill(to);
rect(70, 20, 20, 60);
2

To get you started:

void setup()
  {
  size(180, 100);
  color from = color(204, 102, 0);
  color to = color(0, 102, 153);
  color interA = lerpColor(from, to, .33);
  color interB = lerpColor(from, to, .66);
  fill(from);
  rect(10, 20, 20, 60);
  fill(interA);
  rect(30, 20, 20, 60);
  fill(interB);
  rect(50, 20, 20, 60);
  fill(to);
  rect(70, 20, 20, 60);

  fill(from);
  rect(10+80, 20, 20, 60);
  fill(interA);
  rect(30+80, 20, 20, 60);
  fill(interB);
  rect(50+80, 20, 20, 60);
  fill(to);
  rect(70+80, 20, 20, 60);
  }

image

image

I did not complete the code. It is just a hint.

:)

1 Like
3

Hi,

If you want to lerp with three colors, you can think of it like this :

  • With two colors, if you give lerp a value of 0, then it’s the first color and 1 for the second color.

  • With three colors, the first color will still be 0, the third one at 1 and the second one must be in the middle of the two so 0.5

So if it’s less than 0.5, lerp with the first and the second color and if it’s above 0.5, lerp with the second and the third color :wink:

1 Like