[p5.js 2.0+ Bug Report]: `lerpColor()` not affected by `colorMode()`

[fidelthomet]

Most appropriate sub-area of p5.js?

• Accessibility
• Color
• Core/Environment/Rendering
• Data
• DOM
• Events
• Image
• IO
• Math
• Typography
• Utilities
• WebGL
• WebGPU
• p5.strands
• Build process
• Unit testing
• Internationalization
• Friendly errors
• Other (specify if possible)

p5.js version

2.3.0

Web browser and version

browser independent, tested on Safari Version 26.5 (21624.2.5.11.4)

Operating system

MacOS

Steps to reproduce this

setting the colorMode() to anything other than RGB doesn't seem to affect lerpColor. This used to work in previous p5 versions and the documentation reads:

The way that colors are interpolated depends on the current colorMode().

expected (p5.js 1.x):

actual result (p5.js 2.x):

Steps:

1. Copy the code snippet into a p5.js 2.0+ version
2. Compare result with running the code in p5.js 1.x

Snippet:

function setup() {
  createCanvas(100, 100);

  background(200);

  // Create p5.Color objects to interpolate between.
  let from = color(218, 165, 32);
  let to = color(72, 61, 139);

  colorMode(HSB)
  
  // Create intermediate colors.
  let interA = lerpColor(from, to, 0.33);
  let interB = lerpColor(from, to, 0.66);

  // Draw the left rectangle.
  noStroke();
  fill(from);
  rect(10, 20, 20, 60);

  // Draw the left-center rectangle.
  fill(interA);
  rect(30, 20, 20, 60);

  // Draw the right-center rectangle.
  fill(interB);
  rect(50, 20, 20, 60);

  // Draw the right rectangle.
  fill(to);
  rect(70, 20, 20, 60);

  describe(
    'Four rectangles. From left to right, the rectangles are tan, brown, brownish purple, and purple.'
  );
}

[harshiltewari2004]

Happy to take this up!

[ksen0]

This has been the behavior since 2.0, @limzykenneth is this a bug?

[limzykenneth]

It should be working as the color mode is passed on, someone can look into why the mode is not taking:

https://github.com/processing/p5.js/blob/v2.3.0/src/color/p5.Color.js#L304-L328
https://github.com/processing/p5.js/blob/v2.3.0/src/color/creating_reading.js#L1435

[ksen0]

If anyone wants to volunteer please add your notes in a comment of why this problem is occurring and how you'd fix it, based on research startign from the comment above. Thank you!

[pupuking723]

I can work on this. I looked through the two places Kenneth pointed to, and my current read is that lerpColor() is passing the renderer's current colorMode into c1.lerp(c2, amt, mode), but Color.lerp() chooses the interpolation space from the two input colors' current underlying Color.js spaces before applying that mode to the returned color.

So in the reported sketch, both endpoints are created before colorMode(HSB), which means they still interpolate through sRGB; the HSB mode is only used for the returned p5.Color, not for the interpolation itself.

The fix I'd like to try is to make the explicit mode passed to Color.lerp() control the interpolation space too, by converting/using the endpoints in that requested p5 color mode before calling range(). I'll add a regression test where colors are created in RGB, colorMode(HSB) is set before lerpColor(), and the result differs from RGB interpolation in the expected way.

I used Codex to help inspect the implementation and draft this note, and reviewed the source references before posting.

[limzykenneth]

@pupuking723 Your explanation is a bit opaque here, I think you are probably on the right track though, can you file a PR with just the fix (without the test for now) and we can review if it is the right problem and fix?