feat(strands): add color() support for beginner-friendly color inputs

[LalitNarayanYadav]

Part of the Open Source Software Microgrant: beginner-friendly p5.strands API for more p5-like color support.

Changes

Adds beginner-friendly p5.js-style color support inside the strands context, so users can work with familiar color APIs in shaders instead of raw vec4 literals.

color() - parse any p5.js color input into a vec4

Previously, calling color() inside a modify() block returned a p5.Color object, unusable in a GPU shader context. This PR overrides color() in strands_api.js to return a vec4 strands node instead.

Supported input formats (all handled by p5's existing colorjs.io parser):

• Hex strings: color('#ff0000'), color('#f00')
• CSS named colors: color('red'), color('cornflowerblue')
• rgb()/rgba() strings: color('rgb(255, 0, 0)')
• Numeric args: color(255, 0, 0), color(128) (grayscale)

How it works:

1. Calls the original p5.color() to parse the input, no new parsing logic
2. Calls ._getRGBA() on the result to get [r, g, b, a] normalized to 0–1
3. Builds a vec4 strands node via primitiveConstructorNode

lerpColor(c1, c2, amt) - interpolate between two colors

Maps directly to GLSL mix() in the strands context, since colors are vec4s. Falls through to normal p5 behavior outside strands.

red(), green(), blue(), alpha() - component accessors

Extract scalar RGBA channels from a vec4 color node via .x/.y/.z/.w swizzles.

hue(), saturation(), brightness(), lightness() - HSL/HSB accessors

Inject GLSL helper functions (_p5_rgb2hsb, _p5_rgb2hsl) into the shader declarations on first use, then extract the relevant channel from the converted vec3. Helpers are injected into vertex, fragment, and compute declarations.

Outside a strands context, all functions fall through to normal p5 behavior.

Example

myShader = baseMaterialShader().modify(() => {
  getFinalColor((color) => {
    // hex string → vec4(1.0, 0.0, 0.0, 1.0)
    let c = color('#ff0000');

    // interpolate two colors
    let mid = lerpColor(c, color('blue'), 0.5);

    // extract channels
    let r = red(c);       // 1.0
    let h = hue(c);       // 0.0 (red hue)
    let b = brightness(c); // 1.0

    return color;
  });
});

Screenshots

N/A - shader/transpiler change with no visual diff.

PR Checklist

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

[perminder-17]

Do you know why we’re seeing so many diffs?

[LalitNarayanYadav]

The extra diffs are formatting-only changes (whitespace/trailing commas) applied automatically by npx eslint --fix. They don't affect functionality. Happy to squash these into a separate cleanup commit or revert them if you'd prefer the PR to only touch the color-related lines.

[ksen0]

Hi @LalitNarayanYadav ! Please only include changes in the PR related to the color-related updates, for easier review. Please revert the cleanup changes

[LalitNarayanYadav]

Hi @ksen0 ! I've reverted all the formatting changes, the PR now only contains the color-related additions. Sorry for the noise, and thanks for the patience!

[davepagurek]

This is a good start, thanks for working on this! I left a few comments, and then additionally do you think we could add unit or visual tests that make use of all the new methods in strands?

[davepagurek]

This is GLSL-specific. Is it possible to either build this out of existing functionality, similar to what you were doing with paletteLerp in #8817? Otherwise we'd need to move these snippets into the glsl and wgsl backends so that we can have a version for either, which is why it's a little less work for each backend if we can make them work without a snippet 🙂

[davepagurek]

nice!

[davepagurek]

Would return p5.strandsNode(rgba) be equivalent to this? if so it might be a little better at reusing existing functionality.

[LalitNarayanYadav]

Thanks for the review Dave! I'll:

Simplify color() to use p5.strandsNode(rgba)
Rewrite the HSB/HSL conversions using existing strands math functions to avoid backend-specific GLSL snippets
Add unit/visual tests for all new methods

Quick question on point 2 - should I build the RGB→HSL/HSB conversion purely from existing strands ops (mix, step, min, max, abs, mod) similar to how map is implemented? Or would you prefer I add backend-specific snippets to both strands_glslBackend.js and strands_wgslBackend.js?