[p5.strands]: Allow equivalent of p5 transforms

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
• 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.:

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]

Start by reviewing p5.strands usage in the linked OpenProcessing sketch and the proposed p5.Matrix and strands-equivalent work in issues #7754 and #7849. Compare the manual rotation-matrix example with the desired transform API; done means users can apply equivalent rotate and scale transforms to particle positions without manual trigonometry.