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!

[jjnawaaz]

Hi @nbogie - thanks a lot for the detailed feedback, this is really helpful.

You’re absolutely right: pixelInputs isn’t available in baseColorShader, which explains why the first example doesn’t run. I’ll revise that example to use only inputs that are valid for baseColorShader, and I’ll make sure to test it in the p5 Web Editor before updating the reference.

Good point as well about the transition region - I agree that using smoothstep over the entire canvas doesn’t really demonstrate its purpose. I’ll tighten the transition window so the benefit of smoothstep (soft edges vs a linear ramp) is clearer.

I’ll post an updated example shortly and, if helpful, include a link to the Web Editor sketch while it’s under discussion.
Thanks again for taking the time to review and explain!

[jjnawaaz]

I’ve pushed an update addressing the review comments:

Replaced the earlier examples with tested, working p5.strands filter examples

First example now demonstrates smoothstep using only screen coordinates (no uniforms), with a narrow transition band so its effect is clear

Second example builds on that by introducing a uniform for animation

Both examples were tested in the p5 Web Editor (2.x / p5.strands) and verified via npm run build:reference in the website repo

[nbogie]

Hi! That first example is working for me now - well done.
Going back to my first point - introducing the concept of smoothstep without the need for the reader to know about a lot of other shader topics - perhaps you can think of some ways to simplify it still. Think about all the mechanisms the short example is using and whether any can be cut out and replaced with something simpler.

[jjnawaaz]

Hi Thanks, and I’m glad the example is running now.
I see your point about minimizing how many other concepts a reader has to hold in their head just to understand smoothstep. Even though the example is short, it still introduces several p5.strands / shader mechanisms alongside the function itself.
I’ll take another pass to see how far the example can be reduced so that smoothstep is doing almost all of the explanatory work, and the surrounding machinery is as lightweight as possible. I’ll focus on simplifying first, and only keep additional pieces where they directly help clarify what smoothstep does. I’ll follow up with an updated version once I’ve explored a simpler formulation.
Appreciate the guidance.

[jjnawaaz]

I’ve updated the examples to further reduce the number of concepts introduced alongside smoothstep:

The first example now shows a simple grayscale fade across the canvas using only smoothstep and a coordinate (no uniforms, no texture sampling).

The second example builds on the first by introducing a single uniform to animate the transition.

Both examples were tested in the p5 Web Editor using the p5.js 2.0 / p5.strands environment and should run as-is.

Happy to iterate further if there’s an even simpler formulation you’d like to see.