Search In
• More options...
Find results that contain...
Find results in...

# question about interpolating between colors

## Recommended Posts

This issue [ https://github.com/processing/p5.js/pull/615 ] about interpolating colors for the web project p5.js caught my eye and made me wonder about interpolating between colors in greensock.  Are the techniques described therein applied to greensock color tweens

Just curious.  Thanks.

##### Share on other sites

codepen example.

jammed a whole library in there... sorry.  the relevant code is at the bottom.

See the Pen oXxvPN?editors=011 by jedierikb (@jedierikb) on CodePen

##### Share on other sites

Wow, what a big difference! Have you tried doing that in GSAP, the whole squaring/square root values thing using some sort of proxy to update the values on?

FYI: Next time you need to add a library like that to your code, you can put it inside a <script> tag at the bottom of your HTML.

See the Pen NqNqNb by osublake (@osublake) on CodePen

• 2
##### Share on other sites

If you have ever wondered why tweening a color can display some odd colors or flashing, you need to check out the video in Erik's link. It's very interesting, showing how everybody is doing it wrong, including image experts like Adobe.

As the video shows, the fix is real easy. I just used the imprecise method found on Wikipedia to get the colors to tween like p5. I have the animation set to repeat, which makes the color problem really noticeable, especially when going back to red. It turns a nasty brown with a bright flash at the end.

```// Value between 0-1 that GSAP sets
var amount = Math.max(Math.min(amount, 1), 0);

var rgb1 = [255,0,0];
var rgb2 = [0,255,0];
var color = [];

function lerpColors() {
for (var i = 0; i < rgb1.length; i++) {
var color1 = rgb1[i] * rgb1[i];
var color2 = rgb2[i] * rgb2[i];
color[i] = (Math.sqrt(amount * (color2 - color1) + color1)) >> 0;
}
}

```

Demo:

See the Pen xGVVaN by osublake (@osublake) on CodePen

• 2
##### Share on other sites

Good stuff, guys. This isn't something we can easily drop into CSSPlugin at this point due to a lot of optimizations under the hood, but I'll keep it in mind for an update in the future. Love the video explanation.

##### Share on other sites

Just out of curiosity, how interconnected are color and the CSSPlugin? Would modifying the colorPropsPlugin with CSS propNames cause problems?

##### Share on other sites

Unfortunately that wouldn't work because there are some special tasks related to animating CSS properties like:

1. CSS styles aren't set as properties on the element itself; they're technically properties of the "style" object of the element. You could try TweenLite.to(element.style, 1, {colorProps:{...}}) but...
2. Current value(s) must be queried using the browser's getComputedStyle() method because they often aren't defined as inline styles, thus don't exist on the "style" object itself. So when the tween says "what's the current value of target.backgroundColor" it'd get "" instead of "rgb(255,0,0)".

So yeah, it'd technically be possible if you set your colors as inline styles and you formatted your tween properly, but that just doesn't seem very bullet-proof or production-ready as we try to make GreenSock stuff in general. It would definitely be easier/faster for me to add the squaring/square-rooting to ColorPropsPlugin rather than CSSPlugin, but I'd rather take a more holistic approach when the time comes to add that feature. We just have a lot of other things slated before that.

• 3
##### Share on other sites

• 11 months later...

Any update on this colorful issue?

##### Share on other sites

Nobody else has requested it, and we have added hsl() color capabilities (including relative values), so hopefully that will suffice.

• 2