Interpolate colors in the current colorMode or in another specified space

[dontwanttothink]

Resolves #8806 and resolves #8883

Changes:

This pull request is an implementation of #8806 (comment):

However, if we bring forward the idea to define lerp space, we can have 1.x behavior while still having enough flexibility for those who need it. We will need to overload lerp() in this case:

lerp(color, amt, mode); // current signature
lerp(color, options); // additional overload signature

The overloads can be differentiated by the type of the second argument. options will be:

{
  amount: number,
  lerpMode: COLOR_MODE, // or would `lerpSpace` be better?
  outputMode: COLOR_MODE
}

And lerpColor() will stay the same in terms of signature while the way it calls lerp() will use the new overload

return c1.lerp(c2, {
  amount: amt,
  lerpMode: this._renderer.states.colorMode,
  outputMode: this._renderer.states.colorMode
});

lerpColor() can also be overloaded with the options object on its third argument if desired:

lerpColor(c1, c2, amt);
lerpColor(c1, c2, options); // Options here will be the same as the one above for `lerp()`

Screenshots of the change:

The following outputs are produced by variations of this code:

p.background(220);
p.noStroke();

const from = p.color("red");
const to = p.color("green");

p.colorMode("rgb")

for (let i = 0; i <= 10; ++i) {
  p.fill(p.lerpColor(from, to, i / 10))
  p.ellipse(i * 30, 200, 100, 100);
}

RGB:

LAB:

HSL:

I also tested the options object overload:

p.background(220);
p.noStroke();

p.colorMode("hsl")
const from = p.color(240, 100, 25);
const to = p.color("white");

p.colorMode("hsb")

for (let i = 0; i <= 10; ++i) {
  p.fill(p.lerpColor(from, to, {
    amount: i / 10,
    lerpMode: "oklab"
  }));
  p.ellipse(i * 30, 200, 100, 100);
}

Compare to HSB interpolation:

PR Checklist

• npm run lint passes
• Inline reference is included / updated
• Unit tests are included / updated

[davepagurek]

Nice screenshots @dontwanttothink!

[p5-bot]

Continuous Release

CDN link

• https://raw.esm.sh/pr/p5@ae0b41a/lib/p5.min.js

Published Packages

• https://pkg.pr.new/p5@ae0b41a

Commit hash: ae0b41a

Previous deployments

6144964

• https://raw.esm.sh/pr/p5@6144964/lib/p5.min.js
• https://pkg.pr.new/p5@6144964

09b8881

• https://raw.esm.sh/pr/p5@f065bcd/lib/p5.min.js
• https://pkg.pr.new/p5@f065bcd

---

This is an automated message.

[dontwanttothink]

I can't get the tests to run in my computer (I even tried setting up a Linux VM), so I'm not sure why it's failing to write those seemingly unrelated images :(

[dontwanttothink]

Oh, it looks like it's fixed?

[dontwanttothink]

Apparently the tests passed in my fork 🧚

[davepagurek]

@limzykenneth I think this looks good to me, anything you see that needs updating before merging?

[limzykenneth]

All looks great, well done!