Add p5.strands documentation and examples for color functions

[Yashisinghal285]

Closes #8915

Adds p5.strands-specific documentation and examples for color(), green(), blue(), alpha(), hue(), saturation(), brightness(), and lightness() in src/color/creating_reading.js. (red() and lerpColor() already had strand notes/examples from #8822.)

Each function's JSDoc now includes:

• A short note that in strands shader callbacks, the function operates on vec4 values with components normalized to the 0–1 range
• A note that colorMode() has no effect inside shader callbacks
• A minimal @example showing usage inside a baseMaterialShader().modify() callback, following the pattern established in feat(strands): add color() support for beginner-friendly color inputs #8822

Examples were kept minimal and focused per the style guide, as discussed in the issue thread.

cc @LalitNarayanYadav for review

[LalitNarayanYadav]

Thanks for the PR @Yashisinghal285! Good start - the strands descriptions for each function are accurate. A few things to fix before this is ready:

1. Examples are incomplete/incorrect

• The strands examples don't have createCanvas() or a working sketch structure.
• p5.getPixelInputs should be getPixelInputs (no p5. prefix inside modify()).
• The examples also need { myp5 } scope (or similar), following the existing strands examples in the test file.

2. color() strands example issue

The example returns c from inside getPixelInputs, but getPixelInputs expects the inputs object to be returned, not a color directly.

Instead, it should be:

inputs.color = c;
return inputs;

3. Missing blank line before strands paragraph

For brightness() and lightness(), the strands paragraph is placed immediately after the existing text without a blank line. This may break the JSDoc formatting.

4. lerpColor() example is incomplete

The strands example creates c1, c2, and mixed, but doesn't actually do anything with mixed—there's no hook or return value demonstrating its use.

5. Style guide

Per the p5.js documentation style guide, examples should be:

• Minimal
• Self-contained
• Include a describe() call

Happy to clarify any of these if needed!

[Yashisinghal285]

Thanks @LalitNarayanYadav for the detailed feedback! Fixed all 5 points:

1. Examples now include createCanvas(), setup()/draw(), and getPixelInputs (no p5. prefix)
2. color() now does inputs.color = c; return inputs;
3. Added the missing blank line before the strands paragraph in brightness() and lightness()
4. lerpColor() now actually applies mixed via inputs.color
5. All examples are minimal, self-contained, and include describe()

On the {myp5} scope note — checked test/unit/assets/testMaterial.js, which uses global-mode getPixelInputs() (no prefix), matching what I used and consistent with the rest of this file's examples. Let me know if you meant something different.

[LalitNarayanYadav]

Thanks for the updates @Yashisinghal285! Getting closer, but a few things still need fixing:

1. Examples still won't run

The strands examples are missing createCanvas(100, 100, WEBGL) and the shader setup. A minimal working example should look like:

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

  let myShader = baseMaterialShader().modify(() => {
    getFinalColor((col) => {
      let c = color('#ff0000');
      col.rgb = c.rgb;
      return col;
    });
  });

  shader(myShader);
  noStroke();
  plane(100, 100);

  describe('A red plane');
}

2. getPixelInputs vs getFinalColor

The examples use getPixelInputs, but for color-related functions getFinalColor is more appropriate and consistent with the example sketch from the microgrant.

3. describe() is missing

Every example needs a describe() call per the p5.js documentation style guide.

4. Strands paragraph placement

The strands note should go just before the @method tag, not mixed in with the existing description text. Check how it was done in color() in PR #8822 as a reference.

5. Some functions still missing strands notes

brightness() and lightness() don't seem to have strands paragraphs added yet.

Suggest looking at the working example sketch at https://editor.p5js.org/LalitNarayanYadav/sketches/YMy8k8QSF as a reference for how these functions work together in practice.