[p5.strands] Increasing strands' presence in the reference

[lukeplowden]

Increasing access

p5.strands is currently undocumented, with only tutorials as learning resources

Most appropriate sub-area of p5.js?

• [ ] Accessibility
• [ ] Color
• [ ] Core/Environment/Rendering
• [ ] Data
• [ ] DOM
• [ ] Events
• [ ] Image
• [ ] IO
• [ ] Math
• [ ] Typography
• [ ] Utilities
• [x] WebGL
• [ ] Build process
• [ ] Unit testing
• [ ] Internationalization
• [ ] Friendly errors
• [x] Other (specify if possible)

Feature enhancement details

p5.strands requires more thorough documentation so that it's more discoverable and understandable. The idea is to add p5.strands examples to the reference in places which currently have GLSL examples (keeping them side by side to show both work).

For example:

• p5.Shader.modify
• setUniform
• filter

Additional examples could be added to any WebGL functions, including primitive shapes like box.

[perminder-17]

Hi @lukeplowden, first off, hats-off for the brilliant work on p5.strands! I have a small (very silly) question. The filter() function in p5.js typically relies on its own built-in GLSL shaders. When you mention adding examples for p5.strands under filter(), do you mean writing a custom shader that leverages strands internally and showcasing that, and then using filter() function in the whole sketch created? I’m not quite sure how best to place strands examples inside the filter() reference?

In short, are you thinking creating sketches using p5.Strands and then using filter()?

[davepagurek]

In short, are you thinking creating sketches using p5.Strands and then using filter()?

I think so, to give users another potential way to discover strands (through looking up filter) in the examples.

There's a potential separate task we could do in the future where we replace the internal filter implementations with p5.strands versions, but I'll save that for a different issue 🙂

[pratham-radadiya]

hii, i am interested in this issue. can you please, assign it to me

[ksen0]

Hi @pratham-radadiya ! This issue is pretty wide and probably is best done in multiple partial and independent PRs, can you describe the specific scope of a PR you'd work on first, if you're still interested in this? E.g., are you interested in creating some filters with p5.strands to add under filter? (Note that some current filters might be not possible or very challenging to implement in strands, so it's totally ok to pick a few beginner-friendly examples to start with!)

[lukeplowden]

Hi @pratham-radadiya, thank you for your interest. I am currently trying to smooth this out a bit to make it easier to work on with a refactor. It should be ready to go this week. Making a filter would be a great place to start for now: the bloom filter here could be adapted: https://beta.p5js.org/tutorials/intro-to-p5-strands/ It's towards the bottom, with a blue spinning cube. Would you be up for that?

[pratham-radadiya]

Hi @ksen0 and @lukeplowden, I'm really interested in this issue and would love to contribute, but I'm currently working on another issue in the p5.js repo, so I can't start right away — but once that’s wrapped up, I’d love to help out here.

[ksen0]

Hi @pratham-radadiya sure, comment here when you're ready, and @lukeplowden can then also update what the status is / assign! Until then, if anyone else volunteers, they'd be welcome to start work on the bloom filter.

[LalitNarayanYadav]

Hi @lukeplowden, @ksen0

I'm interested in contributing to this issue and would love to start by adapting the bloom filter example using p5.strands, as mentioned. I’ve reviewed the tutorial and the spinning cube example at the bottom, and I believe this would be a solid starting point.

Could you please confirm if there's a preferred structure or any specific guidelines for adding this to the reference (particularly under filter())? Once confirmed, I’ll get started and open a PR soon.

Thanks!

cc @pratham-radadiya

[lukeplowden]

Hi @LalitNarayanYadav, thank you for the help. One place to do this would be in the ShaderGenerator.js file. Right after the p5.Shader.prototype.modify = ... function, just to group the documentation in with the rest of the strands stuff. So, on this line here!

Alternatively, it could be here with the original p5.Shader.modify functions.

@davepagurek and @perminder-17 what do you think?

Additionally there was some talk on Discord of providing a modifyFilterShader(), modifyMaterialShader() or similar, but I dont think an issue was made for this. Regardless, the example here would be the same @LalitNarayanYadav, so a great place to start would be to adapt the bloom shader - perhaps trying to make it as succinct as possible? - and write up the accompanying text. If you make a draft PR for that in either location above, we can continue discussion from there. Let me know if you need any more information!

[LalitNarayanYadav]

Thanks for the feedback and suggestions earlier @lukeplowden @davepagurek!

I've added the bloom filter example using p5.strands under filter() as discussed.
Let me know if the placement and structure look good or if you'd suggest any refinements.

Happy to iterate further if needed!

[perminder-17]

Hi @LalitNarayanYadav, thank you for the help. One place to do this would be in the ShaderGenerator.js file. Right after the p5.Shader.prototype.modify = ... function, just to group the documentation in with the rest of the strands stuff. So, on this line here!

I think this place is good, i.e. just after p5.Shader.prototype.modify = ... function, from my point of view.

[ksen0]

Closing this, since many improvements have been made during the last months to the visibility of p5.strands in the codebase 🎉