docs(p5.strands): document smoothstep

[jjnawaaz]

Resolves #8442

Changes

• Added reference documentation for the smoothstep() function in the p5.strands API
• Documented parameters, return value, and behavior consistent with GLSL smoothstep
• Included a usage example demonstrating smooth opacity transitions via combineColors

Screenshots of the change

Not applicable (documentation-only change).

PR Checklist

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

[welcome]

🎉 Thanks for opening this pull request! For guidance on contributing, check out our contributor guidelines and other resources for contributors!
🤔 Please ensure that your PR links to an issue, which has been approved for work by a maintainer; otherwise, there might already be someone working on it, or still ongoing discussion about implementation. You are welcome to join the discussion in an Issue if you're not sure!
🌸 Once your PR is merged, be sure to add yourself to the list of contributors on the readme page !

Thank You!

[jjnawaaz]

I’ve updated the smoothstep docs to:

• start with a simple coordinate-based example (no uniforms) to introduce the concept clearly,
• followed by a second example that uses a uniform for animation, as a progression.

Both examples now follow the p5.strands patterns from the tutorial and should run as-is.

I also ran npm run build:reference on the p5.js-website repo to make sure the reference builds cleanly with these changes.

Happy to iterate further if you have more suggestions

[nbogie]

Hi @jjnawaaz!
I like the simplification of the idea, but that first code example does not run for me. I am new to p5.strands but I don't think pixelInputs is available in baseColorShader.

(I only checked your first example.)

I would recommend always developing, testing, and saving all examples on the p5 web editor first, finally pasting them into the reference comment only once you're happy that they run without error. If you do need to make later modifications to the example code, I would absolutely make the change back in the p5 web editor, rather than directly in the comment-block of the .js source file, so that you can again ensure your example code runs. The back-and-forth process can be a little laborious, I would agree - that's all the more reason to get your examples as close to perfect as possible before integrating them into the comment block.

You can also include, in this conversation, links to your intended examples in the web editor while they're under discussion - that can make it a lot more convenient for you, and for reviewers, during early feedback.

Let me know if I can help!

[nbogie]

Also, I could be wrong but I think the usefulness of smoothstep will be demonstrated better by a narrower transition region between the colours. If it's just being used to make a linear transition across essentially the entire width of the canvas, then we may as well just use the normalized x value directly, without smoothstep. I hope that makes sense!