Merge pull request #1166 from nbogie/nb-add-new-uniforms-to-strands-tutorial

p5.strands tutorial: add list of p5.js variables available as uniforms

Author: ksen0

src/content/tutorials/en/intro-to-p5-strands.mdx

@@ -327,6 +327,34 @@ By adding `time / 10000` to the phi angle and modifying the radius with `sin()`,
 Try replacing `sin()` with `tan()`, `acosh()`, or combinations of functions. Small changes in shader code often create dramatically different visual effects, so experimentation goes a long way.
 </ Callout>
 
+#### p5.js variables available as uniforms
+
+Some of the well-known p5.js global variables are made available to your shader as uniforms when you use p5.strands.
+
+Within a strands callback function, you can use any of these directly:
+
+* Dimensions: [width](/reference/p5/width),
+[height](/reference/p5/height),
+[displayWidth](/reference/p5/displayWidth),
+[displayHeight](/reference/p5/displayHeight),
+[windowWidth](/reference/p5/windowWidth),
+[windowHeight](/reference/p5/windowHeight).
+
+* Time and frameCount: [deltaTime](/reference/p5/deltaTime),
+[frameCount](/reference/p5/frameCount).
+
+* Pointer (mouse, touch, etc): [mouseIsPressed](/reference/p5/mouseIsPressed),
+[mouseX](/reference/p5/mouseX),
+[mouseY](/reference/p5/mouseY),
+[pmouseX](/reference/p5/pmouseX),
+[pmouseY](/reference/p5/pmouseY),
+[pwinMouseX](/reference/p5/pwinMouseX),
+[pwinMouseY](/reference/p5/pwinMouseY),
+[winMouseX](/reference/p5/winMouseX),
+[winMouseY](/reference/p5/winMouseY).
+
+These are all floats (numbers) except `mouseIsPressed`, which is a boolean.
+
 ### Fresnel effect
 If you've ever seen a material in a 3D render which appears to glow at the edges, or noticed how the light reflections appear to change on virtual water as you move your viewpoint, you were seeing the Fresnel effect. This effect changes how materials look when viewed at an angle.