[p5.strands]: Allow equivalent of p5 transforms

[davepagurek]

trafficstars

Increasing access

In normal p5, users have access to functions like rotate(), scale(), etc. In p5.strands, if one wants to position particles, currently there is nothing that looks like that, so to do a rotation, one has to do a lot of manual trig. This is a fairly large step in the learning curve that we could possibly smooth out.

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
• [ ] Other (specify if possible)

Feature enhancement details

I was working on this p5.strands sketch https://openprocessing.org/sketch/2664809 and found myself essentially manually applying a rotation matrix to points. This is fairly hard to do and I wouldn't expect this to be something most users are comfortable with. Maybe there's something we can do there?

My initial thought: we're in the process of making p5.Matrix public and making regular p5 functions have strands equivalents. Maybe we can make an equivalent of p5.Matrix that works in strands?

e.g.:

Before	After
const curveCos = cos(theta) const curveSin = sin(theta) // ... inputs.position += [ curveX * curveCos - curveY * curveSin, curveX * curveSin + curveY * curveCos, 0 ]	const rotation = createTransformMatrix().rotateZ(theta) inputs.position += rotation * [curveX, curveY, 0]