Skip to content

Commit 8825738

Browse files
committed
strands tut: add explanation of uniformTexture()
1 parent 8dd472d commit 8825738

File tree

1 file changed

+18
-3
lines changed

1 file changed

+18
-3
lines changed

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

Lines changed: 18 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -24,7 +24,7 @@ import Callout from "../../../components/Callout/index.astro";
2424

2525
## Version
2626

27-
Attempted simplification (25/03/2026).
27+
Attempted simplification (02/04/2026).
2828

2929
(This section to be removed!)
3030

@@ -607,9 +607,24 @@ function draw() {
607607
}
608608
```
609609

610-
At this point, the sketch should look identical. However, we can now use this framebuffer in our bloom shader. We'll pass this texture data into the shader using a "uniform" variable, with the function `uniformTexture`. We still want to define the default parameter as a function in order for it to be retrieved after we make the Framebuffer in `setup`.
610+
At this point, the sketch should look identical. However, we can now use this framebuffer in our bloom shader. We'll pass this texture data from our sketch into the shader using a "uniform" variable.
611611

612-
{ /* TODO: We're now springing "uniform" and uniformTexture on the reader here with no explanation. */ }
612+
We do this by calling the following in the function we pass to `buildFilterShader()`:
613+
614+
```js
615+
const ogImage = uniformTexture(getOriginalImage)
616+
```
617+
618+
This line does two things, representing the two halfs of a bridge between your sketch and your shader:
619+
620+
1. It declares a uniform variable in the shader called `ogImage` which expects to receive a value from outside the shader.
621+
2. It causes your sketch to set that uniform variable **every frame** using [setUniform()](https://beta.p5js.org/reference/p5.Shader/setUniform/) on the shader. The given function (`getOriginalImage`) will be called each frame to decide the value to be passed to setUniform.
622+
623+
For step 2, perhaps it is helpful to _imagine_ the following code being run each frame:
624+
```js
625+
bloomShader.setUniform("ogImage", getOriginalImage())
626+
```
627+
(You shouldn't write the above code - something like it is written and run for you, behind the scenes).
613628

614629
```js
615630
function getOriginalImage(){

0 commit comments

Comments
 (0)