[p5.js 2.0+ Bug Report]: Attempting to interpolate colors may fail with an exception if the colors are defined in different color spaces

[dontwanttothink]

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.2.3

Web browser and version

Browser-independent (tested on Safari 26.4, Chromium 148.0.7778.167)

Operating system

macOS

Steps to reproduce this

Steps:

For example:

1. Define a color using oklch: color("oklch(0.8, 0.1, 230)")
2. Define another color in sRGB: color(0)
3. Attempt to interpolate them: lerpColor(c_0, c_1, 0.5)

Result

Uncaught exception from color.js: TypeError: No color space found with id = "xyz-d65"

Snippet:

Also see: https://editor.p5js.org/dontwanttothink/sketches/pzp5YlR8t

function setup() {
  createCanvas(400, 400);
}

function draw() {
  const c_0 = color("oklch(0.8 0.1 230)");
  const c_1 = color(0);
  
  printColorSpacePath(c_0);
  printColorSpacePath(c_1);
  
  background(lerpColor(c_0, c_1, 0.5));
}

function printColorSpacePath(c) {     
  console.log(c._color.space.path.map(space => space.id))
}

[welcome]

Welcome! 👋 Thanks for opening your first issue here! And to ensure the community is able to respond to your issue, please make sure to fill out the inputs in the issue forms.

For guidance on contributing, check out our contributing guidelines and other resources for contributors.
💬 If you have questions or need support, feel free to join the Processing Foundation Forum or visit our Community page.
📜 Please also review our Code of Conduct to understand our community standards.
Thank You!

[dontwanttothink]

The throwing code is at:

p5.js/src/color/p5.Color.js

Line 323 in 7160242

const obj = range(this._color, color._color, {

According to the color.js documentation, XYZ-D65 is "the fundamental CIE color space, derived from color-matching experiments on human vision. All other color spaces can be converted to XYZ." See also this pretty tree (scroll down).

But the xyz-d65 color space is never registered with color.js, which is necessary because  p5.js uses the procedural API.

p5.js/src/color/p5.Color.js

Lines 1023 to 1032 in 7160242

	// Register color modes and initialize Color maxes to what p5 has set for itself
	p5.Color.addColorMode(RGB, sRGB);
	p5.Color.addColorMode(RGBHDR, P3);
	p5.Color.addColorMode(HSB, HSBSpace);
	p5.Color.addColorMode(HSL, HSLSpace);
	p5.Color.addColorMode(HWB, HWBSpace);
	p5.Color.addColorMode(LAB, Lab);
	p5.Color.addColorMode(LCH, LCHSpace);
	p5.Color.addColorMode(OKLAB, OKLab);
	p5.Color.addColorMode(OKLCH, OKLCHSpace);

p5.js/src/color/p5.Color.js

Lines 71 to 72 in 7160242

	static addColorMode(mode, definition){
	ColorSpace.register(definition);

Therefore, an exception is thrown when p5 asks color.js to work with colors in XYZ-D65.