<p>Say you have colors</p>

<p>$[c_1, c_2, c_3, c_4, c_5]$</p>

<p>And $t$ values at which each color should be purely displayed.</p>

<p>$[t_1, t_2, t_3, t_4, t_5]$</p>

<p>Now your problem is given $t$ which color do I have to display?</p>

<ol>
<li>Find the t-values $t_i$ and $t_{(i+1)}$ between which $t$ lies.</li>
<li>Calculate a 0 to 1 ratio where $t$ lies between them</li>
</ol>

<p>$ param = (t - t_i) / (t_{(i+1)} - t_i) $</p>

<ol start="3">
<li>Interpolate the color via</li>
</ol>

<p>$ c = param * c_i + (1-param) * c_{(i+1)}$</p>

<p>If I haven't messed up something in my mind, this should work for any piecwise linear function, and not only if your $t_i$ values lie between 0 and 1.</p>

CC BY-SA 3.0
2016-07-29T23:18:36.603Z
2016-07-29T23:18:36.603Z
Dragonseel
<p>I have an array of color values. I have an interpolating parameter, <code>t</code>, which varies from <code>0</code> to <code>1</code>.</p>

<p>I can't for the life of me figure out how to smoothly interpolate between these color values based on <code>t</code>, such that I get a smooth blended color for any <code>t</code> value.</p>

<p>Any ideas? Its probably something simple that I am blanking out on.. </p>

CC BY-SA 3.0
2016-07-29T23:07:52.117Z
Should the colors be equally spaced in terms of t? Or do you need some more general solution for other distributions also?
Dragonseel
CC BY-SA 3.0
2016-07-30T13:50:41.707Z
Do you require the same colour value for t=0 and t=1? That is, must the colour change wrap smoothly at the end points?
trichoplax is on Codidact now
CC BY-SA 3.0
2016-08-01T18:58:23.330Z
@Dragonseel.. I think i can make them to be equally spaced out.. but I would definitely be interested in hearing about a more general solution as well..
lokstok
CC BY-SA 3.0
2016-08-01T18:59:38.477Z
@trichoplax.. i don't really need them to be wrapped around.. would it be different than having the same colors at the end points of the array?
lokstok
CC BY-SA 3.0
2016-08-01T19:08:31.807Z
@lokstok good point - I think that covers it so it shouldn't make a difference to the solution.
trichoplax is on Codidact now
<color><interpolation>
How can you interpolate over an array of say 5 colors?
lokstok
# How can you interpolate over an array of say 5 colors?

(Asked by: username_0 on 2016-07-29)

I have an array of color values. I have an interpolating parameter, `t`, which varies from `0` to `1`.

I can't for the life of me figure out how to smoothly interpolate between these color values based on `t`, such that I get a smooth blended color for any `t` value.

Any ideas? Its probably something simple that I am blanking out on..

**Tags:** color, interpolation

> **Comments:**
> **username_1**: Should the colors be equally spaced in terms of t? Or do you need some more general solution for other distributions also?  
> **username_2**: Do you require the same colour value for t=0 and t=1? That is, must the colour change wrap smoothly at the end points?  
> **username_0**: @username_1.. I think i can make them to be equally spaced out.. but I would definitely be interested in hearing about a more general solution as well..  
> **username_0**: @username_2.. i don't really need them to be wrapped around.. would it be different than having the same colors at the end points of the array?  
> **username_2**: @username_0 good point - I think that covers it so it shouldn't make a difference to the solution.  

---

## 1 answers

### Answer by username_1 on 2016-07-29. Score: 3 | Accepted answer

Say you have colors

$[c\_1, c\_2, c\_3, c\_4, c\_5]$

And $t$ values at which each color should be purely displayed.

$[t\_1, t\_2, t\_3, t\_4, t\_5]$

Now your problem is given $t$ which color do I have to display?

1. Find the t-values $t\_i$ and $t\_{(i+1)}$ between which $t$ lies.
2. Calculate a 0 to 1 ratio where $t$ lies between them

$ param = (t - t\_i) / (t\_{(i+1)} - t\_i) $

3. Interpolate the color via

$ c = param \* c\_i + (1-param) \* c\_{(i+1)}$

If I haven't messed up something in my mind, this should work for any piecwise linear function, and not only if your $t\_i$ values lie between 0 and 1.


---

