1

I would like to create my own lerpColor(c1, c2, amount) function, with the same output as the one in ProcessingJS http://processingjs.org/reference/lerpColor_/

I am looking or something like this:

lerpColor = function (c1, c2, amount) {
    // Do some math stuff here
    return(newColor);
};

Any help would be greatly appreciated.

  • 1
    This was open source, so https://github.com/processing-js/processing-js/blob/4cc86a9fe596d11e72ddaf133cfa3e5db895dcc7/src/Processing.js#L3246-L3296 shows you how we did it, but also realise that it's _not correct_, it's merely "the same as what Processing did". Procesing did color interpolation wrong, so Processing.js did, too. [Real color interpolation](https://medium.com/@michael.m/true-color-interpolation-a1a17352ebf0) works differently – Mike 'Pomax' Kamermans Jun 08 '20 at 04:35
  • I was actually looking for the same way Processing.js does it, I just didn't know there was a github repository for it. Thanks! –  Jun 08 '20 at 16:32
  • also be aware that it's not longer a living project =) – Mike 'Pomax' Kamermans Jun 08 '20 at 19:14
  • Ok, thanks for the heads up. –  Jun 09 '20 at 00:25

1 Answers1

1

If this color interpolation works purely in RGB color space, you need to extract color components and apply the next arithmetics to each component

r1 = red(c1)
r2 = red(c2)
result_red = (1-amount) * r1  + amount * r2
or 
result_red = r1 + amount * (r2 - r1)
...
return(color(result_red, result_green, result_blue));
MBo
  • 77,366
  • 5
  • 53
  • 86
  • This works for numbers, but for colours it's also wrong (and Pjs did it wrong, because P5 did it wrong. Pjs aimed for parity, not correcting mistakes). If this person wants real colour interpolation, convert to HSL, and interpolate _that_, with linear hue, and quadratic brightness interpolation – Mike 'Pomax' Kamermans Jun 08 '20 at 04:38
  • @Mike 'Pomax' Kamermans I emphasized that this approach for RGB components. Note it is not completerly wrong (It cannot produce green for interpolation between read and blue) - it just gives inexact transition sequence for advanced artist eye :) – MBo Jun 08 '20 at 04:58
  • yeah but even for RGB interpolation, this is wrong (even though for individual component channels it might be okay). Not "for advanced artist eyes" but for regular eyes: the interpolation between (255,0,0) and (0,255,0) should never be washed out browns, it should go through actual yellow and orange and preserve the 255 intensity =) – Mike 'Pomax' Kamermans Jun 08 '20 at 19:15