[p5.js 2.0]: Color module rewrite - Culori.js/ Color.js/Texel

[dianamgalindo]

Resolves #7018

Changes:

These are ongoing changes made to the p5.js Color module in an attempt to implement the Culori.js color library.
The changes are based on the current implementation that has been given to the Color.js library on the
dev-2.0 branch.

The main key differences against the existing p5.Color implementation is the removal of colorPatterns and _parseInputs. These are usually replaced by pre-existing functions such as converter, parse, or to provided by the external API's (Color.js/ Culori.js)

PR Checklist

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

[dianamgalindo]

Color Module rewrite - findings

• The aim of testing the Color.js, Culori.js and Texel color libraries was to figure out which is the best option in terms of :
  • Features: what does each library offer? Does it support all the color modes and manipulations that p5.js currently uses (RGB, HSL, HEX)? Are there additional features like color conversion, interpolation, or blending?
  • Maintainability: are the libraries actively mantained? Do they have good documentation and community support? Are there regularly updated?
  • Size: how much overhead does it add to the final p5.js build? (smaller libraries are preferable if they meet the functionality requirements)
  • Performance: how fast is the library within the operations of p5.js, this is crucial for real-time rendering or animations.

Project branches:

• All libraries: https://github.com/dianamgalindo/p5.js/tree/dev-2.0-all
• Colorjs: https://github.com/dianamgalindo/p5.js/tree/dev-2.0-colorjs
• Culori: https://github.com/dianamgalindo/p5.js/tree/dev-2.0-culori
• Texel: https://github.com/dianamgalindo/p5.js/tree/dev-2.0-texel

---

Features

The following table outlines the difference between the supported color spaces. The core color spaces currently supported by p5.js (RGB, HSB/HSV, HSL) were taken as a starting point to test the integration of the libraries within the existing p5.js API.

Color spaces	Color.js	Culori.js	Texel.js
RGB	Range: [ 0, 1 ] (for every channel)	Range [ 0 , 1 ] (for every channel)	Range[ 0, 1 ] (for every channel)
HSB/ HSV	Range: H [ 0 , 360] S [ 0 , 100] V [ 0 , 100]	Range: H [ 0 , 360] S [ 0 , 1] V [ 0 , 1 ]	Replaced by OKHSV Range [ 0, 1 ] (for every channel)
HSL	Range: H [ 0 , 360] S [ 0 , 100] L [ 0 , 100]	Range: H [ 0, 360] S [ 0 , 1 ] L [ 0 , 1 ]	Supported through ‘custom color spaces’. OKLab, OKHSL and DeltaEOK have replaced CIELab, HSL
Color structure	Color.js structures its color object as Color( "sRGB", [0, 1, 0], .5)	Culori doesn’t have a Color class. Intead, it uses plain objects to represent colors: { mode: 'rgb', r: 0.1, g: 0.2, b: 1, alpha: 1 <br /> }	Texel structure colors as {space: "srgb", coords: [1, 0, 0], alpha: 1.0 <br />}
Core features
Tree-shaking (optimizing bundle size)	Yes using procedural, tree-shakable API	Yes using culori/fn	Yes (by default)
Converting colors between color spaces	Using the .to() method to return a new Color object	Using parse() which only operates strings or converter() which accepts strings and color objects and returns objects in a predictable color space.	Using the convert() function
Interpolation	Yes, using .range()	Yes, using interpolate()	Yes, using lerp(), although some additional logic needs to be built.
Ease of Integration within existing API	Possible integration. However, the HSB space would need extra implementation.	Possible integration. However, the HSB space would need extra implementation	The integration would take a bit more of development from the p5.js side. This library doesn’t support HSB, HSL, or CSS colors.

---

Maintainability

	Color.js	Culori.js	Texel.js
Documentation	Actively maintained with active updates and contributors. The API is also very well structured and documented.	Actively maintained, with less contributors than Color.js. The API is well structured.	Texel is currently actively maintained, but it has a lot less contributors and documentation. Their API isn’t very well documented at the moment. There might be opportunity to help grow Texel.js

Stats from: https://npmtrends.com/@texel/color-vs-colorjs.io-vs-culori

---

Packages sizes

The p5.js Color module currently handles all the operations to convert between color spaces, as well as validating the different input formats offered to the users. The introduction of a colour library will increase the overall size of the library. The following table shows the size of every library when rendered within p5.js, as well as the Gzip size; these have been visualised using the Rollup Plugin Visualizer.

	p5.js color	Colorjs	Culori	Texel
Size (within p5.js and no use of the package)	110KB	Rendered 103.54KB	Rendered 101.48KB	Rendered 24.77KB
Gzip size (after treeshake and compression within p5.js)		42.79KB	49.25KB	8.66KB

The following image shows a visual of the p5.js packages. In this visual we have an overview of texel, culori and colorjs when they have been installed within p5.js. This diagram can be replicated by running npm run dev global on the ‘All libraries’ branch: https://github.com/dianamgalindo/p5.js/tree/dev-2.0-all

---

Performance

The performance of each library can be benchmarked against each other. One of the key attractive points of Texel is its optimisation for speed against Colorjs.io and therefore Culori, at the cost of lacking functionalities. However, a veridic performance overview of each library can only be achieved once fully integrated within the p5.js API. The current integration of each color library is partial, and some of them require extra development work to achieve conversions and readings, mainly concerning the HSB/HSV colour space. Therefore, it is necessary to further investigate the potential performance impacts of integrating new color libraries.

Conclusion

The tested libraries have different ranges of complexity and performance. However, their implementation within p5.js can be summarised as:

• Colorjs.io: This library covers a wide range of color spaces and it simplifies the code for p5.Color.js , mainly replacing color conversion and parsing operations. However, this library has a larger size than culori and texel. This library is best for projects that require high accuracy.
• Culori: Very similar to Color.js in that it simplifies the code for p5.Color.js by offering color conversion functions, parsing, and modern color spaces. This library is best for lightweight projects that need color space expansion.
• Texel: This library can also be incorporated within p5.Color.js, however, it would require development work. Texel only supports modern color spaces, leaving out HSL, HSB/HSV and CSS colors. This library is relatively new and is best for highly customizable solutions. There’s opportunity to use some of their functionalities, and perhaps help them grow the library.

In summary, a most immediate implementation can come from Culori as a good balance between functionality and performance.

[limzykenneth]

@dianamgalindo Thanks for the detailed research it's very helpful. I think there is a good case to implement culori with possible second options as color.js. Texel color will require quite a bit more development at the moment but we can always revisit when it is more mature.

I'll probably won't merge this PR directly as it seems to contain mostly test code. I may adapt some of the proof of concept code for culori though.