Skip to content

Commit 771782a

Browse files
committed
add list of p5.js variables available as uniforms in strands
1 parent 5d7e49e commit 771782a

1 file changed

Lines changed: 28 additions & 0 deletions

File tree

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

Lines changed: 28 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -327,6 +327,34 @@ By adding `time / 10000` to the phi angle and modifying the radius with `sin()`,
327327
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.
328328
</ Callout>
329329

330+
#### p5.js variables available as uniforms
331+
332+
Some of the well-known p5.js global variables are made available to your shader as uniforms when you use p5.strands.
333+
334+
Within a strands callback function, you can use any of these directly:
335+
336+
* Dimensions: [width](/reference/p5/width),
337+
[height](/reference/p5/height),
338+
[displayWidth](/reference/p5/displayWidth),
339+
[displayHeight](/reference/p5/displayHeight),
340+
[windowWidth](/reference/p5/windowWidth),
341+
[windowHeight](/reference/p5/windowHeight).
342+
343+
* Time and frameCount: [deltaTime](/reference/p5/deltaTime),
344+
[frameCount](/reference/p5/frameCount).
345+
346+
* Pointer (mouse, touch, etc): [mouseIsPressed](/reference/p5/mouseIsPressed),
347+
[mouseX](/reference/p5/mouseX),
348+
[mouseY](/reference/p5/mouseY),
349+
[pmouseX](/reference/p5/pmouseX),
350+
[pmouseY](/reference/p5/pmouseY),
351+
[pwinMouseX](/reference/p5/pwinMouseX),
352+
[pwinMouseY](/reference/p5/pwinMouseY),
353+
[winMouseX](/reference/p5/winMouseX),
354+
[winMouseY](/reference/p5/winMouseY).
355+
356+
These are all floats (numbers) except `mouseIsPressed`, which is a boolean.
357+
330358
### Fresnel effect
331359
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.
332360

0 commit comments

Comments
 (0)